transform：在使用2d或3d转换前需用transform-style申明转换的类型，preserve-3d或者preserve-2d
属性
translate():
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数移动。
rotate():
立即学习“前端免费学习笔记（深入）”；
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转.
在3D下，有rotateX():向屏幕例外翻转；rotateY()：在屏幕左右翻转，rotateZ():与2d下rotate()相同，在屏幕上顺时针或逆时针旋转。
scale():
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
skew():
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
transition:在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
必须规定两项内容：
例：transition:width 2s;
样式：ease 平缓变化
linear均匀变化
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out 缓慢开始，缓慢结束
动画：首先要先用@keyframe 动画名 的格式定义一个动画，再用animation调用动画
@keyframe myfirst{
from{}//开始效果
to{}//结束效果
}
或@keyframe myfirst{
0%{} //也可以用百分比表示动画的进程
30%{}
70%{}
100%{}
}
animation:
animation-name: myfirst; //动画名
animation-duration: 5s;//动画时长
animation-timing-function: linear;//动画变化效果，同transition
animation-delay: 2s;//动画延迟播放时间
animation-iteration-count: infinite;//infinite定义为无线循环
animation-direction: alternate;//规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state:running//规定动画是否正在运行或暂停。默认是 "running"。
