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-animation: curtainHide .5s 1;}

li a {color:white; text-decoration:none; font-family:sans-serif; text-transform: uppercase; font-weight:bold; color:salmon;    
     
}

li:hover{
  -webkit-animation: curtainBounce .5s 1;
  background-position:center -10px;
}

@-webkit-keyframes curtainBounce {
 from {background-position:center -100px;}
50%{background-position:center -10px;}
80%{background-position:center -15px;}
  to {background-position:center -10px;}
}

@-webkit-keyframes curtainHide{
    from {background-position:center -10px;}
    to {background-position:center -100px;}
}