CODEWITHSUNDEEP
css
user1469270
user1469270

Reputation:

Animate position with only CSS

I have the following style on hover:

li:hover a {
    left: 65px;
}

I know I can animate this with jQuery, but can it be animated with CSS3 alone?

This did not work:

li:hover a {
    left: 65px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Upvotes: 0

Views: 63

Answers (2)

Banana
Banana

Reputation: 7463

you have to set position if you want to use 'left' otherwise use 'margin-left'

here is an example: FIDDLE

Upvotes: 0

Sharikov Vladislav
Sharikov Vladislav

Reputation: 7269

You have to use this css:

li:hover { 

    left: 0px;

}

li:hover a {

    left: 65px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Upvotes: 1

Related Questions