Question

这是我想做的：我想在div上播放动画，该动画从width：0到width：100vw开始，然后当它回到宽度0时又回到0，但是我想从从左到右，就像“连续”动画，而不是“反向”动画。就像在动画中间一样，您可以看到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

在动画中间将for(int i = 0; i < 8; i++) { for(int j = 0; j < 8; j++) { if ((i % 2 == 0 && j % 2 == 0) || (i % 2 != 0 && j % 2 != 0)) { // your code here the value you had for i will now be (i * 8 + j) } } }更改为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;
  }
}

CSS动画从0到100的宽度

1 个答案: