0
点赞
收藏
分享

微信扫一扫

CSS过渡

sunflower821 2022-04-13 阅读 123
css

transition

呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等。

ease:规定慢速开始,然后变快,然后慢速结束的过渡效果(默认值)。

ease-in:规定以慢速开始的过渡效果 (一开始会很慢 后面快结束的时候会加快)。

ease-out:规定以慢速结束的过渡效果 (一开始会很快 后面快结束的时候会变慢)。

ease-in-out:规定以慢速开始和结束的过渡效果。

过渡属性( transition-property )

定义转换动画的CSS属性名称。property:指定的CSS属性(width、height、background-color属性等)。一般为了方便都会使用all,all指定所有元素支持transition-property属性的样式。

过渡所需的时间( transition-duration )

定义转换动画的时间长度,即从设置旧属性到换新属性所花费的时间,单位为秒(s)。

过渡动画函数( transition-timing-function )

指定浏览器的过渡速度,以及过渡期间的操作进展情况,通过给过渡添加一个函数来指定动画的快慢方式。

过渡延迟时间( transition-delay )

指定一个动画开始执行的时间,当改变元素属性值后多长时间去执行过渡效果。

正值:元素过渡效果不会立即触发,当过了设置的时间值后才会被触发;

负值:元素过渡效果会从该时间点开始显示,之前的动作被截断,速度会变快,会出现卡顿;

0:默认值,元素过渡效果立即执行。

举报

相关推荐

0 条评论