让css animation 动画停在最后一帧

最新推荐文章于 2025-10-16 17:32:04 发布

转载最新推荐文章于 2025-10-16 17:32:04 发布 · 4.1w 阅读

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍CSS属性animation-fill-mode的作用及用法，详细解释了如何利用该属性定义元素在动画结束后的样式表现，通过实例展示了其具体应用。

部署运行你感兴趣的模型镜像

animation-fill-mode用来定义元素在动画结束后的样子。

animation-fill-mode 的默认值是 none，也就是在动画结束之后不做任何改动


.element
{
    animation: fadein ease-in 2s;
    animation-fill-mode: forwards;
}
 
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}