如何保留动画后的样式？

我正在从事一个投资组合，以显示我何时申请我的下一项研究。由于我们生活在2012年，它有大量的花式动画和CSS3垃圾，只是为了给他们'我们需要这个人'的感觉。目前我遇到了一些小问题。如何保留动画后的样式？

这是一个特定元素的一小部分：

/* This is the CSS of the elements with the id called 'fadein' */ 
#fadein { 
    -moz-animation-duration: 2s; 
    -moz-animation-name: item; 
    -moz-animation-delay: 4.5s; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-name: item; 
-webkit-animation-delay: 4.5s; 
opacity:0; 
-webkit-opacity:0; 
} 

@-webkit-keyframes item { 
from { 
-webkit-opacity: 0; 
    } 
to { 
-webkit-opacity: 1; 
} 
}

请注意，我离开了Firefox的关键帧，因为它们是完全一样的。正确的，丑陋的格式的CSS，使元素与ID“淡入淡出”......淡入

问题是，动画完成后，元素再次消失。这会将难看格式的Css变为不可用的Css。

有没有人有任何想法如何保持动画后改变的风格？

我想这个问题之前已经被问过了，如果是这样，我很抱歉。

来源

2012-02-03 amees_me

尝试：

#fadein { 
    -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */ 
    -moz-animation-fill-mode: forwards; /* FF 5+ */ 
    -o-animation-fill-mode: forwards;  /* Not implemented yet */ 
    -ms-animation-fill-mode: forwards;  /* IE 10+ */ 
    animation-fill-mode: forwards;   /* When the spec is finished */ 
}

来源

2012-02-03 15:30:35 Duopixel

非常感谢！现在工作顺利。为了实现跨浏览器兼容性，我可以将'webkit'部分更改为'moz'吗？ – 2012-02-04 16:19:58

是的，支持的浏览器更新了答案。 – Duopixel 2012-02-04 17:59:35

令人惊叹！做得很好：）。 – 2012-02-04 18:31:19

Duopixels的答案是正确的方式，但不是完全的跨浏览器，但是，这个jQuery插件使动画回调，你可以风格你在回调函数是怎么样的元素： https://github.com/krazyjakee/jQuery-Keyframes

来源

2012-07-15 17:52:54

如何保留动画后的样式？

回答

相关问题