JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<div class="blink">Did you remember web 1.0 ?</div>

<div class="marquee">this is meant to be a long string</div>

CSS

@keyframes blink{
0%,100% {color: inherit;}
50% {color:transparent;}
}
@-moz-keyframes blink {
0%,100% {color: inherit;}
50% {color:transparent;}
}
@-webkit-keyframes blink {
0%,100% {color: inherit;}
50% {color:transparent;}
}


@-moz-keyframes marquee{
    0%{text-indent:0;}
    100%{text-indent:-100%;}
}
@keyframes marquee{
    0%{text-indent:0;}
    100%{text-indent:-100%;}
}
@-webkit-keyframes marquee{
    0%{text-indent:0;}
    100%{text-indent:-100%;}
}

.blink{
        -moz-animation: blink 1s infinite;
        animation: blink 1s infinite;
        -webkit-animation: blink 1s infinite;
}

body{
    background-color:lime;
}

.marquee{
 height:1em;
 padding:0.3em;
    width:50px;overflow:hidden;
 -webkit-animation: marquee 10s infinite;
     -moz-animation: marquee 10s infinite;

     animation: marquee 10s infinite;


}