《前端》css之transition-2020年6月14日

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> <transition-timing-function> <transition-delay>

这种写法是比较简单的写法,我们也可以同时写多个Transition效果,每个效果按照固定属性的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章