JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<h1>hello world</h1>

CSS

body {
    overflow: hidden;
    margin: 0;
}
h1 {
    font-size: 50px;
    background: red;
    left: 100px;
    position: relative;
    animation: a cubic-bezier(0.72, 0.03, 0.96, 1) both 2s .5s;
}
@keyframes a {
    from {
        transform: translate(0,0);
    }
    50% {
        transform: translate(100%,0)
    }
    50.1% {
        animation-timing-function: cubic-bezier(0, 0.01, 0.09, 1);
        transform: translate(-100%,0);
        left: 0;
    }
    to {
        transform: translate(0,0);
        left: 0;
    }
}