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使用简介与应用展示/