JSFiddle - React, Tailwind, and code Playground

by phoffman

HTML

<nav>
    <ul>
        <li id="one"><a href="#">Item 1</a></li>
        <li id="two"><a href="#">Item 2</a></li>
        <li id="three"><a href="#">Item 3</a></li>
        <li id="four"><a href="#">Mask</a></li>
    </ul>
</nav>

CSS

nav{
  position:relative;        
}
ul{
    min-height:30px;
}
nav ul li{
  position:absolute;
  background-color:#F00;
  padding:5px;   
}
ul:hover{
  background:#000;        
}
ul:hover #one{
    -webkit-animation: moveFromBottom 300ms ease;
    -moz-animation: moveFromBottom 300ms ease;
    -ms-animation: moveFromBottom 300ms ease;
}
ul:hover #two{
  top:75px;        
}
ul:hover #three{
  top:50px;
  left:50px;    
}
@-webkit-keyframes moveFromBottom {
    from {
        left:0px;
        opacity: 0;
    }
    to {
        left:130px;
        opacity: 1;        
    }
}
@-moz-keyframes moveFromBottom {
    from {
        right:0px;
        opacity: 0;
    }
    to {
        right:130px;
        opacity: 1;        
    }
}
@-ms-keyframes moveFromBottom {
    from {
        right:0px;
        opacity: 0;
    }
    to {
        right:130px;
        opacity: 1;        
    }
}