Chrome中的CSS3轉換

Question

我剛剛注意到一些CSS3轉換已停止在Chrome中工作（幾周前檢查時正在工作） - 在Safari中似乎很好。 我已經明確使用過這段代碼，但也許我這次忽略了一些東西？

目的只是爲了有懸停平穩過渡：

Demo

HTML

<div></div>  

CSS

  div{ 
    height:100px; 
    width:100px; 
    background:red; 

-webkit-transition-duration: 0.3s;  
-webkit-transition-timing-function: ease-in-out; 
-moz-transition-duration: 0.3s;  
-moz-transition-timing-function: ease-in-out; 
transition-duration: 0.3s;  
transition-timing-function: ease-in-out; 
} 

div:hover{ 
    right:-10px; 
    position:relative; 
    height:100px; 
    width:100px; 
    background:red; 

-webkit-transition-duration: 0.3s;  
-webkit-transition-timing-function: ease-in-out; 
-moz-transition-duration: 0.3s;  
-moz-transition-timing-function: ease-in-out; 
transition-duration: 0.3s;  
transition-timing-function: ease-in-out; 
} 

感謝您的任何意見

Answer 1

right無法在static定位的元素上工作，您需要使用負載上的position: relative;以及您需要定義right並將其設置爲0或任何你喜歡的。

Demo

div{ 
    /* All the properties you have declared will go here plus === */ 
    right:0; /* Add this */ 
    position:relative; /* Add this */ 
} 

---

使用負載position: relative;會幫你中轉您的鼠標出去元素，以及對鼠標懸停，所以如果你是在:hover設置position: relative;那麼你的元素將無法過境在鼠標外面。

此外，我注意到你沒有使用transition的任何標準屬性，所以請確保你使用它們。