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属性的使用示例

阅读剩余部分

相关阅读 >>

css3新增了哪些属性

resize属性怎么用

css3 简介

不支持css3的浏览器有哪些

css3怎么实现字体倒影

css3中text-shadow实现文字阴影效果(代码实例 )

css3如何实现颜色渐变效果

<basic-shape>是什么?有什么用?

css3如何实现流星雨效果?(代码示例)

css3和h5实现波纹特效实例代码

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




打赏

取消

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

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

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

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

评论

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