html - CSS3 过渡不起作用

Question

我有这个 css 代码，我将其添加到我的样式中以进行过渡，但它不起作用，所以任何人都可以告诉我哪里出了问题，以便我可以修复它

这是我的CSS代码

div p
{
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;

}
div:hover p
{
     width: 300px;
}

这是我的html代码

<div><p style='background-color:blue'>Hello</p></div>

Answer 1

只需添加

width: 100%;

到您的 div p { }，它将起作用。您需要提供 CSS 开始值和结束值。

因此，您的最终 CSS 将是:

div p {
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
    width: 100%;
}

div:hover p {
    width: 200px;
}