同一个动画可以有不同的过渡吗？ [复制]答案

【问题标题】：Is it possible to have different transitions for the same animation? [duplicate]同一个动画可以有不同的过渡吗？ [复制]
【发布时间】：2020-06-08 12:26:22
【问题描述】：

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

但是，在@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);
  }
}

&lt;div class="square"&gt;&lt;/div&gt;

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

【问题讨论】：

您可以在动画的每一步使用animation-easing-function，但transition 不会做任何事情。
是的！我不知道为什么我总是忽略这个属性。谢谢。

标签： css css-animations css-transitions

【解决方案1】：

transition 属性在关键帧内不做任何事情。您可以使用transition 属性来指定选择器/转换之间的绘制转换方式（即，默认和:hover），或者您可以使用关键帧来指定它在时间范围内的转换方式（即，from/@ 987654325@，或0%，50%,100%等）。

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

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

【讨论】：

animation-timing-function 就是这样。也感谢您的支持信息。