CSS动画属性停留在动画之后(CSS Animation property stays after animating)

CSS动画属性停留在动画之后(CSS Animation property stays after animating)

我试图获得一个CSS动画属性留下来完成，这是可能吗？

这正是我想要实现的

当用户登陆页面时，该元素应该被隐藏，3秒钟之后（或任何），它应该渐隐，一旦动画完成，它应该停留在那里。

这是一个小提琴尝试... http://jsfiddle.net/GZx6F/

以下是保存代码

<h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style>

我知道如何用jQuery这样做...这将是这样的...

<h2>test</h2> <script> $(document).ready(function(){ $('h2').hide().delay(3000).fadeIn(3000) }); </script>

I'm trying to get a CSS animation property to stay after completing, is this possible?

This is what I'm trying to achieve...

The element should be hidden when the user lands on the page, after 3 seconds (or whatever), it should fade in and once the animation has completed it should stay there.

Here is a fiddle attempt... http://jsfiddle.net/GZx6F/

Here is the code for preservation...

<h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style>

I know how to do this with jQuery.. it would be like this...

<h2>test</h2> <script> $(document).ready(function(){ $('h2').hide().delay(3000).fadeIn(3000) }); </script>

最满意答案

我想你正在寻找animation-fill-mode CSS3属性

https://developer.mozilla.org/en/CSS/animation-fill-mode

animation-fill-mode CSS属性指定CSS动画如何在其执行前后的样式应用样式。

为了你的目的只是设法

h2 { animation: fadeIn 1s ease-in-out 3s; animation-fill-mode: forwards; }

设置转发值«目标将保留由执行期间遇到的最后一个关键帧设置的计算值»

I think you're looking for animation-fill-mode CSS3 property

https://developer.mozilla.org/en/CSS/animation-fill-mode

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

for your purpose just try to set

h2 { animation: fadeIn 1s ease-in-out 3s; animation-fill-mode: forwards; }

Setting forwards value «the target will retain the computed values set by the last keyframe encountered during execution»