css3 transition

浏览数：24 / 时间：2015年06月09日

transition
语法：[<’transition-property’>||<’transition-duration’>||<’transition-timing-function’>|| <transition-delay>[,[<’transition-property’>||<’transition-duration’>||<’transition-timing-function’> || <transition-delay>] ]*

由于transition是一个简写属性，它没有初始值，但是它所代表的四个属性都有初始值：
1) transition-property: all 表示元素所有属性值发生改变时都会执行transition效果。
它还可以取值none，表示没有属性发生改变，或者指定元素属性名表示某属性发生改变。
2) transition-duration: 0s 表示动画的持续时间是0s, 也即是实时的。
它还可以取值为其他的数字类型，表示动画的持续时间为多少秒。
3) transition-timing-function: ease 表示元素属性值改变的速率是逐渐变慢的。
它还可以取值linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(加速再减速) cubic-bezier(自定义时间曲线)来指定动画改变属性值的速率。
Ÿ4) transition-delay: 0s 表示元素执行动画的延迟时间为0s, 即立即执行，没有延时。它还可以取值为其他的数字类型，表示动画延迟多少秒执行。

<div style="height:150px;">
  <h2><span></span>热门网站</h2>
    <ul>
      <li><a href="http://info.3g.qq.com/g/s?aid=index&g_f=2543">腾讯</a></li>
      <li><a href="http://m.sohu.com/?_trans_=000012_qq_dh">搜狐</a></li>
      <li><a href="http://3g.163.com/links/3810">网易</a></li>          
    </ul>
</div>

.main{ overflow:hidden; -webkit-transition: all 0.5s ease-in 0s; -moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s; transition: all 0.5s ease-in 0s; background:#fff;}
.main .close{ height:0!important;}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css3 transition