JSFiddle - React, Tailwind, and code Playground

by omarqa

HTML

<div class="element-to-animate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At temporibus nihil voluptatibus explicabo quo excepturi voluptas eveniet ex et quas. Ipsam at fugiat ipsa hic saepe alias nam debitis dolores.</div>

CSS

.element-to-animate {
    -webkit-animation: NAME-YOUR-ANIMATION 10s;
    -moz-animation: NAME-YOUR-ANIMATION 10s;
    -o-animation: NAME-YOUR-ANIMATION 10s;
    animation: NAME-YOUR-ANIMATION 10s;
    opacity: 0;
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}