Rumah > hujung hadapan web > html tutorial > CSS3 animation-fill-mode 属性_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:26:31
asal
994 orang telah melayarinya

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

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>
Salin selepas log masuk

 

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan