同一个动画可以有不同的过渡吗？

Question

我正在尝试创建包含多个步骤的动画。
我希望每次更改样式状态时都有不同的过渡值。

然而，在@keyframes中使用transition没有效果。

.square {
  background-color: #333;
  height: 100px;
  width: 100px;
  animation: 4s move infinite;
}
@keyframes move {
  0% {
    transition: ease-in;
  }
  50% {
    transform: translate(100%);
    transition: ease-out;
  } 100% {
    transform: translate(0);
    transition: cubic-bezier(0.25, 0.1, 0.6, 1.8);
  }
}

<div class="square"></div>

我想知道是否有一种方法可以让动画的每个阶段都有不同的过渡，而不必在包装元素中组合多个 animation。

Answer 1

transition 属性不会在关键帧内执行任何操作。您可以使用 transition 属性指定绘画如何在 selectors/transforms 之间转换（即默认和 :hover），或者您可以使用关键帧指定它如何转换时间范围（即 from/to 或 0%、50%, 100% 等）。

仔细想想，它们是表达相同信息的两种不同方式。

如果您想更好地控制过渡，您可以在各个关键帧中使用animation-timing-function属性。只知道 Safari (iOS/OSX) 直到 2015 年左右才支持它，因此如果您需要支持这些版本，您可能运行会遇到麻烦。

同一个动画可以有不同的过渡吗？

Is it possible to have different transitions for the same animation?

css

css-transitions

css-animations