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;

适当的价值：

• 缓动：使用此属性值，动画开始缓慢，然后快速，最后缓慢结束（这是默认值）。
• 线性：如果为属性指定了此值，则动画从开始到结束以相同的速度播放。
• 缓入：如果指定了此值，则动画以慢速开始。
• 缓出：如果为属性指定了此值，则动画正常播放但结束缓慢。这类似于缓入。
• 缓入缓出：使用此属性值，动画开始和结束都很慢。

示例： HTML 程序来说明动画计时功能属性的上述属性值。

html

    
        
        
    
    
        

            GeeksforGeeks
        
         
        

            A computer science portal for geeks
        
         
        
        

            This text is ease.
        
         
        
        

            This text is linear.
        
         
        
        

            This text is ease-in.
        
         
        
        

            This text is ease-out.
        
         
        
        

            This text is ease-in-out.
        
    

支持的浏览器： animation-timing-function 属性支持的浏览器如下：

• 谷歌浏览器 43.0
• 浏览器 10.0
• 火狐 16.0
• 歌剧 30.0
• Safari 9.0