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