CODEWITHSUNDEEP
htmlcsstransition
BigBugCreator
BigBugCreator

Reputation: 1059

Transition CSS3 does not work

I was trying the examples from w3schools: http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 but I doing the same in my CSS and it does not work.

CSS:

 nav > ul > li{
     display: inline-block; 
     padding: 0px; 
     margin: 0px;  
     transition: width 2s;
 }

 nav > ul > li:hover{
     width: 20%; 
 }

hover works without problems, but does not the transition... this should be easy

Upvotes: 1

Views: 73

Answers (2)

isherwood
isherwood

Reputation: 61036

The browser typically cannot transition an element's property without having both a start and end value. Give it an initial width.

nav > ul > li {
    width: 100px;

You'll notice that if you remove the initial width from the example you gave the transition ceases to function.

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157284

You need to define the initial/start width of the element before you apply transition

Demo

nav > ul > li {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    transition: width 2s;
    background: #f00;
    width: 0; /* Add this */
}

nav > ul > li:hover {
    width: 20%;
}

Some tips :

  • Don't use px if the value is 0 so unit doesn't matter.
  • I hope you know that you are using inline-block so white-space will occur
  • Don't use too specific selectors if not required, assign a class to the parent element to uniquely identify the element. So instead of writing nav > ul > li you can write .some-class-nav > li. Also you can get rid of > if you are sure that your li items won't have child li

Upvotes: 3

Related Questions