html开发技巧之css3动画世界

进入css3动画世界（二）

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

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

transition属性

从中文翻译来讲，这是一个过渡属性，而这个属性的属性值有四种：
transition: property duration timing-function delay
第一个是起作用的属性名，第二个是动画持续的时间，第三个是速度效果的曲线，第四个是过渡效果延迟多久后开始。
而我经常用的是第二个属性值，其次是速度曲线。

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

源码：

改变宽度

.ip{
    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轴同时平移：

p1 x平移
p2 y平移
p3 xy平移

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

rotate

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

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

.ip{
    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倍

.ip{
    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);
}