css动画无限循环转圈,css3 – 具有无限循环的链CSS动画

简而言之,没有(一些可以解决的问题)

你的行动画计数：infinte当前正在做的是元素：动画：ani1 3s 0s无限,ani2 3s 9s无限;因此,由于声明的第一个动画的迭代次数为无限,因此永远不会达到第二个动画

最简单和最传统的方式是使用javascript和animationEnd这样做(我使用Craig Buckler的PrefixedEvent function,但没有必要)

var elem = document.querySelectorAll("div")[0],pfx = ["webkit","moz","MS","o",""];

function PrefixedEvent(element,type,callback) {

for (var p = 0; p < pfx.length; p++) {

if (!pfx[p]) type = type.toLowerCase();

element.addEventListener(pfx[p]+type,callback,false);

}

}

PrefixedEvent(elem,"animationend",function() { switchAnims(elem) });

function switchAnims(element) {

if(element.style.animationName = "ani1") {

element.style.animationName = "ani2";

} else {

element.style.animationName = "ani1";

}

}

(仅限webkit – 需要添加其他前缀)

否则,对于纯CSS修复,您必须将它们组合为一个动画.对于你看起来像

@keyframes aniBoth {

0%,16.666%,33.333% { background: green; }

8.333%,24.999%,41.666% { background: red; }

50% { background: green; }

50.001% { background:white; width: 100px; }

75%,100% { width: 100px; }

62.5%,87.5% { width: 150px; }

}

(仅限webkit – 需要添加其他前缀)