transition-timing-function属性怎么用


本文摘自PHP中文网,作者青灯夜游,侵删。

transition-timing-function属性是用来规定过渡效果的速度曲线,它允许过渡效果随着时间来改变其速度;可以实现慢速开始,然后变快,然后慢速结束等等的过渡效果。

CSS3 transition-timing-function属性

作用:transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

语法:

1

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

说明:

linear:规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。

ease:规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。

ease-in:规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。

ease-out:规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。

ease-in-out:规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

注:Internet Explorer 9 以及更早版本的浏览器不支持 transition-timing-function 属性;Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-timing-function 属性。Safari 支持替代的 -webkit-transition-timing-function 属性。

CSS3 transition-timing-function属性的使用示例

阅读剩余部分

相关阅读 >>

css nth-of-type和nth-child的区别是什么?

perspective-origin属性怎么用

css3是做什么的

html5/css3 网页加载进度条的实现,下载进度条等经典案例

动画工具dragonbones的常用术语和使用方法介绍(图)

css如何使用计数器给元素自动编号?css计数器的使用(代码示例)

outline-offset属性怎么用

transform-style属性怎么用

css3如何设置背景图片

html如何取消文本选中

更多相关阅读请进入《transition-timing-function属性》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...