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.

Zach Saucier · Accepted Answer · 2020-01-22 13:27:50Z

14

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

edited Jan 22, 2020 at 13:27

answered Sep 11, 2014 at 20:19

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Devin · Accepted Answer · 2014-09-11 18:13:32Z

10

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;}

answered Sep 11, 2014 at 18:13

Devin

7,7306 gold badges43 silver badges56 bronze badges

Comments

AxeEffect · Accepted Answer · 2016-07-15 20:19:58Z

0

On Firefox a property with !important will override the property previously set with a @keyframe:

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

Unfortunately this fails on Chrome and Edge.

answered Jul 15, 2016 at 20:19

AxeEffect

7,7305 gold badges39 silver badges34 bronze badges

Collectives™ on Stack Overflow

Apply style after CSS animation without JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related