1、animation动画

（1）定义场景

基本语法

@keyframes 场景名称 {
from{
样式名:值;
……
}
to{
样式名:值;
……
}
}

说明

from 设置动画开始之前的样式。
to 设置动画结束之后的样式。

或

@keyframes 场景名称 {
0%{
样式名:值;
……
}
50%{
样式名:值;
……
}
100%{
样式名:值;
……
}
}

说明

0% 设置动画开始之前的样式。
50% 设置动画进行一半时的样式。
100% 设置动画结束后的样式。

（2）定义动画

基本语法

  1.     animation:场景名称 播放时长 动画类型 播放次数;<br />不写播放次数，默认播放一遍<br />播放次数：infinite重复播放

值

播放时长：单位为秒。默认值是 0。
动画类型：linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
播放次数：数字| infinite。
infinite为无限次播放。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  #div{
      width:500px;
      height:500px;
      border:1px solid red;
      margin:0 auto;
      position:relative;
  }

  #div1{
    width:50px;
    height:50px;
    background:red;
    position:absolute;
    animation:moveDiv 4s ease infinite;
  }
  @keyframes moveDiv {
    0%{left:0;top:0;}
    25%{left:450px; top:0;}
    50%{left:450px; top:450px;}
    75%{left:0; top:450px;}
    100%{left:0; top:0;}
  }
</style>
</head>
<body>
<div id="div">
<div id="div1"></div>
</div>
</body>
</html>

代码讲解

1、设置子元素样式并定义动画

animation:moveDiv 4s ease infinite; 定义动画场景名称为moveDiv播放时长为4秒且无限播放

2、设置子元素动画场景

0%{left:0;top:0;} 设置动画开始时子元素在左上角
25%{left:450px; top:0;} 设置动画四分之一时子元素在右上角
50%{left:450px; top:450px;} 设置动画一半时子元素在右下角
75%{left:0; top:450px;} 设置动画四分之三时子元素在左下角
100%{left:0; top:0;} 设置动画结束时子元素在左上角

2、监听animation动画完成

标签对象.addEventListener(“animationend”,函数,false);