CSS3中有transform、transition、animation这三个属性，一直很容易混淆，今天特意拿出来是有原因的。变换变换可以移动、缩放、旋转、拉长或拉伸元素。transform分为2D转换和3D转换。由于目前浏览器对3D转换支持不好，下面主要讲解2D转换。2D转换方法translate(x,y)进行移动，参数为像素值translateX(n)translateY(n)rotate(angle)进行旋转，参数为角度scale(x,y)进行缩放，参数为多个scaleX(n)scaleY(n)skew(x-angle,y-angle)倾斜，参数是角度skewX(angle)skewY(angle)matrix()参数是一个六值矩阵，可以描述以上所有的变换，并用于复杂的变换transform-origin此外，还有一个transform-origin属性，用于改变变换后元素的位置，一般与rotate()结合使用。div{transform:rotate(45deg);transform-origin:20%40%;-ms-transform:rotate(45deg);/*IE9*/-ms-transform-origin:20%40%;/*IE9*/-webkit-transform:rotate(45deg);/*Safari和Chrome*/-webkit-transform-origin:20%40%;/*Safari和Chrome*/-moz-transform:rotate(45deg);/*Firefox*/-moz-transform-origin:20%40%;/*Firefox*/-o-transform:rotate(45deg);/*Opera*/-o-transform-origin:20%40%;/*Opera*/}transform-origin的参数可以是：left,right,center,length,%。transitionTransition该属性与:hover配合使用，实现鼠标进入动画效果。要实现转场，必须指定两件事：指定要给哪个CSS属性添加效果，指定效果持续时间，转场属性属性描述，转场的简写属性，在一个属性中设置四个转场属性。transition-property指定应用过渡的CSS属性的名称。transition-duration定义过渡效果需要多长时间。默认为0。transition-timing-function指定过渡效果的时序曲线。默认值为“轻松”。transition-delay指定过渡效果何时开始。默认为0。示例div{width:100px;height:100px;background:yellow;transition-property:width1slinear2s;/*Firefox4*/-moz-transition:width1slinear2s;/*Safari和Chrome*/-webkit-transition:width1slinear2s;/*Opera*/-o-transition:width1slinear2s;}div:hover{width:200px;}animation动画该属性与@keyframes结合使用。@keyframes@keyframes规则用于创建动画。在@keyframes中指定CSS样式会创建一个从当前样式逐渐变为新样式的动画。@keyframesmyfirst{from{background:red;}to{background:yellow;}}@-moz-keyframesmyfirst/*Firefox*/{from{background:red;}to{background:yellow;}}@-webkit-keyframesmyfirst/*Safari和Chrome*/{from{background:red;}to{background:yellow;}}@-o-keyframesmyfirst/*Opera*/{from{background:red;}to{background:yellow;}}@keyframes也可以使用特定的百分比@keyframesmyfirst{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}在@创建一个关键帧中的动画，将它绑定到一个选择器，否则它不会动画。通过指定至少两个以下CSS3动画属性，可以将动画绑定到选择器：指定动画的名称指定动画的持续时间div{animation:myfirst5s;-moz-animation:myfirst5s;/*Firefox*/-webkit-animation:myfirst5s;/*Safari和Chrome*/-o-animation:myfirst5s;/*Opera*/}动画属性属性说明@keyframes指定动画。animation除animation-play-state之外的所有动画属性的简写。animation-name指定@keyframes动画的名称。animation-duration指定动画完成一个周期所需的秒数或毫秒数。默认为0。animation-timing-function指定动画的速度曲线。默认值为“轻松”。animation-delay指定动画开始的时间。默认为0。animation-iteration-count指定动画播放的次数。默认为1。animation-direction指定动画是否在下一个循环中反向播放。默认值为“正常”。animation-play-state指定动画是运行还是暂停。默认值为“正在运行”。animation-fill-mode指定对象在动画时间之外的状态。
