Queue the same animation at two seperate times, without duplicating code and giving new name?

Problem

I have two animations bounce and squishstretch.

I'd like to have squishstretch animate first, then bounce, then squishstretch again

This doesn't work:

animation-name: squishstretch, bounce, squishstretch;
animation-duration: .15s, .2s, .12s;
animation-delay: 0, .25s, .55s;
animation-iteration-count: 2, 2, 2;

But this does

animation-name: squishstretch, bounce, squishstretch2;
animation-duration: .15s, .2s, .12s;
animation-delay: 0, .25s, .55s;
animation-iteration-count: 2, 2, 2;

But that means I have to copy out all of squishstretch's rules (with the vendor prefixing it's quite a bit) and give the duplicate a new name.

Is there a way to fix it without having to have large chunks of rules duplicated just so animation-name can have unique names?

Demo: http://jsbin.com/ekebun/1/edit

Problem courtesy of: CheapSteaks

Solution

Make it one animation!

@keyframes squishstretchbounce {
0%   { height: 100px; width: 100px; margin-left: 0; bottom:0; }
44%  { height: 94px; width: 104px; margin-left: -2px; bottom: -6px;}
    88%  { height: 100px; width: 100px; margin-left: 0; bottom:0; }
    89%  { bottom: 0; }
    95%  { bottom: 10px; }
    100% { bottom: 0; }
} 

Then use animation: squishstretchbounce 1.4s infinite;. The reason why I have more keyframes than yours compiled is so that it animates back to its default state. Make sure to add the browser prefixes as well. On a side note, I believe the unprefixed keyframes needs to be @keyframes

Solution courtesy of: Zach Saucier

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.