首页 > 代码库 > CSS之transition
CSS之transition
transition过渡参数:
trasition-property:检索或设置对象中的参与过渡的属性(all,none,指定要进行过渡的CSS属性)
transition-duration:设置对象过渡的持续时间
transition-timing-function:检索或设置对象中过渡的动画类型:
(linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内)
transition-delay:检索或设置对象延迟过渡的时间
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS之transition</title></head><style>.test{ overflow:hidden; width:100%; margin:0; padding:0; list-style:none; }.test li{ position:relative; left:8px; width:220px; height:100px; margin:1px 5px; padding:10px; border:1px solid #ddd; background-color:#eee; color:#000; -moz-transition-property:left; -moz-transition-duration:.5s; -webkit-transition-property:left; -webkit-transition-duration:.5s; -o-transition-property:left; -o-transition-duration:.5s; -ms-transition-property:left; -ms-transition-duration:.5s; transition-property:left; transition-duration:.5s;}.test li:nth-child(1){ -moz-transition-timing-function:linear; -webkit-transition-timing-function:linear; -o-transition-timing-function:linear; -ms-transition-timing-function:linear; transition-timing-function:linear; }.test li:nth-child(2){ -moz-transition-timing-function:ease; -webkit-transition-timing-function:ease; -o-transition-timing-function:ease; -ms-transition-timing-function:ease; transition-timing-function:ease;}.test li:nth-child(3){ -moz-transition-timing-function:ease-in; -webkit-transition-timing-function:ease-in; -o-transition-timing-function:ease-in; -ms-transition-timing-function:ease-in; transition-timing-function:ease-in; }.test li:nth-child(4){ -moz-transition-timing-function:ease-out; -webkit-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; -ms-transition-timing-function:ease-out; transition-timing-function:ease-out; }.test li:nth-child(5){ -moz-transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out; transition-timing-function:ease-in-out; }.test li:hover{left:100px;}</style><body><ul class="test"> <li>linear: 线性过渡</li> <li>ease: 平滑过渡</li> <li>ease-in: 由慢到快</li> <li>ease-out: 由快到慢</li> <li>ease-in-out: 由慢到快再到慢</li></ul></body></html>
鼠标经过矩形查看过度效果:
<style></style>- linear: 线性过渡
- ease: 平滑过渡
- ease-in: 由慢到快
- ease-out: 由快到慢
- ease-in-out: 由慢到快再到慢
CSS之transition
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。