Utkanos Utkanos - 3 months ago 8x
CSS Question

Apply style after CSS animation without JS

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 (
) 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
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.


You do need to use animation-fill-mode:forwards as Fabio 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 original 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.


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