当前位置: 首页>>代码示例>>用法及示例精选>>正文


CSS animation-delay用法及代码示例

CSS中的animation-delay属性用于指定动画开始的延迟。 animation-delay值以秒(s)或毫秒(ms)定义。

用法:

animation-delay:time|initial|inherit;

属性值:


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

例:用于说明CSS animation-delay属性的HTML程序。

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
             CSS | animation-delay Property 
        </title> 
        <style>  
            .geeks {  
                font-size:40px;  
                text-align:center;  
                font-weight:bold;  
                color:#090;  
                padding-bottom:5px;  
                font-family:Times New Roman;  
            }  
              
            .geeks1 {  
                font-size:17px;  
                font-weight:bold;  
                text-align:center;  
                font-family:Times New Roman;  
            }  
              
            #one {  
                animation-name:example;  
                animation-duration:10s;  
                  
            }  
              
            #two {  
                animation-name:example;  
                animation-duration:10s;  
                animation-delay:10s;  
            }  
              
            @keyframes example {  
                from {  
                    background-color:orange;  
                }  
                to {  
                    background-color:white;  
                }  
            }  
        </style>  
    </head>  
    <body>  
        <div class = "geeks"> 
            GeeksforGeeks 
        </div>  
          
        <div class = "geeks1"> 
            A computer science portal for geeks 
        </div>  
          
        <!-- Animation of below h2 tag is not delayed 
            and begins as soon as the page is loaded  
            in the browser -->
        <h2 id="one"> 
            Text animation without delayed. 
        </h2>  
          
        <!-- The animation of below h2 tag is delayed for 10s 
             That is, it begins after 10s of successfully  
             loading of the current page -->
        <h2 id="two"> 
            Text animation with 10 second delay. 
        </h2>  
    </body>  
</html>                                    

输出:
animation delay

支持的浏览器:下面列出了animation-delay支持的浏览器:

  • 谷歌浏览器43.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 30.0
  • Safari 9.0


相关用法

注:本文由纯净天空筛选整理自vt_m大神的英文原创作品 CSS | animation-delay Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。