1. 动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

• 动画是使元素从一种样式逐渐变化为另一种样式的效果。

• 可以改变任意多的样式任意多的次数。

• 用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

• 0% 是动画的开始，100% 是动画的完成。

动画通过 @keyframes 指定动画序列，通过百分比将动画序列分割成多个节点，在各节点中分别定义各属性。然后通过 animation 将动画应用于相应元素。

@keyframes 语法：

@keyframes 动画名{
    0%/from {
        动画样式起始状态
    }
    任意百分比 {
        css code ...
    }
    100%/to {
        动画样式终止状态
    }
}

1. 关键属性

• animation-name 动画名称(必填)

• animation-duration 动画持续时间(必填)

• animation-timing-function

  • linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)： 特定的贝塞尔曲线类型

• animation-delay 动画延迟（只是第一次）

• animation-iteration-count 重复次数

  • 1/2/3/4…

  • infinite 无限次

• animation-direction 动画是否重置后再开始播放

  • normal 动画每次都从 0% 的状态开始执行

  • alternate 动画从起点开始，往复运动

  • alternate-reverse 动画从终点开始，往复运动

• animation-fill-mode 动画执行完毕后状态

  • forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义） - 未实现，当前效果类似于 both。

  • backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

  • both 设置对象状态为动画结束或开始的状态，结束时状态优先

注意:

1. Internet Explorer 9 及更早IE版本不支持 animation 属性。
2. 当动画完成时，会变回初始的样式

2. 简写语法

.ele {
    animation: name duration timing-function delay iteration-count direction fill-mode;
}

name duration 是必填属性，其它的属性是都可选属性。

示例一 : 改变盒子位置

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
}

@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}

<div></div>

示例二 : 改变盒子背景颜色

div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
}
@keyframes myfirst
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

<div></div>

示例三 : 改变盒子的背景颜色和位置

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s;
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

<div></div>

3. 动画状态

animation-play-state 属性指定动画是否正在运行或已暂停。

• paused 暂停动画
• running 运行动画

div {
       float: left;
       width: 100px;
       height: 100px;
       background: red;
       animation: myfirst 5s;
     }

@keyframes myfirst {
    from {
        background: red;
    }

    to {
        background: yellow;
    }
}

.paused{
    /* 暂停动画 */
    animation-play-state: paused;
    margin-right: 100px;
}
.running{
    /* 运行动画 */
    animation-play-state: running;
}

<div class="paused">paused</div>
<div class="running">running</div>

4. 帧动画

在应用 CSS3 动画时，有个控制时间的属性 timing-function 。它的取值中除了常用到的 贝塞尔曲线 以外，还可以是 steps() 函数

steps(n,start/end)

• 第一个参数就是一个数字，代表把这次过渡分成几步。
• 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。
  • start : 表示直接开始 , 会丢失第一帧
  • end : 表示戛然而止 , 会丢失最后一帧 , 默认是end

注意: n 必须是正整数

示例 :

div {
       width: 100px;
       height: 100px;
       animation: changeColor 5s steps(1);
    }

@keyframes changeColor {
/* 第1步 */ from /* 0% */ { background-color: red } /* 红 */
/* 第2步 */ 16%{ background-color: orange } /* 橙 */
/* 第3步 */ 32%{ background-color: yellow } /* 黄 */
/* 第4步 */ 48%{ background-color: green } /* 绿 */
/* 第5步 */ 64%{ background-color: cyan } /* 青 */
/* 第6步 */ 80%{ background-color: blue } /* 蓝 */
/* 第7步 */ to /* 100% */ { background-color: purple } /* 紫 */
}

<div></div>

上面我们用steps(1)来运行这个动画 :

人类的想法：

第一步：红色
第二步：橙色
第三步：黄色
第四步：绿色
第五步：青色
第六步：蓝色
第七步：紫色

而电脑的想法：

第一步：红色到橙色
第二步：橙色到黄色
第三步：黄色到绿色
第四步：绿色到青色
第五步：青色到蓝色
第六步：蓝色到紫色

总结 :

1. steps()就是控制着这第一步到第二步、第N步到第N+1步。

2. steps(1)就代表了第一步到第二步：红色到橙色之间用一步就走完。

3. 同理，steps(10)就代表了第一步到第二步：红色到橙色之间之间要慢慢过渡10次。

下图可以帮助我们更好理解 :

关于第二个参数 :

steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；

steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。

参考下图 :

5. 动画监听

CSS 动画播放时，会发生以下三个事件：

• animationstart - CSS 动画开始后触发

• animationiteration - CSS 动画重复播放时触发

• animationend - CSS 动画完成后触发

  通常我们使用 addEventListener() 方法为元素添加”animationstart”, “animationiteration” 和 “animationend” 事件。

  语法:

  ele.addEventListener("animationstart", myStartFunction);
ele.addEventListener("animationiteration", myIterationFunction);
ele.addEventListener("animationend", myEndFunction);

示例 :

#myDIV {
    margin: 25px;
    width: 550px;
    height: 100px;
    background: orange;
    position: relative;
    font-size: 20px;
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

<div id="myDIV">点我开始动画</div>

var myDIV = document.getElementById("myDIV")

// 给元素绑定点击事件
myDIV.onclick = function(){
    myFunction();
}

function myFunction() {
    myDIV.style.animation = "mymove 4s 2";
}
// 动画监听
myDIV.addEventListener("animationstart", myStartFunction);
myDIV.addEventListener("animationiteration", myIterationFunction);
myDIV.addEventListener("animationend", myEndFunction);

function myStartFunction() {
    this.innerHTML = "animationstart 事件触发 - 动画已经开始";
    this.style.backgroundColor = "pink";
}

function myIterationFunction() {
    this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
    this.style.backgroundColor = "yellow";
}

function myEndFunction() {
    this.innerHTML = "animationend 事件触发 - 动画已经完成";
    this.style.backgroundColor = "green";
}

参考动画

• https://www.jq22.com/code4374
• https://www.jq22.com/code4387
• https://www.jq22.com/code4517