我有一个 FF v52。
MDN says, you can do multiple animations in FF
，但是，无论我尝试什么，都无法让它发挥作用。应用时仅使用最后提到的动画名称:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'>
<style type='text/css'>
@-moz-keyframes skew0 {
0% {
transform: skew(0deg, 0deg);
}
25% {
transform: skew(90deg, 90deg);
}
50% {
transform: skew(180deg, 180deg);
}
75% {
transform: skew(270deg, 270deg);
}
100% {
transform: skew(360deg, 360deg);
}
}
@-moz-keyframes rotate0 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
div {
border: 4px solid black;
height: 100px;
width: 100px;
animation-name: skew0, rotate0;
animation-duration: 12s, 6s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>我也尝试过使用速记版本。
P.S.:从文档中摘录，我给出了一个关于展示如何对一个属性执行多个动画的链接:
设置多个动画属性值
CSS 动画普通值可以接受多个值，以逗号分隔 — 当您想要在单个规则中应用多个动画，并为不同的动画设置单独的持续时间、迭代次数等时，可以使用此功能。让我们看一些简单的例子来解释不同的排列:
在第一个示例中，我们设置了三个动画名称，但只有一个持续时间和迭代次数。在这种情况下，所有三个动画都具有相同的持续时间和迭代次数:
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
在第二个示例中，我们在所有三个属性上设置了三个值。在这种情况下，每个动画都在每个属性的相同位置运行相应的值，例如，fadeInOut 的持续时间为 2.5 秒，迭代次数为 2，等等。
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
最佳答案
您不能使用 2 个不同的动画为同一个属性设置动画，但在这种情况下，您可以将它们的值合并为一个。
请注意，本例中的属性是transform，skew/rotate 是属性值。
已更新，使用多个动画，只要它们为不同的属性设置动画，它就会按照文档中的描述工作。
注意，为了演示目的，我添加了一个无前缀的@keyframes
div {
border: 4px solid black;
height: 100px;
width: 100px;
animation-name: skewrotate, colorme;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@-moz-keyframes skewrotate {
0% {
transform: skew(0deg, 0deg) rotate(0deg);
}
25% {
transform: skew(90deg, 90deg) rotate(90deg);
}
50% {
transform: skew(180deg, 180deg) rotate(180deg);
}
75% {
transform: skew(270deg, 270deg) rotate(270deg);
}
100% {
transform: skew(360deg, 360deg) rotate(360deg);
}
}
@keyframes skewrotate {
0% {
transform: skew(0deg, 0deg) rotate(0deg);
}
25% {
transform: skew(90deg, 90deg) rotate(90deg);
}
50% {
transform: skew(180deg, 180deg) rotate(180deg);
}
75% {
transform: skew(270deg, 270deg) rotate(270deg);
}
100% {
transform: skew(360deg, 360deg) rotate(360deg);
}
}
@-moz-keyframes colorme {
0% {
background-color: transparent;
}
50% {
background-color: red;
}
100% {
background-color: transparent;
}
}
@keyframes colorme {
0% {
background-color: transparent;
}
50% {
background-color: red;
}
100% {
background-color: transparent;
}
}<div>
</div>关于html - css3 firefox 无法让多个动画工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42919061/