transition 的使用?

Question

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

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

Answer 1

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