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