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

回答1:

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.

Demo

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

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

回答3:

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.

来源：https://stackoverflow.com/questions/25794276/apply-style-after-css-animation-without-js

标签

css

css3

animation

css-animations