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; 将帮助您在鼠标移开和鼠标悬停时移动元素，因此如果您将 position: relative; 设置为 on :hover 然后你的元素将无法在鼠标移开时移动。

此外，我注意到您没有为 transition 使用任何标准属性，因此请确保使用它们。