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

问题描述

这是我想要达到的效果...

我想要获得一个CSS动画属性， / p>

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

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

这是保存的代码...

 < h2>测试< / 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> 
  

解决方案

我想你正在寻找 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：forward; 
} 
  

设置转发由执行期间遇到的最后一个关键帧设置的计算值»

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>

解决方案

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»

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