是否可以链接两个动画然后无限循环这个链？
{| –ani1– | –ani1– | –ani1– | –ani2– | –ani2– |} x循环 @H_502_3@div { width: 50px; height: 50px; border: 3px solid black; animation: ani1 3s 0s 3,ani2 3s 9s 2; /*animation-iteration-count: infinite;*/ } @keyframes ani1 { from { background: green; } 50% { background: red; } to { background: green; } } @keyframes ani2 { from { width: 100px; } 50% { width: 150px; } to { width: 100px; } }
{| –ani1– | –ani1– | –ani1– | –ani2– | –ani2– |} x循环 @H_502_3@div { width: 50px; height: 50px; border: 3px solid black; animation: ani1 3s 0s 3,ani2 3s 9s 2; /*animation-iteration-count: infinite;*/ } @keyframes ani1 { from { background: green; } 50% { background: red; } to { background: green; } } @keyframes ani2 { from { width: 100px; } 50% { width: 150px; } to { width: 100px; } }
解决方法
简而言之,没有(一些可以解决的问题)
你的行动画计数：infinte当前正在做的是元素：动画：ani1 3s 0s无限,ani2 3s 9s无限;因此,由于声明的第一个动画的迭代次数为无限,因此永远不会达到第二个动画
最简单和最传统的方式是使用javascript和animationEnd这样做(我使用Craig Buckler的PrefixedEvent function,但没有必要)
@H_502_3@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修复,您必须将它们组合为一个动画.对于你看起来像
@H_502_3@@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 – 需要添加其他前缀)
