CSS3菜单动画

Question

我想制作一个css3悬停动画。当我悬停时，我希望从左到右有一个黄色箭头动画。应该是这样的：

Test page

CSS：

#butikMenu {

    width: 100%;

    float: left;

    margin: 0 0 3em 0;

    padding: 0;

    list-style: none; }

#butikMenu li {

    float: left; }

#butikMenu{

    width: 100%;

    float: left;

    margin: 0 0 3em 0;

    padding: 0;

    list-style: none;

    border-bottom: 1px solid #ccc; }

#butikMenu li a {

        background:url(images/arrowTest.png);

        background-position:top left;

        display: block;

        padding: 20px 8px;

        text-decoration: none;

        text-transform:uppercase;

        font-size:22px;

        color: #000;

         }

#butikMenu li a:hover {

        background-position:105% 0 ;

        -moz-transition: background-position 0.2s ease-in-out 0s;

    -webkit-transition:  background-position 0.2s ease-in-out 0s;

    transition: background-position 0.2s ease-in-out 0s;
}