无限循环链式CSS动画

链接两个动画，然后无限循环这条链可能吗？ {|--ani1--|--ani1--|--ani1--|--ani2--|--ani2--|} x loop无限循环链式CSS动画

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

这里测试：http://jsfiddle.net/kQA6D/

来源

2013-12-16 Qwerty

总之，没有（一些解决方法是可能的）

你的线animation-count: infinte目前正在做的是这个元素：animation: ani1 3s 0s infinite, ani2 3s 9s infinite;。所以，既然声明的第一个动画有infinite的迭代次数，第二个将永远不会达到

最简单，最传统的方法是使用JavaScript和animationEnd这样做（我用克雷格圆盾的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的唯一的 - 需要其他前缀添加）

来源

2013-12-16 22:34:17

纯粹的CSS修复的语法乍一看令人困惑，但比我的解决方案更加优雅和简洁。荣誉。 – shshaw

我确实希望它是纯CSS，但问题是 1）我将不得不重新计算百分比，2）计时功能。我想我留下了JavaScript。 – Qwerty

不，你需要与你想要的具体步骤，宣布这一切在一个动画，像这样：

div { 
    width: 50px; 
    height: 50px; 
    border: 3px solid black; 
    animation: ani1 3s 0s infinite; 
} 
@keyframes ani1 { 
    0 { background: green; } 
    10% { background: red; } 
    20% { background: green; } 
    30% { background: red; } 
    40% { background: green; } 
    50% { background: red; } 
    60% { background: green; width: 50px; } 
    70% { width: 100px; } 
    80% { width: 150px; } 
    90% { width: 100px; } 
    100% { width: 150px; } 
}

Demo（使用-webkit-前缀可在Chrome中查看）

或者，您可以声明y我们有一个内置的间隙分开的动画，使得两个动画不重叠，就像这样：

div { 
    width: 100px; 
    height: 50px; 
    border: 3px solid black; 
    animation: ani1 12s 0s infinite, ani2 12s 0s infinite; 
} 
@keyframes ani1 { 
    0%, 60%, 100% { background: white; } 
    20%, 40% { background: green; } 
    10%, 30%, 50% { background: red; } 
} 

@keyframes ani2 { 
    60%, 80%, 100% { width: 100px; } 
    70%, 90% { width: 150px; } 
}

Demo（使用-webkit-前缀可查看在Chrome）

来源

2013-12-16 22:33:06 shshaw

@ZachSaucier建立在动画的差距。在你的例子中，你把它全部放在一个动画中，第二个动画从50％开始。我的方法只是以60％开始第二个动画，第一个动画完成60％，将它们保留为单独的关键帧，但阻止它们重叠。 – shshaw

@ZachSaucier下面是一个简单的例子，使用像你这样的短语法：http://jsfiddle.net/shshaw/FLTbk/ – shshaw

啊，我明白了！愚蠢的我错过了这个 –

无限循环链式CSS动画

回答

相关问题