动画后CSS动画属性保持不变

我试图让CSS动画属性在完成后保留,这可能吗?

这就是我想要实现的目标…

当用户登陆页面时,该元素应该被隐藏,在3秒钟(或任何其他时间)之后,该元素应淡入,动画完成后应留在该页面上。

这是一个小提琴尝试…

这是保存代码…

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

回答:

我认为您正在寻找animation-fill-modeCSS3属性

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

为了您的目的,只是尝试设置

h2 {

animation: fadeIn 1s ease-in-out 3s;

animation-fill-mode: forwards;

}

设置 转发 值«目标将保留执行期间遇到的最后一个关键帧设置的计算值»

以上是 动画后CSS动画属性保持不变 的全部内容, 来源链接: utcz.com/qa/413679.html

回到顶部