css3 transform transition相關(guān)問題
問題描述
<style> .a{-webkit-transition: 1s 0s all ease;-o-transition: 1s 0s all ease;-moz-transition: 1s 0s all ease;transition: 1s 0s all ease;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); }</style><p style='height: 300px;width: 300px;background: red'></p>
就這樣 為什么頁(yè)面顯示出來直接放大了1.1倍 1秒的過濾怎么就沒有？
問題解答
回答1：既然是過渡，就應(yīng)該有一個(gè)狀態(tài)的變化，題主這樣設(shè)置就是讓.a的初始狀態(tài)就為1.1倍。如果你給.a:hover設(shè)置樣式就可以看到效果了：
.a { -webkit-transition: 1s 0s all ease; -o-transition: 1s 0s all ease; -moz-transition: 1s 0s all ease; transition: 1s 0s all ease;}.a:hover { -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}
題主如果是想要一加載就開始動(dòng)畫的話，應(yīng)該使用animation來實(shí)現(xiàn)。
回答2：我猜題主想要的可能是這種效果?不過這個(gè)應(yīng)該算動(dòng)畫不算過渡吧www
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' ''> <html xmlns=''> <head> <meta http-equiv='Content-Type' content='text/html; charset=gb2312' /> <style> @keyframes myfirst{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } @-moz-keyframes myfirst /* Firefox */{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } @-webkit-keyframes myfirst /* Safari 和 Chrome */{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } @-o-keyframes myfirst /* Opera */{ from {background: red;} to {background: yellow;-webkit-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);transform: scale(1.1,1.1); } } .a{ width: 300px; height: 300px; background: red; -webkit-animation: myfirst 1s; -o-animation: myfirst 1s; -moz-animation: myfirst 1s; animation: myfirst 1s; } </style> </head> <body> <p class='a'></p></body> </html> 回答3：
W3C標(biāo)準(zhǔn)中對(duì)css3的transition這是樣描述的： “css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值。”所以并不是什么時(shí)候都能看到動(dòng)畫效果的，在頁(yè)面剛加載 解析css 渲染頁(yè)面的時(shí)候 并沒有觸發(fā)過渡效果。如果想實(shí)現(xiàn)頁(yè)面剛加載就出發(fā) transition 的效果的話，可以考慮 用一下 調(diào)用一次 animation；或者 用js 獲取頁(yè)面加載狀態(tài)；
僅供參考...
相關(guān)文章：
1. docker-compose中volumes的問題2. java - SSH框架中寫分頁(yè)時(shí)service層中不能注入分頁(yè)類3. boot2docker無法啟動(dòng)4. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.5. javascript - vue生成一維碼?求助！！！！！急6. nignx - docker內(nèi)nginx 80端口被占用7. javascript - mock.js可以存儲(chǔ)數(shù)據(jù)嗎8. docker網(wǎng)絡(luò)端口映射，沒有方便點(diǎn)的操作方法么？9. javascript - js如何獲取app保存的TOKEN？10. 老師，按tab鍵不起作用怎么回事
網(wǎng)公網(wǎng)安備