css3 动画

div{
	width:300px;
	margin:50px auto;
	background-color:yellow;
	text-align:center;
}
/* css3 变形处理 */

/* rotate 顺时针旋转 */
.divRotate:hover{
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
/* 缩放 水平 垂直 方向*/
.divScale:hover{
	-webkit-transform:scale(1.5, 5);
	-moz-transform:scale(1.5, 5);
	-o-transform:scale(1.5, 5);
}

/* 倾斜 水平 垂直 方向 */
.divSkew:hover{
	-webkit-transform:skew(30deg, 30deg);
	-moz-transform:skew(30deg, 30deg);
	-o-transform:skew(30deg, 30deg);
}

/*  移动 水平 垂直 方向 */
.divTranslate:hover{
	-webkit-transform:translate(100px, -50px);
	-mox-transform:translate(100px, -50px);
	-o-transform:translate(100px, -50px);
}

/* css3 动画 */
/* transition */
.divTransition1{
	-webkit-transition:background-color 1s linear, width 1s linear;
	-moz-transition: background-color 1s linear;
	-o-transition: background-color 1s linear;
}
.divTransition1:hover{
	background-color:#00ffff;
	width:900px;
}

.divTransition2{
	-webkit-transition: background-color 1s ease-in, -webkit-transform 1s ease-in;
}
.divTransition2:hover{
	background-color: #00ffff;
	-webkit-transform:translate(-500px);
	/*-webkit-transform:rotate(360deg);*/
}

/* animations */
.divAnimations{
	background-color:red;
}

/* 动画中的关键帧  */
@-webkit-keyframes mycolor{
	0%{
		background-color: red;
		-webkit-transform: rotate(0deg);
	}
	40%{
		background-color: darkblue;
		-webkit-transform: rotate(360deg);
	}
	70%{
		background-color: yellow;
		-webkit-transform: rotate(720deg);
	}
	100%{
		background-color: red;
		-webkit-transform: rotate(1080deg);
	}
}

.divAnimations{
	-webkit-animation-name: mycolor;
	-webkit-animation-duration: 1s; /* 花费的时间 */
	-webkit-animation-timing-function: linear; /* 平滑过渡函数 */
	-webkit-animation-iteration-count: 5; /* 动画播放次数 */
}
/* 
平滑过渡函数:动画开始时到结束时的速度
linear: 同样的速度改变
ease-in: 先慢后快
ease-out: 先快后慢
ease: 慢，快， 慢
*/

<div class="divRotate">
divRotate test word
</div>


<div class="divScale">
divScale test word
</div>

<div class="divSkew">
divSkew test word
</div>

<div class="divTranslate">
divTranslate test word
</div>

<div class="divTransition1">
divTransition1 test word
</div>


<div class="divTransition2">
divTransition2 test word
</div>


<div class="divAnimations">
divAnimations test word;
</div>