CSS Animation 属性在动画之后保留

我试图得到一个 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>
115801 次浏览
小开
最佳答案

我想你要找的是 animation-fill-mode CSS3房产

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

动画填充模式 CSS 属性指定 CSS 动画在执行之前和之后应该如何将样式应用于目标。

for your purpose just try to set

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

设置 前进值“目标将保留执行过程中遇到的最后一个关键帧设置的计算值”

小开

除了 @ Fabrizio Calderan的 回答之外，必须说明的是，您甚至可以将 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>

小开

我也经历过类似的事情。我添加了位置: 相对于元素的动画和为我固定它。

小开

如何动画一个元素，并让它停留在动画完成:

// 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>

小开

如果我理解你的问题，你希望动画保持在最终状态。 我会使用填充模式

animation-fill-mode: forwards;

提交答案