Simple CSS Example

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

by Barbos

HTML

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

CSS

li {
    font-size: 20px;
    padding: 5px;

    -webkit-transition: background 800ms ease; 
       -moz-transition: padding-left 400ms ease; 
         -o-transition: padding-left 400ms ease; 
        -ms-transition: padding-left 400ms ease; 
}

li:hover {

     border-left: 3px solid #63b265;
  background: #daf3d8;
  color: #3d793f;
    color: red;
}