Apply style after CSS animation without JS

Question

I have an attached CSS animation that basically works 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 fact is that after the completion of the first animation ( product_across ) I want to apply a style. Do not animate it, just apply it.

Does CSS3 support this? I’m probably looking for a peculiar property “at the end of the animation” or something like that.

At the moment I will get around it:

 @-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 twist is the style I want 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 but think that there should be a better way.

Answer 1

You need to use animation-fill-mode:forwards , as Fabio suggests, but this only works for properties set in the animation. To set properties other than the ones you want to actually animate, you must make them part of the animation by adding them to the very end as follows:

 @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 ... } } 

eg:

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

Having the difference between the two keyframes of the end as very small, it will move on to new styles no matter what the animation-duration .

Demo

Another, more common way to get this effect is to use Javascript animation-end

Answer 2

Yes, you need to use Animation Fill Mode .

Just define this style as the last keyframe, and then add it to #product

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

Answer 3

In Firefox, a property with !important override the property previously set with @keyframe :

 #product .newStyle { top: 90% !important; left: 120% !important; } 

Unfortunately, this fails for Chrome and Edge.