Question

在使用 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的情况下解决此问题？或者这是不起作用的东西？这个例子非常简单，我知道我可以将动画组合成一个而不必声明两者，但这是对我正在制作的更复杂动画的测试。

感谢

Answer 1

您不能在同一元素上多次动画相同属性（此处为变换属性），最后一个将覆盖其他元素，

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

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

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

Answer 2

出于同样的原因

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)获得不同的结果。

Answer 3

@ 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的语法再次移动它并且它可以工作。

你只需要小心时间，在Stephen的情况下，如果你增加第一个（in）动画的持续时间，你需要增加第二个（out）的延迟。

示例：

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

希望这有帮助！

使用transform属性不起作用的多个CSS关键帧动画

3 个答案: