进入css3动画世界（二）

进入css3动画世界（二）

转自：http://www.cnblogs.com/dkplus/p/7613673.html原文有动效

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

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

transition属性

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

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

源码：

<div class="idiv" id="change-width">改变宽度</div>
<div class="idiv" id="dur-3s">持续3秒</div>
<div class="idiv" id="linear">匀速3秒</div>
<div class="idiv" id="delay-1s">延迟1秒</div>

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

<div class="idiv" id="div1">div1 x平移</div>
<div class="idiv" id="div2">div2 y平移</div>
<div class="idiv" id="div3">div3 xy平移</div>

.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()只接收一个角度作为参数。

<div class="idiv" id="rotate30">顺时针旋转30°</div>
<div class="idiv" id="rotate60">顺时针旋转60°</div>
<div class="idiv" id="rotate90">顺时针旋转90°</div>
<div class="idiv" id="rotate-30">逆时针旋转30°</div>
<div class="idiv" id="rotate-60">逆时针旋转60°</div>
<div class="idiv" id="rotate-90">逆时针旋转90°</div>

.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):

<div class="idiv" id="scalex">x轴放大到1.5倍</div>
<div class="idiv" id="scaley">y轴缩小到0.5倍</div>
<div class="idiv" id="scalexy">xy轴放大到2倍</div>

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