Apply style after CSS animation without JS

Question

I have a chained CSS animation that's mostly working fine:

#product {
    background: red;
    width: 10%;
    height: 10%;
    border: none;
    left: -22%;
    top: 50%;
    top: 40%;
    animation: product_across 2s linear, product_down 1s;
    animation-delay: 0s, 2s;
}
@-moz-keyframes product_across {
    from { left: -22%; }
    to { left: 98%; }
}
@-moz-keyframes product_down {
    from { top: 40%; left: 98%; }
    to { top: 98%; left: 128.5%; }
}

The thing is, after the first animation (product_across) has finished, I want to apply a style. Not animate to it, just apply it.

Does CSS3 allow for this? I guess I'm looking for a sort of "on animation end" property, or something.

For the moment I'm getting round it with:

@-moz-keyframes product_down {
    from { -moz-transform: rotate(45deg); top: 40%; left: 98%; }
    to { -moz-transform: rotate(45deg); top: 98%; left: 128.5%; }
}

...where the rotation is the style I wish to apply. By setting the from/to states to the same value for this property, it effectively does what I want, but I can't help thinking there must be a better way.

Solution 1

You do need to use animation-fill-mode:forwards as Devin suggests, but this only works for properties set in the animation. In order to set properties other than the ones you want actually animated, you must make them part of the animation by adding them to the very end like so:

@keyframes  {
  /* ... Your original keyframes (except the last) ... */
  99.99% { /* ... The properties of something you want to change ... */ }
  100% { /*... Your original end properties and the changed properties ...*/ }
}

for example:

@keyframes rotate {
    0% { transform:rotate(0deg); }
    99.999% { background:blue; }
    100% { transform:rotate(360deg); background:red; }
}

By having the difference between the two end keyframes as really small, it will jump to the new styles no matter what the animation-duration is.

Demo

The other, more common, way to get this effect is to use Javascript's animation-end

Solution 2

yes, you need to use Animation Fill Mode.

Simply define that style as the last keyframe and then you add this to #product

#product{-webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;}