css动画相关属性详解

css动画相关属性详解

---

什么是CSS动画？

动画使元素逐渐从一种样式变为另一种样式，它可以随意更改任意数量的css的属性。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、@keyframes规则

如果在@keyframes规则中指定了css样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。
例：下面的例子将 “example” 动画绑定到 < div > 元素。动画将持续 4 秒钟，同时将 < div > 元素的背景颜色从 “red” 逐渐改为 “yellow”。

 <style>
        /* 动画代码 */
        @keyframes example {
            from {
                background-color: red;
            }
            to {
                background-color: yellow;
            }
        }
        /* 向此元素应用动画效果 */
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            //动画名称
            animation-name: example;
            //动画持续四秒
            animation-duration: 4s;
        }
    </style>

注意：animation-duration属性定义需要多长时间才能完成动画，若未指定这个属性，则动画不会发生，因为默认值为0（0S）

在以上例子中，通过使用关键字“from”和“to”（代表0%开始和100%完成），我们设置了样式何时改变。我们也可以设置为百分比形式。通过百分比，可以根据需要添加任意多个样式。
例：

/* 动画代码 ,以百分比的形式来完成动画*/
@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％ 以及动画完成 100％ 时更改背景颜色和 <div> 元素的位置：
/* 动画代码 */
@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

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

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 属性可接受以下值：
1，normal - 动画正常播放（向前）。默认值
2，reverse - 动画以反方向播放（向后）
3，alternate - 动画先向前播放，然后向后
4，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;
}

五、指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值：
ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：
#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 - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
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-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
使用简写的 animation 属性也可以实现与上例相同的动画效果：
div {
  animation: example 5s linear 2s infinite alternate;
}

八、总结