CSS 动画不播放答案

【问题标题】：CSS Animation doesn't playCSS 动画不播放
【发布时间】：2022-12-09 19:44:11
【问题描述】：

我一直在尝试用 CSS 做一个简单的动画。应用程序徽标应该向右移动 200 像素，然后平滑地返回到它的原始位置。为此，我为动画编写了这个：

/* LOGO MAIN STYLE */
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

/* ANIMATION FOR THE LOGO */
.App-logo {
  animation-fill-mode: forwards, none;
  animation-name: move-right, move-left;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: ease-in-out, ease-in-out;
}

@keyframes move-right {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(200px);
  }
}

@keyframes move-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200px);
  }
}

我遇到的问题是第一个动画从未真正播放过，它只是跳到第二个。

【问题讨论】：

你能提供一个codepen吗？
“应用程序徽标应该向右移动 200 像素，然后平滑地返回到它的原始位置。”- 那不需要二动画，你可以用一个来做到这一点 - 通过使用百分比而不是 from 和 to。将 0% 和 100% 的转换设置为 0 - 50% 设置为 -200px。

标签： html css reactjs animation css-animations

【解决方案1】：

/* LOGO MAIN STYLE */
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

/* ANIMATION FOR THE LOGO */
.App-logo {
  animation-name: move-right;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes move-right {
  0%{
    transform: translateX(0%);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0px);
  }
}

【讨论】：

【解决方案2】：

/* LOGO MAIN STYLE */
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

/* ANIMATION FOR THE LOGO */
.App-logo {
  animation-name: move-right;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes move-right {
  0%{
    transform: translateX(0%);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0px);
  }
}

【讨论】：