CSS | @keyframes 规则

@keyframes 规则用于指定动画规则。动画是通过使用可变的 CSS 样式创建的。在动画期间 CSS 属性可以更改多次。

注意：为了获得对浏览器的最佳支持，请始终同时指定 0% 和 100% 选择器。

句法：

@keyframes animation-name {keyframes-selector {css-styles;}}

属性值：此参数接受上面提到和下面描述的三个值：

• 动画名称：动画名称是必需的，它定义了动画名称。
• 关键帧选择器：关键帧选择器定义动画的百分比。它介于 0% 到 100% 之间。一个动画可以包含多个选择器。
• css-styles： css-styles 定义了一个或多个合法或适用的 CSS 样式属性。

示例 1：

    

  

    

        
Geeksforgeeks
    

  
                    

输出：

示例 2：

      

    

  

    
        

            
Geeksforgeeks
        
    

  
                    

输出：

支持的浏览器： @keyframes Rule支持的浏览器如下：

• 谷歌浏览器 43.0, 4.0 -webkit-
• 浏览器 10.0
• 火狐 16.0, 5.0 -moz-
• Safari 9.0, 4.0 -webkit-
• 歌剧 30.0, 15.0 -webkit-, 12.0 -o-