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

Posted 2023-03-06

【中文标题】同一个动画可以有不同的过渡吗？ [复制]

【英文标题】：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);
  

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

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

【问题讨论】：

您可以在动画的每一步使用animation-easing-function，但transition 不会做任何事情。

是的！我不知道为什么我总是忽略这个属性。谢谢。

【参考方案1】：

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

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

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

【讨论】：

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