CSS动画

CSS动画——使元素逐渐从一种样式变为另一种样式

@keyframes 规则

在特定时间逐渐从当前样式更改为新样式

语法

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
    }

    @keyframes example {
      from {background-color: red;}
      to {background-color: yellow;}
    }
</style>

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改

元素的背景颜色：

<style>
    /* 动画代码 */
    @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;
    }
</style>

延时动画——animation-delay

<style>
    div {
      width: 100px;
      height: 100px;
      position: relative;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      animation-delay: 2s; /*延时两秒*/
    }
</style>

动画运行次数——animation-iteration-count

<style>
    div {
      width: 100px;
      height: 100px;
      position: relative;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      animation-iteration-count: 3;/*运行3次*/
    }
</style>

animation-iteration-count: infnite——动画永远持续

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

值：

• normal - 动画正常播放（向前）。默认值

• reverse - 动画以反方向播放（向后）

• alternate - 动画先向前播放，然后向后

• alternate-reverse - 动画先向后播放，然后向前

<style>
    div {
      width: 100px;
      height: 100px;
      position: relative;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      animation-iteration-count: 2;
      animation-direction: alternate;/*先向前再向后*/
    }
</style>

动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

值：

• ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

• linear - 规定从开始到结束的速度相同的动画

• ease-in - 规定慢速开始的动画

• ease-out - 规定慢速结束的动画

• ease-in-out - 指定开始和结束较慢的动画

• cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

<style>
    #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;}
</style>

动画的填充模式——animation-fill-mode

规定动画播放前与播放后的形态

值：

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

<style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation-name: example;
      animation-duration: 3s;
      animation-fill-mode: forwards;
    }
</style>

动画简写属性

<style>
    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;
    }
</style>