HTML | DOM 样式动画属性

style动画属性可以为从一种 CSS 样式到另一种 CSS 样式的过渡设置动画。它配置动画序列应该如何进行的时间、延迟、持续时间和其他细节。动画包含两个组件，一个是描述组件的 CSS，另一个是一组指示样式开始和结束状态的关键帧。
句法：

• 用于返回动画属性

object.style.animation

• 用于设置动画属性

object.style.animation="name duration timingFunction delay
iterationCount direction fillMode playState"

属性值

• animationName：描述附加到选择器的关键帧的名称。
• animationDuration：描述动画发生的时间。
• animationTimingFunction：描述动画的速度。
• animationDelay：描述动画开始前的延迟。
• animationIterationCount：描述动画发生的次数。
• animationDirection：描述动画是否应该在交替循环中反向播放。
• animationFillMode：描述动画结束时应用的值。
• animationPlayState：描述动画是正在运行还是暂停。

示例 1：

html

    
        
            #GFG {
                width: 90px;
                height: 90px;
                background: green;
                color: white;
                position: relative;
                text-align: center;
                 
                /* -webkit- is used for safari browser */
                -webkit-animation: GFG_Move_1 1s infinite;
                 
                animation: GFG_Move_1 1s infinite;
            }
             
            /* For Opera, Chrome and Safari browser */
            @-webkit-keyframes GFG_Move_1 {
                from {left: 250px;}
                to {left: 500px;}
            }
             
            /* For Opera, Chrome and Safari browser */
            @-webkit-keyframes GFG_Move_2 {
                from {left: 350px;top: 0px;}
                to {left: 350px;top: 200px;}
            }
             
            @keyframes GFG_Move_1 {
                from {left: 250px;}
                to {left: 500px;}
            }
             
            @keyframes GFG_Move_2 {
                from {left: 350px;top: 0px;}
                to {left: 350px;top: 200px;}
            }
        
    
     
    
        
            Change Animation
        
         
         

            Click on button to change the animation.
        
 
         
        
            function myGeeks() {
                 
                /* This code run on safari browser */
                document.getElementById("GFG").style.WebkitAnimation
                        = "GFG_Move_2 4s 2";
                         
                document.getElementById("GFG").style.animation
                        = "GFG_Move_2 4s 2";
            }
        
         
        GFG
    

输出：

• 点击按钮前： div水平移动

• 点击按钮后： div垂直移动

示例 2：

html

    
        
            HTML DOM Style animation Property
        
         
        
            #GFG {
                width: 90px;
                height: 90px;
                background: green;
                position: relative;
                color: white;
                text-align: center;
                 
                /* /* For Opera, Chrome, Safari*/ */
                -webkit-animation: GFG_Move_1 1s infinite;
                 
                animation: GFG_Move_1 1s infinite;
            }
             
            /* For Opera, Chrome, Safari*/
            @-webkit-keyframes GFG_Move_1 {
                from {
                    left: 0px;
                }
                to {
                    left: 90px;
                }
            }
             
            /* For Opera, Chrome, Safari */
            @-webkit-keyframes GFG_Move_2 {
                from {
                    top: 0px;
                    background: green;
                    width: 100px;
                }
                to {
                    top: 200px;
                    background: yellow;
                    width: 150px;
                    height: 150px;
                }
            }
             
            @keyframes GFG_Move_1 {
                from {
                    left: 0px;
                }
                to {
                    left: 95px;
                }
            }
             
            @keyframes GFG_Move_2 {
                from {
                    top: 0px;
                    background: green;
                    width: 100px;
                }
                to {
                    top: 200px;
                    background: yellow;
                    width: 150px;
                    height: 150px;
                }
            }
        
    
     
    
         
        
            Change Animation
        
         
         

            Click on button to change the animation.
        
 
        
            function myGeeks() {
                 
                /* For Opera, Chrome, Safari */
                document.getElementById("GFG").style.WebkitAnimation
                        = "GFG_Move_2 4s 2"
                document.getElementById("GFG").style.animation
                        = "GFG_Move_2 4s 2";
            }
        
         
        GFG
    
                   

• 点击按钮前：

• 点击按钮后：

支持的浏览器：样式动画属性支持的浏览器如下：

• 谷歌浏览器 43.0, 4.0 -webkit-
• 浏览器 10.0
• Mozilla Firefox 16.0、5.0 -moz-
• 歌剧 30.0, 15.0 -webkit-, 12.1, 12.0 -o-
• Safari 9.0, 4.0 -webkit-