在没有JS的CSS动画后应用样式

Question

我有一个链接的CSS动画,大多数工作正常:

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

问题是,在第一个animation(product_across)完成后,我想要应用一个样式.没有动画,只需应用它.

CSS3是否允许这样做？我想我正在寻找一种"动画结束"属性或其他东西.

目前我正在围绕它:

@-moz-keyframes product_down {
    from { -moz-transform: rotate(45deg); top: 40%; left: 98%; }
    to { -moz-transform: rotate(45deg); top: 98%; left: 128.5%; }
}

......旋转是我希望应用的风格.通过将from/ tostates 设置为此属性的相同值,它可以有效地完成我想要的操作,但我不禁想到必须有更好的方法.

Answer 1

您确实需要animation-fill-mode:forwards像Fabio建议的那样使用,但这仅适用于动画中设置的属性.为了设置你想要实际动画的属性以外的属性,你必须通过将它们添加到最终来使它们成为动画的一部分,如下所示:

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

例如:

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

通过使两个端关键帧之间的差异非常小,它将跳转到新的样式,无论它animation-duration是什么.

演示

获得此效果的另一种更常见的方法是使用Javascript animation-end

Answer 2

是的,你需要使用动画填充模式.

只需将该样式定义为最后一个关键帧,然后将其添加到#product

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