css - 菜单悬停过渡效果从左到右 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/上工作