HTML | DOM 样式 animationPlayState 属性

HTML DOM Style animationPlayState属性用于指定动画是运行还是暂停。

句法 ：

animation-play-state: running|paused|initial|inherit;

属性值：

• 运行：此值用于运行/播放动画。
• paused：此值用于暂停动画。
• 初始值：此值将animation-play-state属性设置为父元素的值。
• 继承：此值用于设置 .动画播放状态属性为默认值（运行）。

示例：动画播放状态：运行

  

    
    

  

    

    
Geeks For Geeks
  

  

输出 ：

示例：动画播放状态：暂停

  

    
        HTML | DOM Style animationPlayState Property
    
    
        div {
            height: 100px;
            width: 150px;
            font-size: 100px;
            -webkit-animation: movement 3s infinite;
            -webkit-animation-play-state: paused;
            animation: movement 3s infinite;
            color: darkgreen;
            position: relative;
            
            <!-- property value "paused" -->
            animation-play-state: paused;
        }
          
        @-webkit-keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
          
        @keyframes movement {
            from {
                left: 50px;
            }
            to {
                left: 400px;
            }
        }
    

  

    
      Click to make the object move
    
  
    
        function Play() {
            document.getElementById("block"
               ).style.WebkitAnimationPlayState = "running";
            
            document.getElementById("block"
               ).style.animationPlayState = "running";
        }
    
    
  
    Geeks For Geeks
  

  

输出 ：

示例：动画播放状态：继承

  

    
    

  

    

    

        Gfg
        
 I'm inherited
    
  

  

输出：

示例：动画播放状态：初始

  

    
    

  

    

    
Geeks For Geeks
  

  

输出 ：

支持的浏览器： animation-play-state属性支持的浏览器如下：

• 铬：43.0（4.0 webkit）
• 火狐：16.0
• Safari：4.0 webkit
• 边缘：10.0
• 歌剧：30.0（15.0 Webkit）