css - transition 的使用?
問題描述
想問問transition 該如何使用?
我是去 https://santatracker.google.c...
發(fā)現(xiàn)這個效果移過去會先放大,然後最後再縮小一點 有點彈簧的感覺這種效果該怎麼做?
我看到他transition 語法似乎是可以累加的?請問有大神能解釋原理嗎?
問題解答
回答1:第一個transform使用矩陣表示。就是把translate、rotate等等之類的transform變換效果一起用一個矩陣表示了。第二個transition-delay表示延遲,即每種過渡在觸發(fā)後多久才開始,每一個與下面的屬性一一對應(yīng)。第三個transition-duration表示每種屬性的過渡時間,同樣一一對應(yīng)。第四個transition-property就是要進行過渡動畫的屬性名,有transform和透明度(加了一個兼容的transform)第五個transition-timing-function是過渡效果速度曲線,除了線性變化(勻速),ease-XX(提供的分成三段,先快後慢之類的),還可以使用貝塞爾曲線cubic-bezier(n,n,n,n),貝塞爾曲線就可以做出你說的回彈效果(即超出最大或最小值再彈回去)
附上一個做貝塞爾曲線的地址
補充:1.transition只需要寫一個,寫在常態(tài)裏則移入移出都有transition過渡效果。寫在:hover裏則只有移入有過渡//修改了你評論中的代碼
.reat { width: 200px; height: 200px; border-radius: 50%; opacity: 0; transform: rotate(15deg); background-color: red; /*貝塞爾曲線選取的不合適,無回彈,第四個參數(shù)要超出最大值 (即1.51)*/ transition: transform 1s cubic-bezier(.17,.67,.48,1.51), opacity 1s ease;} .reat:hover { /*同名屬性要寫在一起,否則後面的會覆蓋前面的*/ transform: scale(1.8) rotate(0); opacity: 1; box-shadow: 4px 14px 0 rgba(0, 0, 0, .125);}回答2:
你可以參考一下這篇文章CSS中的transform與transition上面有詳細(xì)的信息
回答3:transition:all 1s;過渡效果,1秒執(zhí)行完全部動畫。
相關(guān)文章:
1. 注冊賬戶文字不能左右分離2. JavaScript事件3. html5 - ElementUI table中el-table-column怎么設(shè)置百分比顯示。4. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能5. python - 使用readlines()方法讀取文件內(nèi)容后,再用for循環(huán)遍歷文件與變量匹配時出現(xiàn)疑難?6. javascript - ES6標(biāo)準(zhǔn)入門中l(wèi)et命令提到的for循環(huán)打印i是10,如果不用let怎么替換?7. showpassword里的this 是什么意思?代表哪個元素8. 對mysql某個字段監(jiān)控的功能9. python - 為什么正常輸出中文沒有亂碼,zip函數(shù)之后出現(xiàn)中文編程unicode編碼的問題,我是遍歷輸出的啊。10. html - vue項目中用到了elementUI問題
