黑马程序员技术交流社区
标题:
CSS3使用transition属性实现过渡效果
[打印本页]
作者:
慎其独
时间:
2019-9-19 15:39
标题:
CSS3使用transition属性实现过渡效果
transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成：
transition-property：设置应用过渡的CSS属性，如background。
transition-duration：设置过渡效果花费的时间。默认是 0。
transition-timing-function：设置过渡效果的时间曲线。默认是 "ease"。
transition-delay：规定过渡效果何时开始。默认是 0。
transition-duration属性用来设置指定属性的过渡效果花费时间，可以是秒（s）或者毫秒（ms）。
transition-delay用来设置过渡效果开始的时间，默认为0，可以是秒（s）或者毫秒（ms）。如果transition-delay是负数，表示过渡效果提前开始。
transition-timing-function用来设置过渡的效果，这些效果包括：
ease - 开始慢，中间快，结束慢
ease-in - 渐入效果，慢入快出
ease-out - 渐出效果，快入慢出.
ease-in-out - 开始慢和结束慢
cubic-bezier(n,n,n,n) - 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2