CSS动画从0到100的宽度

Question

这是我想做的：我想在从width：0到width：100vw开始的div上播放动画，然后当它回到width 0时又回到0 BUT，并且我想从左到右进行动画处理。对，就像“连续”动画，而不是“反向”动画。就像在动画的中间一样，您可以看到div，但是当它回到宽度0时，它应该从左到右消失（就像它开始的方式一样）。我不知道如何更好地解释这一点...

div {
  position: fixed;
  z-index: 100;
  background: red;
  width: 0;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    width: 0;
  }
  50% {
    width: 100vw;
  }
  100% {
    width: 0;
    /* but starting to "disappear" from left to right, just like the way it appears */
  }
}

<div></div>

Answer 1

在动画中间更改left:0为right:0：

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  width: 0;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    width: 0;
  }
  50% {
    width: 100vw;
    left:0;
    right:auto;
  }
  50.1% {
    left:auto;
    right:0;
  }
  100% {
    width: 0;
    left:auto;
    right:0;
  }
}

<div class="box"></div>

您还可以简化仅使用left/ right：

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    left:0;
    right:100%;
  }
  50% {
    left:0;
    right:0;
  }
  100% {
    left:100%;
    right:0;
  }
}

<div class="box"></div>

如果只需要视觉效果，也可以在不更改宽度的情况下执行此操作：

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    transform:translateX(-100%);
  }
  45%,55% { /*to stay a while full width*/
    transform:translateX(0);
  }
  100% {
    transform:translateX(100%);
  }
}

<div class="box"></div>

使用的另一个想法scale()：

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    transform:scaleX(0);
    transform-origin:left;
  }
  45% {
    transform:scaleX(1);
    transform-origin:left;
  }
  55% { 
    transform:scaleX(1);
    transform-origin:right;
  }
  100% {
    transform:scaleX(0);
    transform-origin:right;
  }
}

<div class="box"></div>

也有 rotation()

div.box {
  position: fixed;
  z-index: 100;
  background: red;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  animation: 1s in-out forwards;
}

@keyframes in-out {
  0% {
    transform:rotateY(-90deg);
    transform-origin:left;
  }
  45% {
    transform:rotateY(0deg);
    transform-origin:left;
  }
  55% { 
    transform:rotateY(0deg);
    transform-origin:right;
  }
  100% {
    transform:rotateY(-90deg);
    transform-origin:right;
  }
}

<div class="box"></div>