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

前言

让我们假设一个div从动画opacity:0;到opacity:1;,我想保留opacity:1;动画结束之后.

这是什么animation-fill-mode:forwards;.

@keyframes myAnimation {
    from { opacity:0; }
    to { opacity:1; }
}
div {
    opacity:0;
    animation-name:myAnimation;
    animation-delay:1s;
    animation-duration:2s;
    animation-fill-mode:forwards;
}?
<div>just a test</div>?

在jsFiddle上运行它

• 注1:我在这里没有包含供应商前缀以简化
• 注2:这只是一个例子,请不要回复"只使用jQuery fadeIn函数"等.

有些事要知道

在这个答案中,我读到animation-fill-modeChrome 16+,Safari 4 +,Firefox 5+支持.

但Chrome 1+和Opera也支持animation单独使用.因此,即使不支持,使用Modernizr进行的一般测试也可能会返回正值.fill-mode

目标animation-fill-mode我在Modernizr上添加了一个新的测试:

Modernizr.addTest('animation-fill-mode',function(){
    return Modernizr.testAllProps('animationFillMode');
});

现在我有一个.no-animation-fill-modeCSS和Modernizr.animationFillModeJavaScript 的课程.

我还从CSS3动画规格中读到:

文档样式表中指定的动画将从文档加载开始

最后,问题

是否可以在动画结束的确切秒数内运行简单的jQuery函数

$(document).ready(function(){ …