JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div id="menu">
    <div class="menu-item">
        <div class="up">Home</div>
        <div class="down">Home</div>
    </div>
<div>

CSS

#menu{
    height : 50px;
    overflow-y : hidden;
}
.menu-item {
    height : 100px;
    width : 100px;
    cursor : pointer;
    display : inline-block;
    animation-name:menu;
    animation-duration:1s;
    /* Firefox */
    -moz-animation-name:menu;
    -moz-animation-duration:1s;
    /* Safari and Chrome */
    -webkit-animation-name:menu;
    -webkit-animation-duration:1s;
}


@keyframes menu{
to{margin-top:0px;}
    from {margin-top:-50px;}
}

@-moz-keyframes menu/* Firefox */
{
to{margin-top:0px;}
    from {margin-top:-50px;}
}

@-webkit-keyframes menu/* Safari and Chrome */
{
 to{margin-top:0px;}
    from {margin-top:-50px;}
}


.menu-item:hover{
    animation-name:menuhover;
    animation-duration:1s;
    /* Firefox */
    -moz-animation-name:menuhover;
    -moz-animation-duration:1s;
    /* Safari and Chrome */
    -webkit-animation-name:menuhover;
    -webkit-animation-duration:1s;
}






@keyframes menuhover{
    from {margin-top:0px;}
    to {margin-top:-50px;}
}

@-moz-keyframes menuhover/* Firefox */
{
 from {margin-top:0px;}
    to {margin-top:-50px;}
}

@-webkit-keyframes menuhover/* Safari and Chrome */
{
 from {margin-top:0px;}
    to {margin-top:-50px;}
}


.menu-item .up,.menu-item .down{
    width : 100%;
    height : 50%;
    background-color :red;
}
.menu-item .down{
    background-color:blue;
}