CSS3+HTML5 订阅所有【CSS3+HTML5】的日志

css3 transition 动画

作者:rainweb 日期:2012-02-20

字体大小: 小 中 大

transition是css3中新添加的特性，在W3C标准中是这样描述 的：“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”

请用现代浏览器查看demo，否者后果自负

一、transition语法：transition:[<transition-property>||<transition-duration>|| <transition-timing-function>||<transition-delay>|| <transition-property>||<transition-duration>|| <transition-timing-function>||<transition-delay>]

transition主要包含四个属性值：执行变换的属性transition-property，变换延续的时间transition- duration，在延续的时间段内，变换的速率变化transition-timing-function，变换延迟时间transition- delay。

1、变化的属性：transition-property

transition-property : none | all | [<IDENT>][','<IDENT>]* ;

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其中none没有属性改变；all所有属性都改变，它也是默认值；indent元素属性名，其对应的类型如下：

2、动画时间：transition-duration

transition-duration : <time> [,time]*;

transition-duration是动画执行的时间，单位为s（秒），比如0.1秒可以写成“0.1s”或者“.1s”，它可以作用于任何元素，包括:before和:after伪元素。

3、动画执行的方式：transition-timing-function

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;

ease：逐渐慢下来；linear：匀速；ease-in：由慢到快；ease-out：由快到慢；ease-in-out：先慢到快再到慢。

4、动画延迟：transition-delay

transition-delay : <time> [,time]* ;

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition动画效果，取值同transition-duration。

二、实例动画

step1：改变字体颜色

XML/HTML代码
  1.  <h1><a href="http://www.rainwe.cn">rainweb</a></h1>  
  2.   
  3. h1 a{  
  4.     color:#03c;  
  5.     text-decoration:none;  
  6.     -webkit-transition:color .5s ease-in-out;  
  7.     -moz-transition:color .5s ease-in-out;  
  8.     -o-transition:color .5s ease-in-out;  
  9.     transition:color .5s ease-in-out;  
  10.   
  11. }  
  12. h1 a:hover{  
  13.     color:#f60;  
  14. }  

 

step2：改变背景颜色

XML/HTML代码
  1. <h2>专注于web前端开发</h2>  
  2.   
  3. h2:hover{  
  4.     -webkit-transition:background-color 0.5s linear;  
  5.     -moz-transition:background-color 0.5s linear;  
  6.     -o-transition:background-color 0.5s linear;  
  7.     transition:background-color 0.5s linear;  
  8.     background-color:#ccc;  
  9. }  

 

step3：转换多个属性

作用transition进行多个属性转换：

XML/HTML代码
  1. <div class="div">  
  2.  售票员，给我一张去2011年的车票呗，我把我爱的人丢那了。看到这句话，莫名一阵伤感！
  3. </div>  
  4.   
  5. .div {  
  6.     padding:5px;  
  7.     color:#fff;  
  8.     background-color:#666;  
  9.     -webkit-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;  
  10.     -moz-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;  
  11.     -o-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;  
  12.     transition:color 1s ease-in-out, background-color 0.5s ease-in-out;  
  13. }  
  14. .div:hover {  
  15.     color:#333;  
  16.     background-color:#ccc;  
  17. }  

 

渐变效果还有另外一种写法：

XML/HTML代码
  1. .div {  
  2.     -webkit-transition:all 1s ease-in-out;  
  3.     -moz-transition:all 1s ease-in-out;  
  4.     -o-transition:all 1s ease-in-out;  
  5.     transition:all 1s ease-in-out;  
  6. }  
 

第一种写法里面把各个属性都写了出来，而第二种里面用all代替，也就是变换所有属性。

前三个为transition动画实例，后四个为transform实例。




[本日志由 rainweb 于 2012-02-20 02:58 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.