星空网 > 软件开发 > 网页设计

CSS3 animation

现在专注于移动端开发项目,对于动画这个点是非常重要的,每当我遇到一个新的知识点,我就会和大家一起分享

animation-fill-mode :把物体动画地从一个地方移动到另一个地方,并让它停留在那里

定义和用法

animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

默认值:none
继承:
可动画化:否。
版本:CSS3
JavaScript 语法:object.style.animationFillMode="forwards"

特别是对于JS控制这一块,还可以将其恢复到最后一个关键帧完成后停止影响的状态

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    div{      width: 100px;      height: 100px;      background: red;      position: relative;      animation:move 2s linear;    }    @keyframes move {      from{        left:0;}      to{        left:100px;      }    }  </style></head><body>   <div id="div"></div>   <button>试一试</button>   <script>     window.onload = function(){       var div = document.getElementById("div")       var btn = document.getElementsByTagName("button")[0]       btn.onclick = function(){         div.style.animationFillMode = "forwards"       }             //把动画状态恢复到最后一帧的状态     }   </script></body></html>

 




原标题:CSS3 animation

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

挂号小包:https://www.goluckyvip.com/tag/31930.html
关键词查询工具:https://www.goluckyvip.com/tag/31932.html
关键词分析工具:https://www.goluckyvip.com/tag/31933.html
关键词广告投放:https://www.goluckyvip.com/tag/31934.html
关键词竞价排名:https://www.goluckyvip.com/tag/31935.html
关键词扩展工具:https://www.goluckyvip.com/tag/31936.html
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
5月贾汪好玩的地方 贾汪哪有好玩的地方:https://www.vstour.cn/a/363179.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流