Q: -Webkit-transform translation not animating I would like an li to gradually slide 100px to the right. My CSS translation is working instantly, but the animation is not. Can anybody explain why?
JSFiddle here:http://jsfiddle.net/Lux4t/1/
<ul>
    <li class="ease"><a href="">Ease</a></li>
</ul>

Here is my CSS
li{
list-style: none;
margin-bottom:20px;
float:left;
clear: both;
}
li a{
color:white;
background-color:blue;
display:block;
height:100px;
width:200px;
transition-property:-webkit-transform;
}
li.ease a{
transition-timing-function: ease;
}
li:hover a{
-webkit-transform:translateX(100px);
background-color: red;
}


A: transition-property is a part of transition (a shorthand). transition-property also needs a transition-duration to work. Use transition instead, its easier to write
CSS
li a {
    color:white;
    background-color:blue;
    display:block;
    height:100px;
    width:200px;
    transition:-webkit-transform 1s;
}

See here

A: Solved it: needed to add transition-duration:3s; to my li a css!
