在CSS3动画结束时保持最终状态
我在一些设置为opacity: 0;元素上运行动画opacity: 0; 在CSS中。 动画类应用onClick，并使用关键帧将不透明度从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; }
}
尝试添加animation-fill-mode: forwards; 。 例如像这样：
animation: bubble 1.0s forwards;
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
如果您使用更多的动画属性，简写为：
animation: bubble 2s linear 0.5s 1 normal forwards;
持续2s持续时间，线性定时功能，0.5秒延迟，1次迭代计数，法线方向，正向填充模式
链接地址: http://www.djcxy.com/p/70459.html