属性详解
transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现。它是一个合并属性,是由以下四个属性组合而成:
示例:
button{ transition: background 1s; -webkit-transition: background 1s; /* Safari */ }
定义transition属性时,transition-property和transition-duration是必选,其他两个为可选。
transition-property和transition-duration
transition-property用来指定应用过渡效果的CSS属性,这些属性包括(可能不全):
transition-duration属性用来设置指定属性的过渡效果花费时间,可以是秒(s)或者毫秒(ms)。
transition-delay和transition-timing-function
transition-delay用来设置过渡效果开始的时间,默认为0,可以是秒(s)或者毫秒(ms)。如果transition-delay是负数,表示过渡效果提前开始。
transition-timing-function用来设置过渡的效果,这些效果包括:
示例:
button{ transition: background 1s ease-in-out 2s; -webkit-transition: background 1s ease-in-out 2s; /* Safari */ }
多属性
对于多个属性,各个属性的效果以逗号隔开:
button{ transition: background 1s ease-in-out 2s, width 2s linear; -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */ }
兼容性
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
触发
需要注意的是,过渡效果是需要之前已经定义好了属性,过渡效果通过触发来应用,比如:hover, :focus, and :active等。
总结
以上所述是小编给大家介绍的CSS3使用transition属性实现过渡效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
之前写过一篇移动端适配的文章,很长,内容太多,看得容易凌乱,重新写个通熟易...
官方文档 https://developers.weixin.qq.... index.wxml view class="container"...
简介: 2021年5月15日,以“相信边缘的力量”为主题的全球边缘计算大会在深圳成...
因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1、红色区域数据需...
qq空间有欢迎动画,想要给网页制作一个开场动画效果,该怎么制作呢?下面我们就...
取消 ul li 前面的图标 1 清空Value值 1 设置Value值 1 清空标签中间值 1 设置标...
在奥运会期间, IE 8 Beta 2将会发布,而且随着英文版的发布,中文版也会在第一...
前言 seata是阿里巴巴研发的一套开源分布式事务框架,提供了AT、TCC、SAGA 和 XA...
合理调用CSS 进行网页设计时,运用样式表单CSS来对页面元素进行布置,可以大大地...
接口和类型别名非常相似,在大多情况下二者可以互换。在写TS的时候,想必大家都...