JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </nav>
</body>

CSS

*{margin:0; padding:0;}
ul{background:black;}
li{display:inline-block; padding: 50px; list-style-type:none; background:url(http://i.imgur.com/vf25B.gif) repeat-x center -100px;
    -webkit-transition: background-position 1s ease-in-out;
    -moz-transition: background-position 1s ease-in-out;
    -o-transition: background-position 1s ease-in-out;
    -ms-transition: background-position 1s ease-in-out;
    transition: background-position 1s ease-in-out;}
li a {color:white; text-decoration:none; font-family:sans-serif; text-transform: uppercase; font-weight:bold; color:salmon;
}
li:hover{background-position:center -10px;

    -webkit-transition: background-position .5s ease-in-out;
    -moz-transition: background-position .5s ease-in-out;
    -o-transition: background-position .5s ease-in-out;
    -ms-transition: background-position .5s ease-in-out;
    transition: background-position .5s ease-in-out;
-moz-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.3);


}