📜  如何在 CSS 中使用动画延迟?

📅  最后修改于: 2021-10-31 05:27:06             🧑  作者: Mango

在本文中,我们将看到如何在 CSS 中使用 animation-delay 属性。 animation-delay 属性用于设置网页上的动画。

  • animation-delay 属性告诉我们动画开始的延迟。
  • 动画延迟值以毫秒 (ms) 或秒 (s) 为单位定义。
  • 其默认值为 0 秒。
  • 该属性对于使网页具有吸引力非常有用

CSS 语法:

animation-delay: time |initial |inherit;

属性值:

  • 时间:该值是可选的。它用于定义动画开始之前要等待的秒数 (s) 或毫秒数 (ms),即动画将延迟的时间量。默认值为 0。允许使用负值。如果使用负值,动画将开始播放,就好像它已经播放了 N 秒/毫秒。
  • 初始值:此值用于将属性设置为其默认值。
  • 继承:此值用于从其父元素继承属性。

下面的例子说明了动画延迟属性在 CSS 中的使用。

示例1:在本示例中,我们使用animation 属性添加动画效果,并使用animation-delay 属性添加动画中的时间延迟。

HTML


  

    

  

    

        How to use animation-delay in CSS?     

       

Animation will start after 2 sec.

       

GeeksforGeeks

  


HTML


  

    

  

    

        How to use animation-delay in CSS?     

       

Animation will start after 2 sec.

       

Geeks For Geeks

  


输出:

示例2:在本示例中,我们使用animation-name 属性添加动画效果,并使用animation-delay 属性添加动画中的时间延迟。我们还使用了 animation-iteration-count 属性来添加动画迭代。

HTML



  

    

  

    

        How to use animation-delay in CSS?     

       

Animation will start after 2 sec.

       

Geeks For Geeks

  

输出: