文章詳情頁

transform - CSS3 transition在chrome下的BUG

瀏覽：135日期：2023-07-21 18:56:20

問題描述

一段很簡(jiǎn)單的代碼：

p{width:100px;height:100px;background:red;transition:all .5s ease;}p:hover{transform:rotate(30deg);}

在chrome 45下,鼠標(biāo)移動(dòng)到p上時(shí)，偶爾會(huì)沒有過渡效果，而是直接旋轉(zhuǎn)到30度，離開的時(shí)候也會(huì)偶爾沒有過渡效果，直接回到0度。在firefox下卻沒有這個(gè)問題。

問題解答

回答1：

.p{transition:all .3s ease}.p:hover{transition:all .3s ease;transform:rotate(360deg)}

鼠標(biāo)經(jīng)過時(shí)過渡，鼠標(biāo)離開后也要寫過渡

回答2：

寫的沒問題啊，更新瀏覽器吧

CSS

上一條：前端 - CSS3:請(qǐng)問設(shè)計(jì)圖的圓角該如何測(cè)量？下一條：前端 - CSS3問題：請(qǐng)問-webkit-background-clip屬性，需要寫在background屬性后面嗎？

相關(guān)文章：

1. nignx - docker內(nèi)nginx 80端口被占用2. 在windows下安裝docker Toolbox 啟動(dòng)Docker Quickstart Terminal 失?。?/a>3. docker鏡像push報(bào)錯(cuò)4. angular.js - angularJS在Android WebView中無法正常調(diào)后臺(tái)接口6. node.js - websocket后端用什么做比較好?7. android webview返回自動(dòng)刷新8. javascript - 使用vue2.0+vue-cli搭建了一個(gè)移動(dòng)端項(xiàng)目，頁面完成后pc端能顯示出來，但是在移動(dòng)端上訪問頁面，內(nèi)容顯示空白9. angular.js - Angular2 使用webpack 打包的loader10. javascript - react native在run-android時(shí)出現(xiàn)這個(gè)錯(cuò)誤該怎么解決？大神賜教