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/で動作することがわかります