Question

我有一个FF v52 MDN says, you can do multiple animations in FF
但是，无论我尝试什么，都无法让它发挥作用。应用时，仅使用最后提到的动画名称：

＆＃13;

<!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>

＆＃13;

我也试过用速记版本来做。

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;

Answer 1

您无法使用2种不同的动画为同一属性设置动画，但在这种情况下，您可以将其值合并为一种。

请注意，本案例中的属性为transform，skew / rotate为属性值。

使用多个动画进行了更新，只要它们为不同的属性设置动画，就可以按照文档中的描述进行操作。

注意，我为演示目的添加了一个没有前缀的@keyframes

＆＃13;

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;
	}
}

＆＃13;

<div>
</div>

＆＃13;

css3 firefox无法使用多个动画

P.S。：摘自文档，我给出了关于如何对一个属性进行多个动画的链接：

1 个答案: