How to make CSS animation not return to original position

Question

I have 2 div tags that I turned into blocks. I made some code that when run, makes the 2 blocks swoop out to the side. My problem is, they then swoop back into their original position. I want the 2 blocks you see in the animation below, to swoop out to the sides, but then not return to the center.

:)

.dark1 {
  background-color: black;
  height: 100vh;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 50%;
  animation: example1 5s;
}

.dark2 {
  background-color: red;
  height: 100vh;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50%;
  animation: example 5s;
}

@keyframes example {
  50% {
    right: -500px;
    top: 0px;
  }
}

@keyframes example1 {
  50% {
    left: -500px;
    top: 0px;
  }
}

<!DOCTYPE html>
<html>

<body>
  <div class="dark1"></div>
  <div class="dark2"></div>

</body>

</html>

its kind of strange to specify width twice, you should remove one of them — Furious Mountain, May 19 '21 at 12:49

score 1 · Answer 1 · answered May 19 '21 at 12:45

you can use animation-fill-mode: forwards

.dark1 {
  background-color: black;
  width: 50px;
  height: 100vh;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 50%;
  animation: example1 5s;
  animation-fill-mode: forwards
}

.dark2 {
  background-color: red;
  width: 50px;
  height: 100vh;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50%;
  animation: example 5s;
  animation-fill-mode: forwards
}

@keyframes example {
 100% {
    right: -500px;
    top: 0px;
  }
}

@keyframes example1 {
  100% {
    left: -500px;
    top: 0px;
  }
}

<body>
  <div class="dark1"></div>
  <div class="dark2"></div>

</body>

score 1 · Accepted Answer · answered May 19 '21 at 12:46

The animation reverses because you specified 50% in your keyframe definition, and the default animation-fill-mode is none, so the animation will reset at the end.

Instead, make the keyframes defined at 100% (or to) and apply an animation-fill-mode of forwards or both:

.dark1 {
  background-color: black;
  width: 50px;
  height: 100vh;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 50%;
  animation: example1 5s;
  animation-fill-mode: both;
}

.dark2 {
  background-color: red;
  width: 50px;
  height: 100vh;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50%;
  animation: example 5s;
  animation-fill-mode: both;
}

@keyframes example {
 100% {
    right: -500px;
  }
}

@keyframes example1 {
  100% {
    left: -500px;
  }
}

<!DOCTYPE html>
<html>

<body>
  <div class="dark1"></div>
  <div class="dark2"></div>

</body>

</html>

score 0 · Answer 3 · answered May 19 '21 at 12:55

Also you can do this with single element and less code.

.box {
  background: linear-gradient(black 0 0) 0 0 / 50% 100% no-repeat, 
              linear-gradient(red 0 0) 100% 0 / 50% 100% no-repeat;
  height: 100vh;
  animation: example 5s forwards;
}

@keyframes example {
  to {
    background-size: 25% 100%;
  }
}

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

How to make CSS animation not return to original position

3 Answers3