首页 > 代码库 > CSS3之transition
CSS3之transition
^ _ ^
首先: 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>
下面不知道会不会显示哎(没试过)...-_-
<style></style>PS : 当然,你也可以使用property,duration...一样样的设置...#_#
还有一种更简便的方法:all 来代替属性,但是,这代表着等待时间,速度曲线,过渡时间都会相同。^_^
eg : transition:all 2s 2s ease;
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。