css3 firefox无法使用多个动画

时间:2017-03-21 05:29:53

标签: html css3 css-animations css-transforms

我有一个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>
&#13;
&#13;
&#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;

1 个答案:

答案 0 :(得分:1)

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

请注意,本案例中的属性为transformskew / rotate为属性值。

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

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

&#13;
&#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;
&#13;
&#13;