JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<!--
Made some kind of attempt of a banner, playing around with #CSS3 animations /@c_vilander 
-->

<div id="container">

<div class="text" id="numberone">
    <span>Playing with text animations</span>
</div>

<div class="text" id="numbertwo">
    <span>using @-webkit-keyframes</span>
</div>

<div class="letters">
    <span class="numberthree">C</span>
    <span class="numberfour">S</span>
    <span class="numberfive">S</span>
    <span class="numbersex">3</span>
</div>

</div>

CSS

body {
    margin: 0px;
    padding: 0px;
    background-color: #d9d9d9;
    font-family: Sans-Serif;
    font-weight:100;
    color: transparent;
}

#container {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 450px;
    height: 120px;
    margin: 0px;
    padding: 0px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#282828), to(#5a5a5a));
    overflow: hidden;
    -webkit-transform: translateZ(0);
}

.text {
    position: absolute;
    top: 40px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 0 auto;   
    text-align: center;       
}

.text span { 
    font-size: 32px;     
}

.letters {
    position: absolute;
    top: 20px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 0 auto;   
    text-align: center;
}

.letters span { 
    font-size: 70px;
}

#numberone {
    -webkit-animation: animation 3.0s ease-in-out forwards;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
}

#numbertwo {
    -webkit-animation: animation 3.0s ease-in-out forwards;
    -webkit-animation-delay: 4.5s;
    -webkit-animation-iteration-count: 1;
}

.numberthree {
    -webkit-animation: letter 4.0s ease-in-out forwards;
    -webkit-animation-delay: 7.0s;
    -webkit-animation-iteration-count: 1;
}

.numberfour {
    -webkit-animation: letter 4.0s ease-in-out forwards;
    -webkit-animation-delay: 7.4s;
    -webkit-animation-iteration-count: 1;
}

.numberfive {
    -webkit-animation: letter 4.0s ease-in-out forwards;
    -webkit-animation-delay: 7.6s;
    -webkit-animation-iteration-count: 1;
}

.numbersex {
    -webkit-animation: letter 4.0s ease-in-out forwards;
    -webkit-animation-delay: 7.8s;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes animation {
    0% { opacity: 0; -webkit-transform: scale(0); text-shadow: 0px 0px 70px #d9d9d9; }
    50%, 75% { opacity: 1; -webkit-transform: scale(1); text-shadow: 0px 0px 0px #d9d9d9; }
    100% {...