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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。