第100天：CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；

一、Animation定义动画

CSS3的Animation是由“keyframes”这个属性来实现这样的效果，keyframes就是关键帧。下面先来看看Keyframes:

Keyframes语法规则：

 

@keyframes 动画名 {
     from{开始状态}
      to{结束状态}
  }
  调用
  animation: 动画名称 持续时间 执行次数(infinite无限) alternate(来回) 运动曲线(linear线性) 延迟时间;
定义有两种方式，from......to和百分比。具体方法如下：

 1 <style>
 2         div{
 3             width: 200px;
 4             height: 200px;
 5             background-color: green;
 6             margin: 100px;
 7             /*调用动画：动画名 持续时间 执行次数(数字或无限) alternate(来回) 线性 延迟*/
 8           /*  animation: move 2s infinite alternate linear 1s;*/
 9 
10             animation: move2 4s infinite 1s;
11         }
12 
13         /*定义动画*/
14        @keyframes move {
15             from{
16                 transform: translateX(100px) rotate(0deg);
17             }
18             to{
19                 transform: translateX(800PX) rotate(360deg);
20             }
21 
22         }
23         /*定义多组动画*/
24         @keyframes move2 {
25             0%{
26                 transform: translate(100px,100px);
27