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

问题是，在第一个动画（product_across）完成后，我想要应用一个样式。没有动画，只需应用它。

CSS3是否允许这样做？我想我正在寻找一种关于动画结束的＆＃34;＆＃34;财产等等。

目前我正在使用：

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

...旋转是我希望应用的样式。通过将from / to状态设置为此属性的相同值，它可以有效地执行我想要的操作，但我无法帮助您认为必须有更好的方法。

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是什么，都会跳转到新的样式。

Demo

另一种更常见的方法是使用Javascript的animation-end

Answer 2

是的，您需要使用Animation Fill Mode。

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

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

Answer 3

在Firefox上，!important的媒体资源会覆盖先前使用@keyframe设置的媒体资源：

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

不幸的是，这在Chrome和Edge上失败了。

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

3 个答案: