c3中基本动画

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

1. 必要元素：

   a、通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧

   b、通过百分比将动画序列分割成多个节点；

   c、在各节点中分别定义各属性

   d、通过animation将动画应用于相应元素；

2. animation样式常用属性：

   a)     动画序列的名称:animation-name: move;

   b)     动画的持续时间:animation-duration: 1s;

   c)     动画的延时:animation-delay: 1s;

   d)    播放状态:animation-play-state: paused|running;

   e)     播放速度:animation-timing-function: linear;

   f)      播放次数反复:animation-iteration-count: 1;

   g)     动画播放完结后的状态:animation-fill-mode: forwards;

   h)     循环播放时，交叉动画:animation-direction: alternate;

3. 代码说明：<style>

   *{
   padding: 0;
   margin: 0;
   }
   div{
   width: 300px;
   height: 300px;
   margin:100px auto;
   }
   div >img{
   width:100%;
   }
   /*添加动画*/
   @keyframes rotateAni {
   0%{
   /*可以同时对多个属性添加动画效果*/
   transform: rotate(0deg) scale(1);
   }
   50%{
   transform: rotate(180deg) scale(2);
   }
   100%{
   transform: rotate(360deg) scale(1);
   }
       }
   div:hover >img{
   /*动画名称-自定义*/
   animation-name: rotateAni;
   /*动画时间*/
   animation-duration: 1s;
   /*动画速率曲线： linear：匀速  ease：动画以低速开始，然后加快，在结束前变慢  ease-in：动画以低速开始  ease-out：动画以低速结束  ease-in-out：动画以低速开始和结束*/
   animation-timing-function: linear;
   /*动画播放次数*/
   animation-iteration-count: 4;
   /*动画时间延迟*/
   animation-delay: 0s;
   /*动画播放完的状态：  forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/
   animation-fill-mode: forwards;
   /*动画是否轮流反射播放：  alternate:在规定的次数内轮流反射播放  normal:正常播放*/
           /*animation-direction: alternate;*/
   }
   div:active >img{
   /*动画的当前播放状态：  paused：暂停  running:运行*/
   animation-play-state: paused;
   }
   </style>

<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
margin:100px auto;
}
div >img{
width:100%;
}
/*添加动画*/
@keyframes rotateAni {
0%{
/*可以同时对多个属性添加动画效果*/
transform: rotate(0deg) scale(1);
}
50%{
transform: rotate(180deg) scale(2);
}
100%{
transform: rotate(360deg) scale(1);
}
    }
div:hover >img{
/*动画名称-自定义*/
animation-name: rotateAni;
/*动画时间*/
animation-duration: 1s;
/*动画速率曲线： linear：匀速  ease：动画以低速开始，然后加快，在结束前变慢  ease-in：动画以低速开始  ease-out：动画以低速结束  ease-in-out：动画以低速开始和结束*/
animation-timing-function: linear;
/*动画播放次数*/
animation-iteration-count: 4;
/*动画时间延迟*/
animation-delay: 0s;
/*动画播放完的状态：  forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/
animation-fill-mode: forwards;
/*动画是否轮流反射播放：  alternate:在规定的次数内轮流反射播放  normal:正常播放*/
        /*animation-direction: alternate;*/
}
div:active >img{
/*动画的当前播放状态：  paused：暂停  running:运行*/
animation-play-state: paused;
}
</style>