問題描述

想問問transition 該如何使用？

我是去 https://santatracker.google.c...

發(fā)現(xiàn)這個(gè)效果移過去會(huì)先放大，然後最後再縮小一點(diǎn) 有點(diǎn)彈簧的感覺這種效果該怎麼做？

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

問題解答

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

附上一個(gè)做貝塞爾曲線的地址

補(bǔ)充：1.transition只需要寫一個(gè)，寫在常態(tài)裏則移入移出都有transition過渡效果。寫在:hover裏則只有移入有過渡//修改了你評(píng)論中的代碼

.reat { width: 200px; height: 200px; border-radius: 50%; opacity: 0; transform: rotate(15deg); background-color: red; /*貝塞爾曲線選取的不合適，無回彈,第四個(gè)參數(shù)要超出最大值 (即1.51)*/ transition: transform 1s cubic-bezier(.17,.67,.48,1.51), opacity 1s ease;} .reat:hover { /*同名屬性要寫在一起，否則後面的會(huì)覆蓋前面的*/ transform: scale(1.8) rotate(0); opacity: 1; box-shadow: 4px 14px 0 rgba(0, 0, 0, .125);}回答2：

你可以參考一下這篇文章CSS中的transform與transition上面有詳細(xì)的信息

transition:all 1s;過渡效果，1秒執(zhí)行完全部動(dòng)畫。