我正在CSS中设置为opacity: 0;的某些元素上运行动画。动画类被应用到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; }
}

评论

我将发布自己的重复通知:stackoverflow.com/questions/9196694/css3-animation-scale至少我的标题更具指导意义!

CSS3 Animate的可能重复项:动画运行后如何使对象不还原到其初始位置?