CSS animation-timing-function用法及代码示例

CSS中的animation-timing-function属性用于指定动画如何通过关键帧进行过渡。也就是说，它用于指定过渡期间动画的运动。

用法:

animation-timing-function:linear | ease | ease-in | ease-out | 
ease-in-out | step-start | step-end|steps(int, start | end) | 
cubic-bezier(n, n, n, n) | initial | inherit;

适当的价值：

缓解：使用此属性值，动画将缓慢开始，然后快速开始，然后最终缓慢结束(这是默认设置)。
线性：如果为属性指定了此值，则动画从头到尾以相同的速度播放。
ease-in：如果指定此值，则动画将从慢速开始开始。
ease-out：如果为该属性指定了该值，则动画将正常播放，但结束缓慢。这类似于ease-in。
ease-in-out：使用此属性值，动画将缓慢开始和结束。

例：HTML程序，用于说明animation-timing-function属性的以上属性值。

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
             CSS | animation-timing-function 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;  
            }  
              
            h2 {  
                width:350px;  
                animation-name:text;  
                animation-duration:4s;  
                animation-iteration-count:infinite;  
                background-color:rgb(255, 210, 85);  
            }  
              
            #one {  
                animation-timing-function:ease;  
            }  
              
            #two {  
                animation-timing-function:linear;  
            }  
              
            #three {  
                animation-timing-function:ease-in;  
            }  
              
            #four {  
                animation-timing-function:ease-out;  
            }  
              
            #five {  
                animation-timing-function:ease-in-out;  
            }  
              
            @keyframes text {  
                from {  
                    margin-left:60%;  
                }  
                to {  
                    margin-left:0%;  
                }  
            }  
        </style>  
    </head>  
    <body>  
        <div class = "geeks"> 
            GeeksforGeeks 
        </div>  
          
        <div class = "geeks1"> 
            A computer science portal for geeks 
        </div>  
          
        <!-- For this the animation-timing-function will  
             be set to ease -->
        <h2 id="one"> 
            This text is ease. 
        </h2>  
          
        <!-- For this animation-timing-function will  
             be set to linear -->
        <h2 id="two"> 
            This text is linear. 
        </h2>  
          
        <!-- For this animation-timing-function will  
             be set to ease-in -->
        <h2 id="three"> 
            This text is ease-in. 
        </h2>  
          
        <!-- For this animation-timing-function will  
             be set to ease-out -->
        <h2 id="four"> 
            This text is ease-out. 
        </h2>  
          
        <!-- For this animation-timing-function will  
             be set to ease-in-out -->
        <h2 id="five"> 
            This text is ease-in-out. 
        </h2>  
    </body>  
</html>

支持的浏览器：下面列出了animation-play-state属性支持的浏览器：

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

相关用法

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