2D-3D转换

变形transform

变形有

• rotate旋转
• scale缩放
• translate位移
• skew倾斜

过渡transition

过渡transition是一个复合属性，可以同时定义

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

子属性值

一般写在一起：

div {
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

动画animation

动画的使用，首先通过@(-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn;  /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）

transition和animation的区别

大部分都是相同，都是随着时间改变元素的属性值，

他们的主要区别是：

transition需要触发一个事件才能改变属性

animation不需要触发任何事件就可以实行。

transition为两帧，从from…to…

animation可以一帧一帧的通过keyframes。