CSS动画属性在动画后保留
CSS动画属性在动画后保留
提问于 2012-03-20 01:23:39
我正在尝试让一个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>回答 4
Stack Overflow用户
发布于 2015-02-11 07:07:34
除了@Fabrizio Calderan的answer之外，不得不说您甚至可以将animation-fill-mode属性forwards直接应用于animation。因此，下面的代码也应该有效：
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
}
}
h2 {
opacity: 0;
animation: fadeIn 1s ease-in-out 3s forwards;
}<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>
Stack Overflow用户
发布于 2015-07-31 03:56:52
我也遇到过类似的事情。我添加了position:相对于动画元素，这为我修复了它。
Stack Overflow用户
发布于 2018-07-17 03:40:59
如何为元素设置动画并使其在动画完成时保持不动：
// Beggin#box {
/* Give it a width, a height and a background so can see it */
width: 200px;
height: 200px;
/* Unimportant styling */
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
border-radius: 7px;
background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
/* Starts here: */
opacity: 0;
animation: yourName 2800ms ease-in-out 0s forwards;
}
@keyframes yourName {
0% /* (from) */ {
opacity: 0;
}
100% /* (to) */ {
opacity: 1;
}
}<div id="box"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9774829
复制相关文章
相似问题