transition 的使用?
代言
代言 2017-01-23 15:30:15
0
1
1348

1883152782-5880341e9a938_articlex.png

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

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


代言
代言

membalas semua(1)
大家讲道理

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan