首頁  >  問答  >  主體

transition 的使用?

1883152782-5880341e9a938_articlex.png

發現這個效果
移過去會先放大,然後最後再縮小一點 有點彈簧的感覺
這種效果該怎麼做?

我看到他transition 語法似乎是可以累加的?請問有大神能解釋原理嗎?


代言代言2797 天前1310

全部回覆(1)我來回復

  • 大家讲道理

    大家讲道理2017-01-23 15:30:47

    第一個transform使用矩陣表示。就是把translate、rotate等等之類的transform變換效果一起用一個矩陣表示了。
    第二個transition-delay表示延遲,即每種過渡在觸發後多久才開始,每一個與下面的屬性一一對應。
    第三個transition-duration表示每種屬性的過渡時間,同樣一一對應。
    第四個transition-property就是要進行過渡動畫的屬性名,有transform和透明度(加了一個兼容的transform)
    第五個transition-timing-function是過渡效果速度曲線,除了線性變化(勻速),ease-XX(提供的分成三段,先快後慢之類的),還可以使用貝塞爾曲線cubic-bezier(n,n,n,n),貝塞爾曲線就可以做出你說的回彈效果(即超出最大或最小值再彈回去)

    回覆
    0
  • 取消回覆