CSS3动画@keyframes中translate和scale混用出错问题
生活随笔
收集整理的這篇文章主要介紹了
CSS3动画@keyframes中translate和scale混用出错问题
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在寫基于網(wǎng)頁的2048時，想讓一個元素出現(xiàn)時已經(jīng)通過translate屬性固定在指定位置，同時顯示動畫scale(0)-->scale(1)，以實現(xiàn)放大出現(xiàn)效果。
CSS代碼為
@-webkit-keyframes mymove_failed{0% {-webkit-transform:translate(50px,50px) scale(0);}100% {-webkit-transform:translate(50px,50px) scale(1);}}但是效果卻和預(yù)想的不一樣，研究后發(fā)現(xiàn)，將translate和scale的順序反過來寫，即可實現(xiàn)預(yù)期的效果，如下： @-webkit-keyframes mymove_success{0% {-webkit-transform:scale(0) translate(50px,50px);}100% {-webkit-transform:scale(1) translate(50px,50px);}}結(jié)論：同時使用translate和scale時，應(yīng)將scale放前面。
只測試了webkit內(nèi)核的，其他內(nèi)核未測試，不知道算不算一個BUG。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.success {width: 50px;height: 50px;background-color: #BBF7F7;-webkit-animation: mymove_success 1s;-webkit-animation-fill-mode: forwards;}.failed {width: 50px;height: 50px;background-color: #FF6F6F;-webkit-animation: mymove_failed 1s;-webkit-animation-fill-mode: forwards;}@-webkit-keyframes mymove_failed{0% {-webkit-transform:translate(50px,50px) scale(0);}100% {-webkit-transform:translate(50px,50px) scale(1);}}@-webkit-keyframes mymove_success{0% {-webkit-transform:scale(0) translate(50px,50px);}100% {-webkit-transform:scale(1) translate(50px,50px);}}</style> </head> <body><div class="success"></div><div class="failed"></div> </body> </html>轉(zhuǎn)載于:https://www.cnblogs.com/qs20199/p/4452275.html
總結(jié)
以上是生活随笔為你收集整理的CSS3动画@keyframes中translate和scale混用出错问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习web前端历程（十七）
- 下一篇： metero学习