Maison > interface Web > tutoriel HTML > CSS3 animation-fill-mode 属性_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:26:31
original
994 Les gens l'ont consulté

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

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>
Copier après la connexion

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal