在CSS3动画结束时保持最终状态

Question

我正在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; }
}

Answer 1

尝试添加animation-fill-mode: forwards;。例如这样：

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;