在CSS 3动画结束时维护最终状态

Question

在CSS 3动画结束时维护最终状态

我正在对一些设置为opacity: 0;在CSS中。动画类被应用于单击，并且，使用keyframework，它会将不透明的内容更改为0到1(除其他外)。

不幸的是，当动画结束时，元素返回到opacity: 0(无论是Firefox还是Chrome)。我的自然想法是动画元素保持最终状态，凌驾于它们原来的属性之上。这不是真的吗？如果没有，我如何才能让元素做到这一点？

代码(不包括前缀版本)：

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }}

Answer 1

如果要使用更多的动画属性，则速记如下：animation: bubble 2s linear 0.5s 1 normal forwards;对于2s持续时间，线性定时函数，0.5s延迟，1个迭代计数，法线方向，前向填充模式。

Answer 2

如果不使用短手版本：确保animation-fill-mode: forwards是后动画声明否则就无法工作.。animation-fill-mode: forwards;animation-name: appear;animation-duration: 1s;animation-delay: 1s;VSanimation-name: appear;animation-duration: 1s;animation-fill-mode: forwards;animation-delay: 1s;