Heim > Web-Frontend > HTML-Tutorial > CSS3 animation-fill-mode 属性_html/css_WEB-ITnose

CSS3 animation-fill-mode 属性_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:26:31
Original
984 Leute haben es durchsucht

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

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

定义和用法

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

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

默认值: 继承: 可动画化: 版本: JavaScript 语法:
none
否。
CSS3
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>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage