CSS3 animation-fill-mode 屬性

時間 2019-12-14

標籤 css3 css animation mode 屬性欄目 CSS 简体版

原文原文鏈接

如今專一於移動端開發項目，對於動畫這個點是很是重要的，每當我遇到一個新的知識點，我就會和你們一塊兒分享html

animation-fill-mode :把物體動畫地從一個地方移動到另外一個地方，並讓它停留在那裏動畫

定義和用法

animation-fill-mode 屬性規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。spa

默認狀況下，CSS 動畫在第一個關鍵幀播放完以前不會影響元素，在最後一個關鍵幀完成後中止影響元素。animation-fill-mode 屬性可重寫該行爲。code

默認值：	none
繼承：	否
可動畫化：	否。
版本：	CSS3
JavaScript 語法：	object.style.animationFillMode="forwards"

特別是對於JS控制這一塊，還能夠將其恢復到最後一個關鍵幀完成後中止影響的狀態htm

<!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>

1. css3 transition屬性
2. css3屬性
3. CSS3 perspective 屬性
4. CSS3 ： transition 屬性
5. CSS3 Transition屬性
6. CSS3 filter屬性
7. CSS3新屬性
8. CSS3 屬性
9. CSS3 perspecitve屬性
10. CSS3 background屬性
更多相關文章...
• WebSecurity 屬性 - CurrentUserName - ASP.NET 教程
• WebSecurity 屬性 - HasUserId - ASP.NET 教程
• JDK13 GA發佈：5大特性解讀
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。