CSS animation from width 0 to 100

Question

Here is what I want to do: I want to play an animation on a div which starts from width: 0 to width: 100vw, then back to 0 BUT when it goes back to width 0, and I want to animate from the left to right, like a "continous" animation, not a "reverse". Like in the middle of the animation you can see the div, but when it goes back to width 0, it should disappear from left to right ( like the way it started ). I don't know how to explain this better...

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>

Temani Afif · Answer 1 · 2019-03-21T12:01:12.617

change left:0 to right:0 in the middle of the animation:

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>

You can also simplify using only 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>

You can also do this without changing the width in case you only want the visual effect:

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>

Another idea using 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>

Also with 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>

CSS animation from width 0 to 100

1 Answers1