JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<p id="far-far-away">
        A long time ago in a galaxy far,<br/>far away. . . .
    </p>
    http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/

CSS

#far-far-away {
color: #4BD5EE;
font-family: "FranklinGothicBookRegular", sans-serif;
font-size: 48px;
line-height: 1.5;
position: absolute;
top: 200px;
left: 190px;
opacity: 0;
-webkit-animation: fade-in-out 6s linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 5s;
}
    @-webkit-keyframes fade-in-out {
        0% { opacity:0; }
        16%   { opacity:1; }
        84%   { opacity:1; }
        100%   { opacity:0; }
    }
    @-webkit-keyframes logo {
        0% { -webkit-transform: translateZ(0); opacity:1;}
        50% { -webkit-transform: translateZ(-50000px); opacity:1; }
        60% { -webkit-transform: translateZ(-60000px); opacity:0; }
        100%   { -webkit-transform: translateZ(-100000px); opacity:0;}
    }
    @-webkit-keyframes crawl {
        0% { -webkit-transform:rotateX(80deg) translateZ(200px) translateY(1100px);opacity:1;}
        40% { -webkit-transform:rotateX(80deg) translateZ(200px) translateY(-340px);opacity:1;}
        80% { -webkit-transform:rotateX(80deg) translateZ(200px) translateY(-1780px);opacity:0;}
        100% { -webkit-transform:rotateX(80deg) translateZ(200px) translateY(-2500px);opacity:0;}
    }