使用transform属性的多个CSS关键帧动画不起作用
在使用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的解决方案？或者这是不起作用的东西？这个示例非常简单，我知道我可以将动画组合成一个动画，而不必同时声明两个动画，但这是对我正在处理的更复杂动画的测试。
谢谢
回答 3
Stack Overflow用户
发布于 2013-01-20 01:34:55
您不能对同一属性(此处为变换属性)设置多次动画，在同一元素上，最后一个属性将覆盖其他属性，
您应该将目标元素放入div中，并在div上应用一个转换动画，在目标元素上应用其他转换动画...
.div_class
{
animation:animate1 1000ms linear infinite;
}
.element
{
animation:animate2 3000ms linear infinite;
}Stack Overflow用户
发布于 2013-01-18 02:56:50
出于同样的原因，
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%关键帧-它们将自动生成-请参阅。
然后你就可以使用
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)，您将得到不同的结果。
Stack Overflow用户
发布于 2015-05-21 09:14:07
@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个元素上使用了斯蒂芬的语法，再次移动它，它起作用了。
你只需要小心计时，在Stephen的例子中，如果你增加了第一个( in )动画的持续时间，你需要增加第二个(out)动画的延迟。
示例：
-webkit-animation: in 20s 200ms forwards, out 1s 20200ms forwards;希望这能有所帮助！
https://stackoverflow.com/questions/14384494
复制相似问题