CSS3中Translate、Transform、Transition和Animation区别和联系

translate:移动，transform的一个方法。

translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离：

用法：  transform: translate(50px, 100px);

              -ms-transform: translate(50px,100px);

              -webkit-transform: translate(50px,100px);

              -o-transform: translate(50px,100px);

              -moz-transform: translate(50px,100px);

transform可以结合Transition和Animation一起使用

例如：

transform结合Transition

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, transform 2s;/*宽度变化2s,高度2s,transform中rotate旋转2s*/
}
​
div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg);
}

 

transform结合Animation

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	color:yellow;
	text-align:center;
	line-height:100px
}
 
@keyframes myfirst
{
	from {background:red;color:yellow;transform:rotateY(0deg);}
	to {background:yellow;color:red;transform:rotateY(60deg);}
}
 
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;color:yellow;transform:rotateY(0deg);}
	to {background:yellow;color:red;transform:rotateY(60deg);}
}

区别：

    1.  触发条件不同。transition通常和hover等事件配合使用，由事件触发。而animation则立即播放。

     2. 循环。 animation可以设定循环次数。

     3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 

     4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果，天作之合，比之前只能用js时爽太多。