css3中通过这三者可以实现很多的奇妙效果，这三者的名字是：转换（transform）；（过渡）transitition；（动画）animation。
先说他们的共同点：
这三者都有不同程度的浏览器兼容问题，如果要兼容所有的浏览器，需要加很多前缀；（css3的大部分效果都有这个问题）
使用transform属性时：
transform:rotate(7deg);
-ms-transform:rotate(7deg);/* IE 9 */
-moz-transform:rotate(7deg);/* Firefox */
-webkit-transform:rotate(7deg);/* Safari 和 Chrome */
-o-transform:rotate(7deg);/* Opera */
使用transition属性时：
transition: width 2s;
-moz-transition: width 2s;/* Firefox 4 */
-webkit-transition: width 2s;/* Safari 和 Chrome */
-o-transition: width 2s;/* Opera */
使用animation属性时：
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;/* Safari 和 Chrome */
继续说他们的不同点：
transform只是呈现了一种静态的表现形式，它拥有自己的小属性； 实现偏移transform:translate（x，y）；实现旋转transform:ratote（xdeg）; 实现放大缩小transform:scale(x,y)； 此处列举的这三个属性都是2D的，当然也有3D的，只是使用可能不是那么多。
transition则是当元素的css发生改变时（不论是css伪类事件，还是js控制导致的变化，此处可以和transform进行配合），对改变的属性呈现一种过渡效果。对于这种过渡效果有四个属性：
transition-property过渡的属性（具体属性 | all）；
transition-duration过渡的时间（Xs）；
transition-timing-function过渡时时的速度曲线（linear线性匀速 | ease默认，先快后慢 | ease-in动画以低速开始 |ease-out动画以低速结束 | ease-in-out以低速开始和结束）；
transition-delay过渡时的延迟时间（Xs）；
可以用缩写的形式一块在transition后进行定义，最少定义两个参数（属性和时间）
animation是指我们定义的动画。这需要我们先定义一个动画，继而才能使用这个动画。用
@keyframes 动画名 {
from {属性：值；}to {属性：值；} /*此处可以和transform进行配合*/
}
@-webkit-keyframes /*在Safari 和 Chrome中时，keyframes有兼容格式*/
后面再用animation来调用定义的函数，animation的动画效果也有多个属性：
animation-name动画名；
animation-duration动画时间（Xs）；
animation-timing-function动画速度曲线（linear线性匀速 | ease默认，先快后慢 | ease-in动画以低速开始 |ease-out动画以低速结束 | ease-in-out以低速开始和结束 |）；
animation-delay动画延迟时间（Xs）；
animation-iteration-count动画次数（number / infinite无限次）；
animation-direction是否反向播放（normal | alternate）
这些属性可以用缩写的形式一块在animation后进行定义，最少定义两个参数（动画名和时间）
以上，欢迎大家拍砖O(∩_∩)O
网友评论