C3动画

动画的分类及使用
CSS3中的动画分为：平移动画、过渡动画和自定义动画三种。

平移动画：transform: 平移translate / 旋转rotate / 放大scale / 倾斜skew；

过渡动画：transition:  transition是一个复合属性，包括：

transition-property:过渡属性(即哪些元素使用过渡动画)；

transition-delay：过渡延时；

transition-duration：过渡时间；

transition-timing-function：过渡方式（linear匀速播放、ease-in-out以低速开始和结束、ease-in以低速开始、ease-out低速结束、ease默认，以低速开始，然后加快，在结束前变慢。 ）

//注：如果写复合属性，当出现两个时间，则第一个为动画时间，第二个表示延时时间；如果只有一个时间，则表示的时动画时间。

自定义动画(帧动画）：animation: 动画名称   时间   运动方式   是否循环;

animation-name: zidingyi; 动画名称;

animation-delay: 1s ; 动画延迟时间;

animation-direction: alternate; 动画的播放方向（alternate表示第135次正向播放，246次反向播放);

animation-duration: 3s; 动画的播放时间;

animation-iteration-count: 1; 动画的播放次数 （如果其后的属性值为infinite，则表示自定义的动画一直循环播放;

animation-play-state: running; 动画播放是否暂停;

animation-timing-function: linear; 动画的播放方式;

动画播放序列的声明：（两种写法）

@keyframes[空格] [定义的动画名]{

方式一：from{ }
              to{ }
使用“from”和“to”来代表一个动画是从哪开始，到哪结束。也就是说这个 “from"就相当于"0%”，而"to"相当于"100%"

方式二：0%{ }
             30%{ }
             50%{ }
             80%{ }
             100%{ }

可以在这个规则中创建多个百分比，分别在每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动、改变元素颜色、位置、大小、形状等。数值段必须是百分数，如果不是百分数，这个keyframes是无效的，不会起任何作用。keyframes的单位只接受百分比值