CSS3里有一个新东西,叫做transition,它可以实现许多属性改变时的动画效果。比如width改变,shadow改变等等。他有几种浏览器兼容性写法(以0.6秒动画为例):

 -webkit-transition: 0.6s;
 -moz-transition: 0.6s;
 -ms-transition: 0.6s;
 -o-transition: 0.6s;
 transition: 0.6s;

IE要在10或以上才可以,其它主流浏览器基本都支持。上面的CSS样式写在某个类里面,当某些属性改变时,这些改变就会以0.6s长的动画来显示效果。那么哪些效果才可以触发transition的效果呢?

Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer

表来源于W3C Transition

当上面的属性改变时,都会触发transition 的效果。那transition一共有多少种变化效果呢?这得从transition的具体用法来看。

transition-property
transition-duration
transition-timing-function
transition-delay

第一个是定义transition的触发属性,也就是设定哪些属性改变时,transition生效,默认是all,也就是上边任何列出的属性变动时,都会触发transition效果。

第二个是定义transition效果的时间,最开始的例子就是0.6s的时间,比如改变一个元素的长度,想让他慢慢用时2s时间来变长,那就把duration设定为2s。

第三个是定义效果变化时间的速率,这个的实现较为复杂,但从使用者来说简单易用,它提供了几种速率变化方式:

  1. linear,匀速变化。
  2. ease,逐渐变慢,默认值就是这个。
  3. ease-in,加速变化。
  4. ease-out,减速变化。
  5. ease-in-out,先加速再减速。
  6. cubic-bezier,自定义变化函数。

其实每种变化函数都是用贝塞尔曲线来计算的,有兴趣的可以看这里。这个东西没研究过,感觉十分复杂。这里的变化速率就是指在规定的duration时间内,动画变得快慢。其中ease就是默认的值。

第四个是定义执行transition效果前要延迟多少时间。比如设置2s,就是在执行变化前要延迟2秒钟。默认是0。

假如想定义多个属性的变化效果,中间用 “ , ” 隔开就可以,如:

    -moz-transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;
    -webkit-transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;
    -o-transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;
    transition: background 0.5s ease-in 1s,color 0.3s ease-out 1s;

下面说一个常用的效果,淡入淡出的实现。

通常隐去一个元素用的较多的就是display:none,虽然opacity:0可以让元素不见,但其实它还是存在于页面上的,如果操作不当还会挡住用户鼠标等事件的抓取。visibility属性也可以隐去一个元素,可能还有一些别的方法,但这几种对我来说是较为常用的。这些具体的区别先不说,我们就来看他们怎么与transition搭配来实现淡入淡出。

用display:none的方法隐去一个元素,当条件触发时,我们再用display:block把它显示出来。这种方法可以实现“快入快出”,但不会触发transition效果,opacity可以触发transition效果,但是隐去之后那个元素就要显示在页面上,只不过为透明,这样方法也不好。visibility直接设置visible和hidden是不会出发transition效果的,但我们看到上面的适用属性里就有visibility,查看W3C说明,原来是要用贝塞尔曲线自定义timing,直接设置visible,hidden不可以,直接设置0,1的话CSS又不识别。那我们把他们放到一起组合着用会怎么样呢。

.nav-bar {
   -webkit-transition: 0.6s;
   -moz-transition: 0.6s;
   -ms-transition: 0.6s;
   -o-transition: 0.6s;
   transition: 0.6s;
   visibility: 0;
   opacity: 0;
}

先这样初始化一个元素,然后当条件触发时,我们用Javascript或JQuery给它加上新的CSS即 “visibility: 1; opacity:1”。这样就很好的实现了transition的淡入淡出效果。如果换成display:none和opacity:0的方法呢,实验后,发现会出现transition的效果,但是极不稳定,有时候会正常显示,更多时候是直接出现或抖动。但还有个方法可以解决,就是用SetTimeout函数来延迟执行display:block后的属性操作,比如这里就是设置opacity:1,这样就可以实现了淡入淡出。但就个人来言,我用的较多的还是visibility和opacity的方法。

能实现淡入淡出的一定还有很多方法,大不了直接上Javascript硬写。不过有CSS3提供的这么好的动画效果,干嘛不用呢。

Reference:http://www.w3.org/TR/css3-transitions/#animtype-visibility