CSS @keyframes规则

CSS @keyframe指定动画规则，该动画规则为每个状态的时间轴定义了元素的CSS属性。

我们可以使用@keyframe创建复杂的动画属性。使用可变的CSS样式创建动画，该样式可以无限重复或有限次数。一个简单的动画只能有两个关键帧，而复杂的动画只有几个关键帧。

句法

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

要使用关键帧，我们需要创建一个@keyframes规则以及animation-name属性，以匹配动画及其关键帧声明。

它接受三个值。让我们详细讨论它们。

属性值

animation-name：它是定义动画名称的必需值。

keyframes-selector：指定关键帧发生时的百分比以及动画。其值介于(等于0％)到(等于100％)的0％到100％之间。关键帧百分比可以按任何顺序编写，因为它们将按照出现的顺序进行处理。

css-styles：它定义一个或多个CSS样式属性。

如果关键帧规则未定义动画的开始和结束状态，则浏览器将使用元素的现有样式。将忽略无法在关键帧规则中设置动画的属性。

关键帧计时函数

为了控制动画速率，我们可以使用以下值。

线性：这意味着从开始到结束的过渡速率将保持恒定。

easy：这意味着动画开始缓慢，然后经过一段时间后，速度增加，而在结束之前速度将再次变慢。

缓入：类似于缓入，但是动画很快结束。

缓动：它也类似于缓动，但是动画开始很快。

让我们尝试通过一些插图来了解CSS @keyframe规则。

例

After the completion of the Animation, the element retracts to its original State 

例2

 
 
 
     
 
  
 
    
 
        
javaTpoint
 
    
 
 
  
 

要记住的要点

有关此规则的一些要点如下：

• 我们可以使用from关键字而不是0％ 。
• 我们可以使用to关键字代替100％ 。
• 即使我们使用from和to关键字，它们之间的任何值仍将以％声明。
• 对于有效的动画，必须声明开始和结束时间。
• 那些涉及！important的声明被忽略。