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


CSS animation-direction用法及代码示例


CSS中的animation-direction属性用于定义动画的方向。动画的方向应为向前,向后或交替循环。

用法:

animation-direction:normal|reverse|alternate|alternate-reverse|
initial|inherit;

属性值:下面列出了animation-direction属性:
normal:此动画属性将动画向前播放。它是默认值。


  • 用法:
    animation-direction:normal; 
  • Example:
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title> 
                CSS | animation-direction Property 
            </title> 
            <style>  
                body { 
                    text-align:center; 
                } 
                h1 { 
                    color:green; 
                } 
                h3 {  
                    width:100%;  
                    animation-name:text;  
                    animation-duration:2s;  
                    animation-iteration-count:infinite;  
                }  
                #one {  
                    animation-direction:normal;  
                }  
                @keyframes text {  
                    from {  
                        margin-left:60%;  
                    }  
                    to {  
                        margin-left:0%;  
                    }  
                }  
            </style>  
        </head>  
        <body>  
            <h1>GeeksforGeeks</h1>  
            <h2>animation-direction property</h2>  
            <h3 id="one">This text is normal.</h3>  
        </body>  
    </html>                                     
  • Output:

reverse:此动画属性以相反的方向播放动画。

  • 用法:
    animation-direction:reverse;
  • 例:
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title> 
                CSS | animation-direction Property 
            </title> 
            <style>  
                body { 
                    text-align:center; 
                } 
                h1 { 
                    color:green; 
                } 
                h3 {  
                    width:100%;  
                    animation-name:text;  
                    animation-duration:2s;  
                    animation-iteration-count:infinite;  
                }  
                #one {  
                    animation-direction:reverse;  
                }  
                @keyframes text {  
                    from {  
                        margin-left:60%;  
                    }  
                    to {  
                        margin-left:0%;  
                    }  
                }  
            </style>  
        </head>  
        <body>  
            <h1>GeeksforGeeks</h1>  
            <h2>animation-direction property</h2>  
            <h3 id="one">This text is reverse.</h3>  
        </body>  
    </html>                                     
  • 输出:

交替:此动画属性先播放动画,然后播放动画。

  • 用法:
    animation-direction:alternate; 
  • 例:
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title> 
                CSS | animation-direction Property 
            </title> 
            <style>  
                body { 
                    text-align:center; 
                } 
                h1 { 
                    color:green; 
                } 
                h3 {  
                    width:100%;  
                    animation-name:text;  
                    animation-duration:2s;  
                    animation-iteration-count:infinite;  
                }  
                #one {  
                    animation-direction:alternate;  
                }  
                @keyframes text {  
                    from {  
                        margin-left:60%;  
                    }  
                    to {  
                        margin-left:0%;  
                    }  
                }  
            </style>  
        </head>  
        <body>  
            <h1>GeeksforGeeks</h1>  
            <h2>animation-direction property</h2>  
            <h3 id="one">This text is alternate.</h3>  
        </body>  
    </html>                                     
  • 输出:

alternate-reverse:此动画属性首先向后播放动画,然后向前播放。

  • 用法:
    animation-direction:alternate-reverse;
  • 例:
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title> 
                CSS | animation-direction Property 
            </title> 
            <style>  
                body { 
                    text-align:center; 
                } 
                h1 { 
                    color:green; 
                } 
                h3 {  
                    width:100%;  
                    animation-name:text;  
                    animation-duration:2s;  
                    animation-iteration-count:infinite;  
                }  
                #one {  
                    animation-direction:alternate-reverse; 
                }  
                @keyframes text {  
                    from {  
                        margin-left:60%;  
                    }  
                    to {  
                        margin-left:0%;  
                    }  
                }  
            </style>  
        </head>  
        <body>  
            <h1>GeeksforGeeks</h1>  
            <h2>animation-direction property</h2>  
            <h3 id="one">This text is alternate-reverse.</h3>  
        </body>  
    </html>                                     
  • 输出:

initial:此属性用于将animation属性设置为其默认值。

继承:此属性用于从其父元素继承animation属性。

支持的浏览器:下面列出了animation-direction属性支持的浏览器:

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


相关用法


注:本文由纯净天空筛选整理自vt_m大神的英文原创作品 CSS | animation-direction Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。