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;
}

Answer 2

您需要起始宽度，请参见小提琴https://jsfiddle.net/7gqo4o1h/4/

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

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