JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<div class="text">
There is some text here!
<div class="fadingEffect"></div>
</div>

CSS

.text {
    position:relative;
    line-height:2em;
    overflow:hidden;
    /* for demo purpose */
    width:300px;
    margin:0 auto;
}
.fadingEffect {
    position:absolute;
    top:0; bottom:0; right:0;
    width:100%;
    background:red;
    -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */
    -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */
    -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */
    -o-animation: showHide 5s ease-in alternate infinite; /* Opera */
    animation: showHide 5s ease-in alternate infinite;
}
@-webkit-keyframes showHide { /* Chrome, Safari */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-moz-keyframes showHide { /* FF */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-ms-keyframes showHide { /* IE10 */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-o-keyframes showHide { /* Opera */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@keyframes showHide {
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}