CSS3动画animation讲解

CSS动画基础
种类：  变形(transformation)、变换(transition)和动画(animation)

核心：动画名、关键帧

关键帧：   描述在整个动画过程中，会发生变化的属性列表（也就是，哪些属性会改变，如何改变以及什么时候改变）。

主要步骤：定义动画 、将其赋给指定的HTML元素（或元素）。

定义动画：
1、使用@keyframes 规则来声明关键帧。
2、给出动画命名 ：  run。

一、定义关键帧：
Transform：旋转rotate、扭曲skew、缩放scale和移动translate
1、关键字from 和 to； （ 一个对象从一个地方移动到另一个地方）
@keyframes run{
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(800px);
    }
}
2、或百分比

from - to 与 0% - 100% 同等意义

@keyframes run{
    0% {
        transform: translateX(0);
    }


    100% {
        transform: translateX(800px);
    }
}

二：将动画赋给HTML元素
animation 的参数或者是动画的一些属性:
   1、animation-name: run;   关键帧的名
   2、animation-duration: 2s;     s/ms    时长

.person{
   animation-name: run;   关键帧的名
   animation-duration: 2s;    时长
}


三、更多的动画属性
1、animation-timing-function  （动画的速度曲线）
linear ：  动画从头到尾的速度是相同的。
ease ：   默认。动画以低速开始，然后加快，在结束前变慢。
ease-in ： 动画以低速开始。
ease-out  ： 动画以低速结束。
ease-in-out ： 动画以低速开始和结束。

2、animation-iteration-count （动画会重复播放多少 ，int）
3、animation-delay   （动画的延迟执行时间s/ms）
4、animation-fill-mode   (定义动画的停留的位置 )
none ：不改变默认行为。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。


5、animation-play-state  （属性规定动画正在运行还是暂停）
paused 规定动画已暂停。
running 规定动画正在播放。


6、animation-direction  （动画进行的方向）
normal（正常）  0% - 100%
reverse（反转） 100% - 0%
alternate（交替）  0% - 100%  100% - 0%
alternate-reverse（交替反转）  100% - 0%  0% - 100%
7、transform-origin: 50% 20% 0;  （x，y，z）（确定旋转中心）   
left    以自身的左边为x起点
center     以自身的左边为center（50%）起点
right 、length 、%

四：动画简写
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animationiteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
例子：animation: myAnimation 1s ease-in-out 2s 4, myOtherAnimation 4s ease-out 2s;

五：兼容性（兼容性差，采用hack）
多数属性支持：IE10及以上，ff,
 -webkit-,-o-, -ms- 或 -moz- 
-webkit-transform : rotate(0deg);   Safari 和 Chrome  
-moz-transform : rotate(0deg);      ff
-ms-transform : rotate(0deg);     IE
-o-transform : rotate(0deg);     -opera
transform : rotate(0deg);    统一标识语句
opera浏览器还有个比较怪异的地方，它偏爱@keyframes myrotate{...}，而对@-o-keyframes myrotate{...}不感冒
Trident（IE内核）、Gecko(Firefox内核)、Webkit(Safari内核,Chrome内核原型,开源)、Presto+Blink（Opera前内核+现内核）

六：优点与缺点
1、CSS动画的transform矩阵是C++级的计算，性能更优
2、代码简洁
3、浏览器会对CSS3的动画做一些优化（比如专门新建一个图层来跑动画）
4、在动画控制上不够灵活
5、兼容性不好 
6、做动画时候建议将js与css结合

七：学习网站
http://www.w3cplus.com/css3/CSS3-animation.html