码迷,mamicode.com
首页 > Web开发 > 详细

CSS3:Transition属性详解

时间:2014-05-01 01:12:52      阅读:518      评论:0      收藏:0      [点我收藏+]

标签:com   http   class   div   img   c   size   t   tar   sp   ext   

Transition属性主要是用来对某个CSS属性的变化过程进行控制,官方的介绍是”CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.“。而我个人则简单地理解为”在某个时间段内,平滑地改变某个CSS属性。“。

Transition又包含了四个子属性,分别为property、duration、timing-function、delay。下面来一一介绍,在最后会给出一个简单的实例和使用方法说明。

1. transition-property:

property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时,则设置property值为background。

2. transition-duration:

duration针对了过渡效果的持续时间。

3. transition-timing-function:

timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效,有多种特效展示。这里得涉及到一个学术性的话题:貝茲曲線。说实话,我也没搞的太明白,但W3C给出了一张曲线图,一看就明白了(后附图)。

介绍下预留的几个特效:
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]
其中的cubic-bezier即为貝茲曲線中的绘制方法。先来看图:mamicode.com,码迷图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。

参考阅读:
W3C: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
貝茲曲線:http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

4. transition-delay:

duration针对了过渡效果的延迟执行时间。

5. 代码演示:

1). 过渡单个属性:
 transition-property:opacity;
transition-duration:2s;
transition-timing-function:ease-in;
transition-delay:0;

2). 过渡多个属性:
[1]. 上下一一对应型:
 transition-property:opacity left;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

此时:opacity过渡时间为2s,left过渡时间为4s。

[2]. 循环对应型:
 transition-property:opacity left width height;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

此时:opacity和width过渡时间为2s,left和height过渡时间为4s。

3). transition简写模式:
顺序为:transition-property transition-duration transition-timing-function transition-delay 
  /*单个属性:*/
-moz-transition:background 0.5s ease-out 0s;
/*多个属性:*/
-moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;

HTML代码: 
 
 <a href="http://www.ihiro.org/" target="_blank">ihiro.org</a>

CSS代码: 
  <a href="http://www.ihiro.org/" target="_blank">ihiro.org</a>
a { display:block; width:160px; height:30px; line-height:30px; text-align:center; padding:10px; background:#33589f; color:#fff; text-decoration:none; text-transform:uppercase;
    /*只有当鼠标移出后才处理*/
    -moz-transition:background 0.2s linear 0s;
}
 
a:hover { background:#263c7b; color:#f60;
    text-shadow:2px 2px 10px #f00;
    /* 只有当鼠标移入时才处理
       注:若a:hover中不写transition,则会继承a中的transition */
    /*
    1. 单个属性
        -moz-transition:background 0.5s ease-out 0s;
    2. 多个属性:
       -moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;
    */
    -moz-transition:background 0.5s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;

CSS3:Transition属性详解,码迷,mamicode.com

CSS3:Transition属性详解

标签:com   http   class   div   img   c   size   t   tar   sp   ext   

原文地址:http://www.cnblogs.com/snowbaby-kang/p/3701063.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!