📜  CSS @keyframes规则

📅  最后修改于: 2020-11-05 01:46:33             🧑  作者: Mango

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%
  • 即使我们使用fromto关键字,它们之间的任何值仍将以%声明。
  • 对于有效的动画,必须声明开始和结束时间。
  • 那些涉及!important的声明被忽略。