使用转换属性的多个 CSS 关键帧动画不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14384494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple CSS keyframe animations using transform property not working
提问by Danferth
While working with CSS keyframe animationsI found that when I give an element two animations like:
在使用CSS 关键帧动画时，我发现当我给一个元素提供两个动画时，例如：
.element {
animation: animate1 1000ms linear infinite,
animate2 3000ms linear infinite;
}
If both of the animations animate using the transformproperty only the last one triggers through cascading. But if the @keyframesanimations are lets say one marginor displayor some other cssattribute and the other uses transformthen they both trigger.
如果两个动画都使用该transform属性进行动画处理，则只有最后一个动画通过级联触发。但是，如果@keyframes动画是让我们说一个margin或display某个其他css属性而其他属性使用，transform那么它们都会触发。
here is a codepen examplewith the relevant code below.
这是一个带有以下相关代码的 codepen 示例。
CSS
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;
}
In the Above they both trigger
在上面他们都触发
.burger {
animation: skew 2000ms linear infinite,
move 4000ms linear infinite;
}
In the above only the last triggers (through cascading)- why?
在上面只有最后一个触发器（通过级联）- 为什么？
Anyone have a solution for this without using js? Or is this something that just doesn't work? The example is quite simple and I know that I could combine the animations into one and not have to declare both but this was a test for a more complex animation I was working on.
任何人都可以在不使用的情况下解决这个问题js？或者这是行不通的事情？这个例子很简单，我知道我可以将动画组合成一个，而不必声明两者，但这是对我正在处理的更复杂动画的测试。
thanks
谢谢
回答by Swarnendu Paul
You cannot animate same attribute ( here transform attribute ) more than once, on a same element, the last one will overwrite other,
您不能多次为同一个属性（此处为 transform 属性）设置动画，在同一个元素上，最后一个将覆盖其他元素，
You should put your target element into a div, and apply one transform-animation on the div and other transform-animation on the target element....
你应该把你的目标元素放到一个 div 中，并在 div 上应用一个变换动画，在目标元素上应用另一个变换动画......
.div_class
{
animation:animate1 1000ms linear infinite;
}
.element
{
animation:animate2 3000ms linear infinite;
}
回答by Ana
For the same reason that
出于同样的原因
transform: skewX(45deg);
transform: translateX(4em);
won't skew the element but will only move it. And if you want to both skew and move it then you need to chain them transform: skewX(45deg) translateX(4em)
不会扭曲元素，只会移动它。如果你想同时倾斜和移动它，那么你需要将它们链接起来transform: skewX(45deg) translateX(4em)
You'll have to do something like
你必须做类似的事情
@keyframes t {
25% { transform: skewX(15deg); }
50% { transform: skewX(0deg) translateX(50px); }
75% { transform: skewX(15deg); }
}
You don't need to explicitly specify 0%and 100%keyframes - they'll be automatically generated - see the CSS Animations spec.
您不需要明确指定0%和100%关键帧 - 它们会自动生成 - 请参阅CSS 动画规范。
And then you can use
然后你可以使用
animation: t 4000ms linear infinite,
opacity 4000ms linear infinite;
One more thing you should be careful about: skewX(angleValue) translateX(lengthValue)happensto be the same as translateX(lengthValue) skewX(angleValue). However, most of the times, the order in which you apply transforms matters. You'll get different results for skewX(angleValue) translateY(lengthValue)and translateY(lengthValue) skewX(angleValue).
您还应该注意的另一件事是：skewX(angleValue) translateX(lengthValue)恰好与translateX(lengthValue) skewX(angleValue). 但是，大多数情况下，应用转换的顺序很重要。对于skewX(angleValue) translateY(lengthValue)和 ，您将获得不同的结果translateY(lengthValue) skewX(angleValue)。
回答by Ivan Don?evi?
@StephanMuller's jsfiddle is pretty much the answer, that syntax has worked for me http://jsfiddle.net/j83m5ha5/4
@StephanMuller 的 jsfiddle 几乎就是答案，该语法对我有用 http://jsfiddle.net/j83m5ha5/4
div {
background:green;
width:100px;
height:100px;
-webkit-animation: in 2s 200ms forwards, out 1s 2200ms forwards;
}
I believe the OP has asked the question at hand because he wanted to standardise his animations and just apply them as needed, take this recent practice code from my classes: https://jsfiddle.net/kgLc56w4/
我相信 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;
}
Each block moves only in one direction, so instead of doing the grunt work of making 15 animations, I just used simpler 8. I know that this could've been done a lot simpler, but that wasn't the point of the practice.
每个块只向一个方向移动，所以我没有做制作 15 个动画的繁重工作，而是使用更简单的 8 个。我知道这可以做得更简单，但这不是练习的重点。
What I changed though, I used Stephan's syntax on the last 15th element to move it once more and it works.
不过，我所做的更改是，我在最后一个第 15 个元素上使用了 Stephan 的语法再次移动它并且它起作用了。
You just need to be careful of the timings, in Stephen's case, if you increase the duration of the 1st (in) animation, you need to increase the delay of the 2nd (out).
你只需要注意时间，在斯蒂芬的情况下，如果你增加第一个（输入）动画的持续时间，你需要增加第二个（输出）的延迟。
Example:
例子：
-webkit-animation: in 20s 200ms forwards, out 1s 20200ms forwards;
Hopefully this helps!
希望这会有所帮助！
