Reputation: 123
I have this css code and which i added to my style to have a transition but it does not work so could anyone tell me what is wrong so I can fix it
this is my css code
div p
{
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover p
{
width: 300px;
}
this is my html code
<div><p style='background-color:blue'>Hello</p></div>
Upvotes: 1
Views: 5171
Reputation: 9457
You need a starting width, see fiddle 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;
}
Upvotes: 1
Reputation: 2543
Just add
width: 100%;
to your div p { }
and it will work. You need to give CSS start and end values.
So, your final CSS will be:
div p {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
width: 100%;
}
div:hover p {
width: 200px;
}
Upvotes: 7