在没有JS的CSS动画之后套用样式 [英] Apply style after CSS animation without JS

问题描述

我有一个链式CSS动画，大多数情况下都可以正常工作：

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

问题是，在第一个动画之后（ product_across ）已完成，我想应用一种样式。

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

CSS3允许吗？我想我正在寻找某种在动画结束时属性，或其他某种东西。

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

...其中旋转是我希望应用的样式。通过将 from / 至状态设置为该属性的相同值，它可以有效地执行我想要的操作，但是我不禁想到必须有更好的方法。

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

推荐答案

您确实需要使用 animation-如Devin所建议的，fill-mode：forwards ，但这仅适用于动画中设置的属性。为了将属性设置为您不希望对其进行动画处理的属性，您必须将它们添加到动画的末尾，使其成为动画的一部分，如下所示：

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 ...*/ }
}

例如：

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

演示

另一种更常见的方法获得此效果是使用Javascript的 动画结束

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

这篇关于在没有JS的CSS动画之后套用样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！