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

CSS3之transition

时间:2014-05-10 07:40:21      阅读:407      评论:0      收藏:0      [点我收藏+]

标签:style   color   c   width   使用   a   

^ _ ^

首先:  transition 过渡   平滑的改变样式

   transition-property 要过渡的属性

   transition-duration 过渡的时间(s)

   transition-delay    过渡前等待时间

   transition-timing-function  过渡速度曲线

      ease | linear | ease-in | ease-out |ease-in-out | cubic-bezier

ok, 我们先来看一个例子。

   要求:鼠标悬浮2s后,宽度以“慢-快-慢”的速度曲线变为300px,高以“匀速”的速度曲线变为300px。

   #show{ transition:width 2s 2s ease,height 2s 2s linear; width:100px; height:100px; background-color:green;}

   #show:hover{width:300px;}

   <div id="show"></div>  

  下面不知道会不会显示哎(没试过)...-_-

 

PS : 当然,你也可以使用property,duration...一样样的设置...#_#

 还有一种更简便的方法:all 来代替属性,但是,这代表着等待时间,速度曲线,过渡时间都会相同。^_^

  eg : transition:all 2s 2s ease;

CSS3之transition,布布扣,bubuko.com

CSS3之transition

标签:style   color   c   width   使用   a   

原文地址:http://www.cnblogs.com/hualongbei/p/3719343.html

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