animation动画结束后css样式怎么保留最后状态

本文来源于 CSS animation动画之animation-fill-mode特性

问题

css属性animation动画可以轻松地给页面带来很炫很酷的效果,但是有时候我们会遇到这个问题,动画结束后css状态会返回到初始状态,那么这并不是我们想要的,我们希望动画结束后css状态达到最后的模样。

解决方案

为了达到这个效果,可以给个css样式:(animation-fill-mode:forwards)。

animation-fill-mode属性介绍

animation-fill-mode : none | forwards | backwards | both;

值                 描述
none               不改变默认行为。
forwards           当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards          在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both               向前和向后填充模式都被应用。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,818评论 0 2
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,899评论 0 4
  • CSS 中的 transform,transition 和 animation 是分开的三部分内容,其中 tran...
    单纯的土豆阅读 743评论 0 4
  • 贫贱夫妻百事哀, 整日忙碌米盐柴。 倘若伸手千金还, 家人幸福笑开怀。
    张旭锋阅读 270评论 0 1