使用变换属性的多个 CSS 关键帧动画不起作用答案

【问题标题】：Multiple CSS keyframe animations using transform property not working使用变换属性的多个 CSS 关键帧动画不起作用
【发布时间】：2013-01-01 07:28:47
【问题描述】：

在使用 CSS 关键帧动画时，我发现当我给一个元素提供两个动画时：

.element {
    animation: animate1 1000ms linear infinite,
               animate2 3000ms linear infinite;
}

如果两个动画都使用transform 属性进行动画处理，则只有最后一个通过级联触发。但是，如果@keyframes 动画是一个margin 或display 或其他css 属性，而另一个使用transform，那么它们都会触发。

here is a codepen example 相关代码如下。

CSS

@keyframes move {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(50px); }
}
@keyframes skew {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(15deg); }
}
@keyframes opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.taco {
    animation: skew 2000ms linear infinite,
               opacity 4000ms linear infinite;
}

在上面它们都触发了

.burger {
    animation: skew 2000ms linear infinite,
               move 4000ms linear infinite;
}

在上面只有最后一个触发器（通过级联）- 为什么？

有没有人可以在不使用js 的情况下解决这个问题？或者这是行不通的事情？这个例子非常简单，我知道我可以将动画合并为一个，而不必同时声明两者，但这是对我正在处理的更复杂动画的测试。

谢谢

【问题讨论】：

标签： css css-animations

【解决方案1】：

@StephanMuller 的 jsfiddle 几乎就是答案，该语法对我有用 http://jsfiddle.net/j83m5ha5/4

div {
background:green;
width:100px;
height:100px;
-webkit-animation: in 2s 200ms  forwards, out 1s 2200ms forwards;
}

我相信 OP 提出了手头的问题，因为他想标准化他的动画并根据需要应用它们，从我的课程中获取这个最近的练习代码：https://jsfiddle.net/kgLc56w4/

#b15{
top:200px;
left:200px;
background:#ff3399;
-webkit-animation: r4 ease-in-out 2s forwards 24s, s4 ease-in-out 2s forwards 30s;
}

每个方块只向一个方向移动，所以我没有做 15 个动画的繁重工作，而是使用了更简单的 8。我知道这可以做得更简单，但这不是重点实践。

我改变了什么，我在最后 15 个元素上使用了 Stephan 的语法再次移动它，它可以工作。

你只需要注意时间，在斯蒂芬的例子中，如果你增加第一个（in）动画的持续时间，你需要增加第二个（out）的延迟。

例子：

-webkit-animation: in 20s 200ms  forwards, out 1s 20200ms forwards;

希望这会有所帮助！

【讨论】：

【解决方案2】：

你不能对同一个属性（这里是变换属性）进行多次动画，在同一个元素上，最后一个会覆盖另一个，

你应该把你的目标元素放入一个 div 中，并在 div 上应用一个变换动画，在目标元素上应用另一个变换动画......

.div_class
{
    animation:animate1 1000ms linear infinite;
}

.element
{     
   animation:animate2 3000ms linear infinite;
}

【讨论】：

感谢包装在 div 中的想法，两个变换动画需要不同的时间。
"你不能在同一个元素上多次为同一个属性设置动画" 不过这似乎并不完全准确，请参阅：jsfiddle.net/j83m5ha5/4。在这里，相同的元素将相同的属性链接到相同的类上。为什么这行得通，而转换却不行？
@StephanMuller ，我检查了你的动画，第二个动画（out）覆盖了第一个（in），只需增加第一个动画的持续时间，假设让它 10 秒，然后看看效果，你会发现这是一个1分钟的动画，因为第二个动画覆盖了第一个..

【解决方案3】：

出于同样的原因

transform: skewX(45deg);
transform: translateX(4em);

不会倾斜元素，只会移动它。如果你想同时倾斜和移动它，那么你需要链接它们transform: skewX(45deg) translateX(4em)

你必须做类似的事情

@keyframes t {
    25% { transform: skewX(15deg); }
    50% { transform: skewX(0deg) translateX(50px); }
    75% { transform: skewX(15deg); }
}

您无需明确指定 0% 和 100% 关键帧 - 它们会自动生成 - 请参阅 the CSS Animations spec。

然后你就可以使用了

animation: t 4000ms linear infinite,
        opacity 4000ms linear infinite;

您应该注意的另一件事是：skewX(angleValue) translateX(lengthValue) 恰好与translateX(lengthValue) skewX(angleValue) 相同。但是，在大多数情况下，应用转换的顺序很重要。 skewX(angleValue) translateY(lengthValue) 和 translateY(lengthValue) skewX(angleValue) 会得到不同的结果。

【讨论】：