菜单悬停过渡效果从左到右CSS

Question

I have used transition property to slide the mouse over background image from top to bottom.

css:

a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

How to change the transition effect from left to right?

Answer 1

html:

<div class="a"></div>

css:

.a {
    background:url(http://a.static.trunity.net/images/132364/500x0/scale/butterfly-2.jpg) no-repeat;
    background-position:left top;
    display:block;
    width:400px;
    height:300px;
}

.a:hover {
    background-position:400px top;
    -webkit-transition:all 1s linear;
}

you can see it work on jsfiddle http://jsfiddle.net/bSyvP/1/