时间戳

首页 > 解决方案 > 同一个动画可以有不同的过渡吗？

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

问题描述

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

但是，使用transitioninside@keyframes没有任何效果。

.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包装元素。

标签： csscss-animationscss-transitions

解决方案

该transition属性在关键帧内不做任何事情。您可以使用该属性来指定选择器/变换之间的绘制transition转换方式（即默认和:hoverfromto0%50%, 100%

当您考虑它时，它们是表达相同信息的两种不同方式。

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

推荐阅读