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的任何标准属性，所以请确保你使用它们。