在使用CSS关键帧动画时，我发现当我给出一个元素两个动画，如：
.element {
animation: animate1 1000ms linear infinite,animate2 3000ms linear infinite;
}
如果两个动画使用transform属性动画，则最后一个动画通过级联触发。但是如果@keyframes动画是让一个边距或显示或其他一些css属性，而另一个使用变换，那么它们都会触发。
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？或者这是不行的东西吗？这个例子很简单，我知道我可以将动画组合成一个，而不必声明两者，但这是一个更复杂的动画的测试。
谢谢
