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

您需要一个起始宽度，请参阅fiddlehttps://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;
}