CSS动画属性保留在动画之后 [英] CSS Animation property stays after animating

问题描述

我想要获得一个CSS动画属性，以完成后，这是可能吗？

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

这是我想要实现...

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

元素应该在用户到达页面时被隐藏，3秒钟（或任何）后，它应该淡入，一旦动画完成，它应该保持在那里。

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.

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

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>

我知道如何用jQuery做这件事，它会是这样...

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属性

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

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

animation-fill-mode CSS属性指定CSS动画如何在执行之前和之后将样式应用于其目标。

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»

这篇关于CSS动画属性保留在动画之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！