transition
2018-06-24 02:15:42来源:未知 阅读 ()
一、语法
transition: property duration timing-function delay
transition属性是个复合属性,她包括以下几个子属性:
- transition-property :规定设置过渡效果的css属性名称
- transition-duration :规定完成过渡效果需要多少秒或毫秒
- transition-timing-function :指定过渡函数,规定速度效果的速度曲线
- transition-delay :指定开始出现的延迟时间
默认值分别为:all 0 ease 0
注:transition-duration 时长为0,不会产生过渡效果
改变多个css属性的过渡效果时:
a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}
二、子属性
- transition-property
transition-property: none |all |property;
值为none时,没有属性会获得过渡效果,值为all时,所有属性都将获得过渡效果,值为指定的css属性应用过渡效果,多个属性用逗号隔开
- transition-duration
transition-duration:time;
该属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间
- transition-timing-function
transition-timing-function:linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
该属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,解释下:
注意:值cubic-bezier(n,n,n,n)可以中定义自己的值,如 cubic-bezier(0.42,0,0.58,1)
div { width: 100px; height: 100px; background-color: orange; margin: 20px auto; border-radius: 100%; -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: 3s; transition-duration: 3s; -webkit-transition-timing-function:ease; transition-timing-function:ease; div:hover { border-radius: 0px; }
我试着换不同的值看看区别,但并不是很明显,把持续时间弄长点估计更能看出,但是因为gif太大怕传不上来所以就弄了3秒的时间。
ease:由快到慢到更慢
linear:恒速
ease-in:越来越快
ease-out:越来越慢
ease-in-out:先加速后减速
- transition-delay
这个属性没什么说的了,就是过渡效果开始前的延迟时间,单位秒或者毫秒
再来个栗子:
div { width: 200px; height: 200px; background: red; margin: 20px auto; -webkit-transition-property: background; transition-property:background; -webkit-transition-duration:.5s; transition-duration:.5s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-delay: .18s; transition-delay:.18s; } div:hover { background: #000; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:快来一起实现属于自己的自行车吧!
下一篇:HTML简介
- 6.动画 2020-05-24
- sass基础语法--变量和引用+变量作用域+import 2020-03-29
- HTML元素语法和嵌套规则及注意事项 2020-03-25
- markdown基本语法 2020-02-29
- html基本介绍,了解html与css,html语法和结构 2020-02-28
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash