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

Question

我使用过渡属性从上到下将鼠标滑过背景图像。

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;
}

如何改变从左到右的过渡效果？

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;
}

您可以看到它在jsfiddle http://jsfiddle.net/bSyvP/1/上工作。