本文介绍了CSS中的transition属性，它用于创建元素属性变化的过渡动画。详细讲解了transition-property、transition-duration、transition-timing-function和transition-delay四个子属性，以及它们的作用和常见值。通过设置这些属性，可以实现元素在特定时间内的平滑过渡效果。
transition是一个用于动画过度的属性，然而transiton属性只不过是一个简写属性，用于设置四个过度属性，这四个过度属性分别是:
- transition-property (执行变换的属性 )
- transition-duration (变换延续时间)
- transition-timing-function (延续时间内，变换速率的变化)
- transition-delay (变换延迟时间)
下面来分别介绍一下各个属性：
1、transition-property 即用来指定当元素其中一个属性改变是执行transition效果。
值:none(没有属性改变)，all(所有属性都改变)或指定某一元素(比如color，background等属性)。
2、transition-duration 是动画执行的时间，单位(s)比如"0.1s"也可以写成".1s"，它可以作用于任何元素，包括before和after伪元素。
3、transition-timing-function 动画的执行方式
值:ease(逐渐慢下来)，linear(匀速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(该值允许你去自定义一个时间曲线)。
4、transition-delay 动画延时时间基本用法与duration相同。
语法:
transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
