JSFiddle - React, Tailwind, and code Playground

by daclouds

HTML

<a href="#">MENU</a>

CSS

body {
    margin: 0;
    text-align: center;
    padding: 50px;
    background-color: #ED6464;
}

a {
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    font-family: Futura;
    font-weight: 300;
    transition: 1s all ease;
    animation-play-state: paused;
}

a:hover {
    -webkit-animation: 1s rolling;
    animation-play-state: running;
}

@-webkit-keyframes rolling {
    from {
        -webkit-transform: translateY(0px);
    }
    to {
        -webkit-transform: translateY(-100px);
    }
}