css3 transform transition 动画效果

直接记住这几个transition的配置，就可以做出来漂亮的动画效果了

1.变形——旋转 rotate('旋转值’deg) ，rotate()函数只是旋转，而不会改变
元素的形状（旋转值为正顺时针旋转，旋转值为负逆时针旋转）

transform: rotate(45deg);

2.变形——扭曲 skew() skew()函数不会旋转，而只会改变元素的形状。
skew(x,y)使元素在水平和垂直方向同时扭曲（X 轴和 Y 轴同时按一定的角度值进行扭
曲变形，单值为单方向扭曲，先水平后垂直，也可单独设skewX()，skewY());

transform:skew(45deg,45deg);

3.变形——拉伸压缩 scale() 缩放 scale()函数让元素根据中心原点对对象进行缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（单值为单方向，先水平后垂直，
也可单独设scaleX()，scaleY());
注： 0<X，Y<1 为缩放 X，Y > 0 为放大；

transform: scale(1.5，1.5);

4.变形——位移 translate(); translate()函数可以将元素向指定的方向移动.
translate(x,y)水平方向和垂直方向同时移动，（单值为单方向，先水平后垂直，
也可单独设translateX()，translateY());

transform: translate(100px,100px);

((学完上面差不多就可以做动画了))
5.动画——过度属性 transition通过某事件的触发，平滑地改变 CSS 的属性值,达到动画效果

1.在 CSS 中创建简单的过渡效果可以从以下几个步骤来实现：
	第一，初始化默认样式；
	第二，声明样式的最终样式；
	第三，在默认样式中通过添加过渡函数。
2.再了解一下这几个默认属性：
	transition-property:指定过渡或动态模拟的CSS属性 例：transition-property: border-radius;
	transition-duration:指定完成过渡所需的时间 例：transition-duration: .5s
	transition-timing-function:指定过渡函数,指的是过渡的“缓动函数”。主要用来指定浏览器的过渡
速度，以及过渡期间的操作进展情况
	transition-delay:指定开始出现的延迟时,主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
3.Keyframes 被称为关键帧，可以以百分比为单位去生成一套动画效果
例：
	@keyframes changecolor{
	    0%{
	    background: red;
	    }
	    50%{
	        background-color: yellow;
	    }
	    100%{
	    background: green;
	    }
	}
4.动画效果设计好了，则需要调用动画（这里以div加动画为例）
	div:hover {
		animation-name: changecolor;   animation-name 属性主要是用来调用@keyframes 定义好的动画
		animation-duration: 10s;	animation-duration 主要用来设置 CSS3 动画播放时间
		animation-timing-function: ease-in-out;  animation-timing-function 属性主要用来设置动画播放方式。
		animation-delay: .1s;  animation-delay 属性用来定义动画开始播放的时间，用来触发动画播放的时间点。
		animation-iteration-count:5; animation-iteration-count 属性主要用来定义动画的播放次数。如果取值为 infinite，动画将会无限次的播放
		animation-direction:alternate; animation-direction 属性主要用来设置动画播放方向，其主要有两个值：normal、alternate（normal 是默认值，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。）
		注意：Chrome 或 Safari 浏览器，需要加入-webkit-前缀！
		animation-play-state:paused; animation-play-state 属性主要用来控制元素动画的播放状态。其主要有两个值：running 和 paused，不予细说。
	}