1、CSS3 的 transform 属性 (都分 2D（x，y） 和 3D( x , y , z))其中Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。
1）translate 移动 一般用法 transform：translate（X移动的位移，Y移动的位移）或者单独对一个轴移动transform：translateX（X移动的位移）
2）scale 缩放 一般用法 transform：scale（X缩放倍数，Y缩放倍数）或者单独对一个轴移动transform：scaleX（X缩放倍数）
3）rotate旋转 一般用法 transform：rotate（angle 2D 旋转）或者单独对一个轴移动transform：rotateX（angle沿着 X 轴的 3D 旋转沿着 X 轴的 3D 旋转）
4）skew 倾斜 一般用法 transform：skew（x-angle倾斜的角度,y-angle倾斜的角度）或者单独对一个轴移动transform：skewX（沿着X 轴的 2D 倾斜转换）
2、CSS3 transition 属性（Internet Explorer 9 以及更早的版本不支持 ）
transition 属性是一个简写属性，用于设置四个过渡属性：
1）transition-property：规定设置过渡效果的 CSS 属性的名称。其中包括可以使用 ransform 的属性
2）transition-duration：规定完成过渡需要多长时间
3）transition-timing-function：规定动画的速度曲线，有以下几种：
linear规定动画从头到尾的速度是相同的。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in规定以慢速开始的过渡效果
ease-out规定以慢速结束的过渡效果
ease-in-out规定以慢速开始和结束的过渡效果
4）transition-delay：定义过渡
3、CSS3 animation 属性（Internet Explorer 9 以及更早的版本不支持 ）
animation 属性是一个简写属性，用于设置六个动画属性：
1）animation-name ：规定需要绑定到选择器的 keyframe 名称。
2）animation-duration：规定完成动画所花费的时间，以秒或毫秒计
3）animation-timing-function：规定动画的速度曲线。
4 )animation-delay：规定在动画开始之前的延迟。
5 )animation-iteration-count：规定动画应该播放的次数。
6)animation-direction：规定是否应该轮流反向播放动画。
用法：div{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove(一定要写，里面定义如何变化的)
{
from {left:0px;}
to {left:200px;}
}
总结：不难发现，其中 animation 和 transition 里面都可以写 transform ，transform只是一个静态属性。要实现动画还是要结合animation和transition来实现。
网友评论