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 那么你的元素将无法在鼠标移出时传输。

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