进入css3动画世界（二）

原文有动效

今天主要来讲transition和transform入门，以后会用这两种属性配合做一些动效。

注：本文面向前端css3动画入门人员，我对这个也了解不深，如本文写的有纰漏请指出，不喜勿喷。

transition属性

从中文翻译来讲，这是一个过渡属性，而这个属性的属性值有四种：

transition: property duration timing-function delay

第一个是起作用的属性名，第二个是动画持续的时间，第三个是速度效果的曲线，第四个是过渡效果延迟多久后开始。

而我经常用的是第二个属性值，其次是速度曲线。

下面我们用hover试下不同的效果：

源码：

     
      改变宽度
     
 
     
      持续3秒
     
 
     
      匀速3秒
     
 
     
      延迟1秒
     

.idiv{    float: left; width: 100px; height: 100px; background: green; margin: 5px; font-size: 20px; color: #fff; line-height: 100px; text-align: center; } #change-width{ transition: width 0.5s; } #change-width:hover{ width: 300px; } #dur-3s{ transition: 3s; } #dur-3s:hover{ width: 300px; } #linear{ transition: 0.5s linear; } #linear:hover{ width: 300px; } #delay-1s{ transition: 0.5s 1s; } #delay-1s:hover{ width: 300px; }

transform属性

transform的意思是变换。

transform的变换很多，我可能没那么深入去学，但是我们可以了解一下基本的几种动画：

translate(),rotate(),scale(),就凭这几种基本的动画加上你的想象力，就可以做出上一篇我们提到那头大象了。当然，这些transform的属性值最后还可以用一个属性值matrix()完成，具体可以去膜拜一下张鑫旭关于matrix()的描述。

我们暂时只讨论2d情况下的transform，当然还有一个skew()我没怎么用过。

translate

translate()是平移,translateX(x)沿着x轴平移,translateY(y)沿着y轴平移,translate(x,y)沿着xy轴同时平移：

     
      div1 x平移
     
 
     
      div2 y平移
     
 
     
      div3 xy平移
     

.idiv{    float: left; width: 100px; height: 100px; background: green; margin: 5px; font-size: 20px; color: #fff; line-height: 100px; text-align: center; transition: 0.5s; } #div1:hover{ transform: translateX(20px); } #div2:hover{ transform: translateY(20px); } #div3:hover{ transform: translate(20px,20px); }

rotate

rotate()是旋转，2d的情况下，rotate()只接收一个角度作为参数。

     
      顺时针旋转30°
     
 
     
      顺时针旋转60°
     
 
     
      顺时针旋转90°
     
 
     
      逆时针旋转30°
     
 
     
      逆时针旋转60°
     
 
     
      逆时针旋转90°
     

.idiv{    float: left; width: 100px; height: 100px; background: green; margin: 5px; font-size: 20px; color: #fff; line-height: 50px; text-align: center; transition: 0.5s; } #rotate30:hover{ transform: rotate(30deg); } #rotate60:hover{ transform: rotate(60deg); } #rotate90:hover{ transform: rotate(90deg); } #rotate-30:hover{ transform: rotate(-30deg); } #rotate-60:hover{ transform: rotate(-60deg); } #rotate-90:hover{ transform: rotate(-90deg); }

scale()

scale()是缩放，和translate()一样，接收1-2个参数。scaleX(x)，scaleY(y)，scale(x,y):

     
      x轴放大到1.5倍
     
 
     
      y轴缩小到0.5倍
     
 
     
      xy轴放大到2倍
     

.idiv{    float: left; width: 100px; height: 100px; background: green; margin: 5px; font-size: 20px; color: #fff; line-height: 50px; text-align: center; transition: 0.5s; } #scalex:hover{ transform: scaleX(1.5); } #scaley:hover{ transform: scaleY(0.5); } #scalexy:hover{ transform: scale(2,2); }