html - 为什么我的动画方向不是 :alternate work?

Question

div {
  background-color: yellow;
  width: 150px;
  height: 150px;
  border: red 1px solid;
  position: relative;
  animation-name: name;
  animation-duration: 3s;
  animation-direction: alternate;
}

@keyframes name {
  100% {
    transform: translate(400px, 300px);
    background-color: pink;
  }
}

<div></div>

你好，我认为我的 animation-direction:alternate 应该先向前播放然后向后播放。但它似乎并没有那样工作。谁能解释一下为什么？

Answer 1

考虑 animation-iteration-count 的值至少为 2 才能产生这种行为

div {
  background-color: yellow;
  width: 150px;
  height: 150px;
  border: red 1px solid;
  position: relative;
  animation-name: name;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count:2;
}

@keyframes name {
  100% {
    transform: translate(400px, 300px);
    background-color: pink;
  }
}

<div></div>

The animation-iteration-count CSS property specifies the number of times an animation cycle should be played before stopping. If multiple values are specified, each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used.^ref

---

alternate

The animation reverses direction each cycle, with the first iteration being played forwards. The count to determine if a cycle is even or odd starts at one.^ref

因此您的动画需要运行不止一次才能具有替代行为。