CSS chain animations with infinite loop

Question

Is it possible to connect two animations, and then the loop of this chain is infinite? {|--ani1--|--ani1--|--ani1--|--ani2--|--ani2--|} x loop

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

here: http://jsfiddle.net/kQA6D/

Answer 1

In short, no (some work options are possible)

What your line does animation-count: infinte at the moment for an element: animation: ani1 3s 0s infinite, ani2 3s 9s infinite; . So, since the first declared animation has an infinite iteration counter, the second will never be reached

The easiest and most common way is to use javascript and animationEnd for this (I use the Craig Buckler PrefixedEvent function , but this is not required)

 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 only - add other prefixes)

Otherwise, for a clean CSS fix for now, you have to combine them as one animation. For you it will look like

 @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 only - add other prefixes)

Answer 2

No, you will need to declare everything in one animation using certain steps, for example:

 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 (uses the -webkit- prefix to view in Chrome)

Alternatively, you can declare the animation separately with a built-in break so that the two animations do not overlap, for example:

 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 (uses the -webkit- prefix to view in Chrome)