Simple CSS Example

View the article at http://ryanflorence.com/css-transition

by AdityaTripathi

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS

li {
    font-size: 20px;
    padding: 10px 20px;
    cursor: default;
    -webkit-transition: padding-left 400ms ease; 
       -moz-transition: padding-left 400ms ease; 
         -o-transition: padding-left 400ms ease; 
        -ms-transition: padding-left 400ms ease; 
}

li:hover {
    padding-left: 40px;
}