/* transform定义变换：
* 常用变换：translate 平移
* scale 缩放
* rotate 定义旋转
* transform可同时进行多种变换，多种变换之间空格分割：
* 例如：transform: scale(1.8,3.0) translateY(0px) rotate();
* transform-origin： 定义变形起点。
* 可选值：left/center/right top/center/bottom
* 或者，直接写X Y轴坐标点。
* 例如：transform: rotate(180deg);
* transform-origin: right bottom;
* 表示，绕左下角，旋转180度。 /* transition属性：定义过渡
* ① 参与过渡的属性，可以单独指定某个CSS属性，也可以all/none
* ② 过渡开始到过渡完成的时间，.3s .5s
* ③ 过渡的样式函数 常选 ease
* ④ 过渡开始前的延迟时间，可以省略
*
* transition属性可以同时定义多个过渡效果，用逗号分隔
* 例如：transition: color .3s ease,border .5s linear;
*/
/*[CSS3 动画的使用]
1、声明一个动画(关键帧)
@keyframes name{
from{}
to{}
}
阶段写法：
① 每个阶段用百分比表示，从0%到100%
② 起止必须设置即0%和100%或者from和to
2、在CSS选择器中，使用Animation动画属性，调用声明好的关键帧
【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)
Animation-duration 动画持续时间
Animtaion-timing-function动画速度曲线 常选ease
Animtaion-delay 动画延迟时间
Animation-iteration-count 播放次数，默认为1，无限次Infinite
Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）
* animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s……