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

Question

在使用CSS关键帧动画时,我发现当我给一个元素时,有两个动画,例如:

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

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

这是一个带有相关代码的codepen示例.

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

您不能在同一个元素上多次为同一属性(此处为transform属性)设置动画,最后一个将覆盖其他元素,

您应该将目标元素放入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%关键帧 - 它们将自动生成 - 请参阅CSS动画规范.

然后你可以使用

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).