如何使用 CSS 暂停/播放动画？

CSS有助于在不使用 JavaScript 的情况下为 HTML 元素设置动画。您可以使用 CSS 的animation-play-state属性播放和暂停应用于 HTML 元素的动画。

animation-play-state属性有 2 个值：

• paused – 暂停正在进行的动画。
• running – 启动暂停的动画（默认值）。

按着这些次序 ：

• 创建 HTML 文件
• 创建 CSS 文件：
  1. 指定
     标签的位置属性。
  2. 使用animation属性来提及要赋予
     标签的动画。
  3. 使用animation-play-state属性来播放/暂停动画。
  4. 提及关键帧属性“ from”和“ to”以提及动画的开始和结束。

示例 1：播放动画的 HTML 和 CSS 代码。

HTML

  

    

  

    

        Hover over the GeeksforGeeks 
        to run the animation.
    
  
    
GeeksforGeeks

  

输出：

悬停时播放动画

示例 2：用于暂停动画的 HTML 和 CSS 代码。

HTML

  

    

  

    

        Hover over the GeeksforGeeks 
        to stop the animation.
    
  
    
GeeksforGeeks

  

输出：

悬停时暂停动画