📌  相关文章
📜  如何使用 CSS 暂停/播放动画?

📅  最后修改于: 2021-09-01 02:16:58             🧑  作者: Mango

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
  


HTML


  

    

  

    

        Hover over the GeeksforGeeks          to stop the animation.     

       
GeeksforGeeks
  


输出:

悬停时播放动画

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

HTML



  

    

  

    

        Hover over the GeeksforGeeks          to stop the animation.     

       
GeeksforGeeks
  

输出:

悬停时暂停动画