<p class="fade">
‘Health is our heritage, our right.<br/>
It is the complete and full union between soul, mind and body;<br/>
and this is not a difficult far-away ideal to attain,<br/>
but one so easy and natural…<br/>
that many of us have overlooked it.’<br/>
Dr Edward Bach
</p>
.fade{
background:#fff;
color:#000;
line-height:24px;
margin:0 0 1em;
position:relative;
overflow:hidden;
}
.fade:after{
content:"";
position:absolute;
z-index:2;
left:0;
right:0;
top:0px;
bottom:0;
background:#fff;
animation:fade 8s linear infinite;
}
@keyframes fade{
0% {transform:translateY(0) }
80%{transform:translateY(100%)}
97%{transform:translateY(100%)}
}
/* ie11 and above only.
Older browers will get an invisible text so you may want to do this instead:
@supports (transform:translateY(0)) {
.fade:after{
content:"";
position:absolute;
z-index:2;
left:0;
right:0;
top:0px;
bottom:0;
background:#fff;
animation:fade 8s linear infinite;
}
@keyframes fade{
0% {transform:translateY(0) }
80%{transform:translateY(100%)}
97%{transform:translateY(100%)}
}
}
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.