CODEWITHSUNDEEP
htmlcsscss-transitions
Haidar
Haidar

Reputation: 123

CSS3 transition does not work

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

Answers (2)

Adam Buchanan Smith
Adam Buchanan Smith

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

bitten
bitten

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

Related Questions