CSS3 Transitions, Transforms和Animation的使用
一、首先说说transition这个属性:
它有下面几个参数：
transition-property：* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration：*//指定这个过渡的持续时间
transition-delay：*//延迟过渡时间
transition-timing-function：//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
先演示一下这个属性的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
background-color: red;
}
.trans{
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
.trans:hover{
background-color: #486AAA;
color:#fff;
}
</style>
<body>
<div class="trans" style="width:100px;height:100px">
看看我是怎么变化的
</div>
</body>
</html>
左边是原状态，右边是鼠标在div上面时的状态
大多数情况下，我们都是把这几个参数写在一起的
.trans {
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
.trans:hover {
background-color: #486AAA;
color: #fff;
}
在transition的3个参数里面，前两个都比较简单，但是第3个就要说一下了transition-timing-function（指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier）
我们从字面上来看看这些属性的意义：
linear：中文翻译成线性，也不用多说，大家都知道这个匀速的变化
ease-in：直接中文翻译出来缓慢-进，就是先慢后快
ease-out：与上面的ease-in想法，缓慢出，就是先慢后快
ease-in-out ：就是缓慢进，缓慢出，就是慢进中快慢出
cubic-bezier：贝塞尔曲线问题，多数情况不会遇到，暂不研究
下面有参考图片解析：
这里有一个具体的参考例子，您可以狠狠地点击这里：不同缓动类效果demo(Opera/Chrome/Safari)
二、transform
transform指变换，使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，拉伸，压缩，旋转，偏移。见下面示例代码：
.trans_skew { transform: skew(35deg); }//倾斜
.trans_scale { transform:scale(1, 0.5); }//缩放
.trans_rotate { transform:rotate(45deg); }//旋转
.trans_translate { transform:translate(10px, 20px); }偏移
属性使用点击这里：transform些属性效果demo
transform属性要是加上transition的过渡特性，那可就是如虎添翼，樱木花道配上流川枫啊，可以产生不少美妙的火花，例如下面这个例子，关键代码如下：
.trans_effect {
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
}
.trans_effect:hover {
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);
}
webkit核心的浏览器，效果显示地点击这里：酷酷的缩放旋转动画demo
三、animations
使用:
@-webkit-keyframes resize {
0% {
padding: 0;
}
50% {
padding: 0 20px;
background-color:rgba(190, 206, 235, 0.2);
}
100% {
padding: 0 100px;
background-color:rgba(190, 206, 235, 0.9);
}
}
.anim_box:hover {
-webkit-animation-name: resize;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
效果显示地点击这里：animations水平弹性缩放变色动画
转自(更详细请参考)：http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms和animation使用简介与应用展示/
