第九章 利用CSS3制作网页动画

一.CSS3变形transform
	
	1.平移：translate(x,y)	translateX(x)	translateY(y)		
		
		注意：如果想只向X轴平移那么可以translateX，如果想只向X轴平移那么可以translateY，X和Y不能共存。如果想向两个方向平移，那么使用translate
		
					   y轴
						^	-
						|
						|
						|	
						|
						|
						|
	-	--------------------------------->	+	x轴
						|
						|	
						|
						|
						|
						|	+
	
	2.缩放：	scale(x放大倍数，y放大倍数)		scaleX(x放大倍数)	scaleY(Y放大倍数)
		
		注意：如果想放大那么写大于1的数，如果想缩小，那么写小于1的数
		
	3.倾斜：	skew(x轴倾斜角度，y轴倾斜角度)	skewX(x轴倾斜角度)	skewY(y轴倾斜角度)
	
		注意：x轴为正值按照逆时针x轴为负值按照顺时针，y轴正值为顺时针倾斜，y轴负值为逆时针倾斜
	
	4.旋转：	rotate(旋转角度)	正值为顺时针旋转，负值为逆时针旋转
	
二.CSS3过渡
	
	transition:需要过度的属性 过度时间(s) 过度动画函数 延迟时间(s)
	
		过渡动画函数：
			ease：速度由快到慢（默认值）
			linear：速度恒速（匀速运动）
			ease-in：速度越来越快（渐显效果）
			ease-out：速度越来越慢（渐隐效果）
			ease-in-out：速度先加速再减速（渐显渐隐效果）
			
	img:hover{
            transform: rotate(90deg) scale(1.2);
            transition: all 1s linear 1s;
    }
	
	过渡处罚机制：
		伪类触发
			：hover
			：active
			：focus
			：checked

		媒体查询：通过@media属性判断设备的尺寸，方向等
		JavaScript触发：用JavaScript脚本触发
		
三.CSS3动画

	1.设置关键帧
		@keyframes 关键帧名称{
            0%{
                width: 0;
                transform: scale(1.5);
            }
            33%{
                width: 60px;
                transform: translate(200px,0px) scale(2);
            }
            66%{
                width: 120px;
                transform: translate(300px,0px);
            }
            100%{
                width: 200px;
                transform: translate(400px,0px);
            }
        }
	2.调用关键帧
		animation: 关键帧名称 执行时间 播放方式 延迟时间 播放次数;