CSS3 transition、 transform和animation

CSS transition: 控制动画速度的方法
举例：

transition:  all 1s;
transition:width 2s, height 2s, background-color 2s, transform 2s;

CSS transform：该属性允许我们对元素进行旋转、缩放、移动或倾斜
举例：

transform: translate(30px, 20px) rotate(20deg);  //倾斜

• translate(x,y) 定义 2D 转换。
• translate3d(x,y,z) 定义 3D 转换。
• scale(x,y) 定义 2D 缩放转换。
• scale3d(x,y,z) 定义 3D 缩放转换。
• rotate(angle) 定义 2D 旋转，在参数中规定角度。
• rotate3d(x,y,z,angle) 定义 3D 旋转。

CSS transition-duration: time：规定完成过渡效果需要花费的时间
CSS animation：动画属性

• animation-name 规定需要绑定到选择器的 keyframe 名称。
• animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function 规定动画的速度曲线。
• animation-delay 规定在动画开始之前的延迟。
• animation-iteration-count 规定动画应该播放的次数。
• animation-direction 规定是否应该轮流反向播放动画。

举例：

 /* 声明动画 关键帧 @keyframes 动画名称{} */
			@keyframes move{
				from{
					left: 0;
					background-color: pink;
				}
				to{
					left: 1000px;
					background-color: yellow;
				}
			}
 /*调用动画 */
				/* animation：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
				animation: move 2s ease 0s infinite alternate;
				-webkit-animation: move 2s ease 0s infinite alternate;

请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。