[css-animations] Can't loop animation with multiple keyframes

[Timmmm]

See this Stackoverflow question.

Currently CSS animations lets you do this:

animation-name: a;
animation-iteration-count: infinite;

which will play a infinitely. Or this:

animation-name: a, b;
animation-iteration-count: 1, 1;

which will play a then b then stop. But there is no way to make it play a then b then loop infinitely. This seems like a pretty common thing to want to do.

As a solution I suggest allowing something like this:

animation-name: a, b;
animation-iteration-count: 1, 1, repeat;

By the way, it's off-topic but the spec disallows this, which actually works - at least in Chrome:

animation-iteration-count: 1, infinite;

[tabatkins]

Do you want it to play a, then loop b indefinitely, or loop a and b both? That is, do you expect to see:

a b b b b b b ...

or

a b a b a b a b ...

?

By the way, it's off-topic but the spec disallows this, which actually works - at least in Chrome:

No, that's totally valid. It says the first animation (a) should play once, and the second animation (b) should loop infinitely.

[Timmmm]

I want a b a b a b a b...

You're right about the spec - I misread it. (# is an unusual syntax for 'one or more'!)

[tabatkins]

I want a b a b a b a b...

In that case, you'll just have to merge the two @keyframes into one. There's no way to make separate animations follow each other like that. (At least, so far - the concept of animation groups should be going into the next level of Web Animations, and from there will likely percolate back into the CSS syntax.)

(# is an unusual syntax for 'one or more'!)

That's why it's linked to its definition. ^_^

[Timmmm]

What? I know that's the only way to do it now! That's why I opened this issue! So the spec can be improved. Is this issue tracker not the place to discuss fixing limitations with the specifications?

[tabatkins]

Ah, your original post was claiming that something could not be achieved at all; I pointed out that it can be.

So am I right that your request now is for some way to write separate @keyframes rules, and run them in series as part of a single animation?

Can you give an example of when you need this?

[birtles]

As Tab points out, the most likely way we'll address this (and a number of related use cases) is through animation groups. We have a bit of work to do stabilizing the current versions of CSS Animations/CSS Transitions/Web Animations before we can start working on those new features in earnest, however. There is some rough spec text for groups in Web Animations but we haven't worked out how that would be expressed in CSS yet.

[hitautodestruct]

Hi there, I'm the OP of the Stackoverflow question.

So, the current spec can't be improved?
To me it doesn't make a lot of sense to have a series of animations and then repeat only the last one.
What was the original intention of the a b b b b b pattern?

[tabatkins]

It doesn't work like that. In the code given (a with an iteration of 1, b with an iteration of infinite), the iterations look like a+b b b b b b .... That is, a and b play at the same time at first, but a stop when it's done, while b continues repeating.

Again, hooking up keyframes to go in series isn't something that can be done right now (except thru minor hacks, like setting the animation-delay on one to equal the duration of another).