如何使 CSS 动画不 return 到原始位置

Question

我有 2 个 div 标签，我把它们变成了块。我编写了一些代码，当运行时，使 2 个方块猛扑到一边。我的问题是，他们然后猛扑回到原来的位置。我希望您在下面的动画中看到的 2 个方块向两侧猛扑，但不是 return 到中心。

:)

.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>

Answer 1

你可以使用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>

Answer 2

动画反转是因为你在关键帧定义中指定了50%，而默认的animation-fill-mode是none，所以动画会在最后重置。

相反，将关键帧定义为 100%（或 to）并应用 forwards 或 both:

的 animation-fill-mode

.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>

Answer 3

您也可以使用单个元素和更少的代码来做到这一点。

.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>

如何使 CSS 动画不 return 到原始位置

How to make CSS animation not return to original position

css

css-animations