CSS动画@keyframes的用法

Posted 2022-04-06

CSS动画

CSS动画允许大多数html元素的动画，而无需使用javascript或Flash！

动画浏览器支持

IE10+支持该属性的。其他低浏览器版本数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

什么是CSS动画？

动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画，必须首先为动画指定一些关键帧。关键帧保持元素在特定时间具有的样式。

@keyframes规则

在@keyframes规则中指定CSS样式时，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到元素。以下示例将“example”动画绑定到<div>元素。动画将持续4秒，并且会逐渐将<div>元素的背景颜色从“红色”更改为“×××”：

               /* 动画代码 */
              @keyframes example 
                  from background-color: red;
                  to background-color: yellow;
                
                /* 要将动画应用到的元素 */
                div 
                  width: 100px;
                  height: 100px;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                

注意：该animation-duration属性定义动画完成所需的时间。如果animation-duration未指定该属性，则不会发生动画，因为默认值为0（0秒）。 在上面的示例中，我们通过使用关键字“from”和“to”（表示0％（开始）和100％（完成））指定样式何时更改。也可以使用百分比。通过使用百分比，您可以根据需要添加任意数量的样式更改。当动画完成25％，完成50％时，以及动画100％完成时，以下示例将更改<div>元素的背景颜色：

                       /* 动画代码 */
                       @keyframes example 
                          0%   background-color: red;
                          25%  background-color: yellow;
                          50%  background-color: blue;
                          100% background-color: green;
                        
                        /* 将动画应用到元素 */
                        div 
                          width: 100px;
                          height: 100px;
                          background-color: red;
                          animation-name: example;
                          animation-duration: 4s;
                        

以下示例将在动画完成25％，完成50％时再次更改背景颜色和<div>元素的位置，并在动画完成100％时再次更改：

                        /* 动画代码 */
                        @keyframes example 
                          0%   background-color:red; left:0px; top:0px;
                          25%  background-color:yellow; left:200px; top:0px;
                          50%  background-color:blue; left:200px; top:200px;
                          75%  background-color:green; left:0px; top:200px;
                          100% background-color:red; left:0px; top:0px;
                        
                        /* 将动画应用到元素 */
                        div 
                          width: 100px;
                          height: 100px;
                          position: relative;
                          background-color: red;
                          animation-name: example;
                          animation-duration: 4s;
                        

##延迟动画
animation-delay属性指定动画开始的延迟。以下示例在开始动画之前有2秒的延迟：

          div 
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-delay: 2s;
                

也允许负值。如果使用负值，动画将像已经播放N秒一样开始。在以下示例中，动画将像已经播放2秒一样开始：

         div 
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-delay: -2s;
               

设置动画应运行多少次

animation-iteration-count属性指定动画应运行的次数。以下示例将在停止之前运行动画3次：

          div 
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-iteration-count: 3;
                

以下示例使用值“infinite”使动画永远继续：

           div 
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-iteration-count: infinite;
                

以反向或备用循环运行动画

animation-direction属性指定动画是应该向前，向后还是以交替周期播放。 animation-direction属性可以具有以下值：
normal - 动画正常播放（前进）。这是默认的
reverse - 动画以反向播放（向后）
alternate - 动画首先向前播放，然后向后播放
alternate-reverse - 首先向后播放动画，然后向前播放动画
以下示例将以反向（向后）运行动画：

          div 
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-direction: reverse;
                

以下示例使用值“alternate”使动画首先向前运行，然后向后运行：

           div 
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-iteration-count: 2;
                  animation-direction: alternate;
                

以下示例使用值“alternate-reverse”使动画首先向后运行，然后向前运行：

           div 
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-iteration-count: 2;
                  animation-direction: alternate-reverse;
                

指定动画的速度曲线

animation-timing-function属性指定动画的速度曲线。 animation-timing-function属性可以具有以下值：
ease - 指定慢启动的动画，然后快速，然后缓慢结束（这是默认设置）
linear - 指定从开始到结束具有相同速度的动画
ease-in - 指定启动慢的动画
ease-out - 指定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 允许您在cubic-bezier函数中定义自己的值
以下示例显示了可以使用的一些不同速度曲线：

                #div1 animation-timing-function: linear;
                #div2 animation-timing-function: ease;
                #div3 animation-timing-function: ease-in;
                #div4 animation-timing-function: ease-out;
                #div5 animation-timing-function: ease-in-out;

为动画指定填充模式

CSS动画在播放第一个关键帧之前或播放最后一个关键帧之后不会影响元素。animation-fill-mode属性可以覆盖此行为 animation-fill-mode动画未播放时（在开始之前，结束之后或两者都有），该属性指定目标元素的样式。 animation-fill-mode属性可以具有以下值：
none- 默认值。动画在执行之前或之后不会对元素应用任何样式
forwards - 元素将保留由最后一个关键帧设置的样式值（取决于animation-direction和animation-iteration-count）
backwards - 元素将获取由第一个关键帧设置的样式值（取决于动画方向），并在动画延迟期间保留此值
both - 动画将遵循向前和向后的规则，在两个方向上扩展动画属性
以下示例允许<div>元素在动画结束时保留最后一个关键帧的样式值：

           div 
                  width: 100px;
                  height: 100px;
                  background: red;
                  position: relative;
                  animation-name: example;
                  animation-duration: 3s;
                  animation-fill-mode: forwards;
                

以下示例允许<div>元素获取动画开始前（动画延迟期间）第一个关键帧设置的样式值：

           div 
                  width: 100px;
                  height: 100px;
                  background: red;
                  position: relative;
                  animation-name: example;
                  animation-duration: 3s;
                  animation-delay: 2s;
                  animation-fill-mode: backwards;
                

以下示例允许<div>元素在动画开始之前获取由第一个关键帧设置的样式值，并在动画结束时保留最后一个关键帧的样式值：

            div 
                  width: 100px;
                  height: 100px;
                  background: red;
                  position: relative;
                  animation-name: example;
                  animation-duration: 3s;
                  animation-delay: 2s;
                  animation-fill-mode: both;
                

动画简写属性
下面的示例使用了六个动画属性：

            div 
                  animation: example 5s linear 2s infinite alternate;
                

CSS动画属性
下表列出了@keyframes规则和所有CSS动画属性：

属性	描述
@keyframes	指定动画代码
animation	设置所有动画属性的简写属性
animation-delay	指定动画开始的延迟
animation-direction	指定动画是向前播放、向后播放还是交替播放
animation-duration	指定动画完成一个循环需要多长时间
animation-fill-mode	指定动画不播放时元素的样式(在动画开始前、结束后或同时播放)
animation-iteration-count	指定动画播放的次数
animation-name	指定@keyframes动画的名称
animation-play-state	指定动画是运行还是暂停
animation-timing-function	指定动画的速度曲线