Fade

by Habetdin

HTML

<div class="fade">FADE</div>

CSS

body {
			    background: #000;
			    color: #fff;
			    font-family: futura;
			    font-style: italic;
			    font-size: 42pt;
			    font-weight: bold;
			}

			div {
			    height: 1em;
			    width: 100%;
			    padding: 1em 0;
			    text-align: center;
			}

			div[style] {
			    padding: .25em 0;
			}

			div.fade {
			    background: repeating-linear-gradient(to right, #f00, #ff0 16.667%, #0f0 33.333%, #0ff 50%, #00f 66.667%, #f0f 83.333%, #f00 100%) repeat;
			    background-size: 100% 1px;
			    animation: rainbow 1s linear infinite, colorchange 1s linear infinite;
			}

			@keyframes colorchange {
			    from {
			        color: #f00;
			    }
			    16.667% {
			        color: #ff0;
			    }
			    33.333% {
			        color: #0f0;
			    }
			    50% {
			        color: #0ff;
			    }
			    66.667% {
			        color: #00f;
			    }
			    83.333% {
			        color: #f0f;
			    }
			    to {
			        color: #f00;
			    }
			}

			@keyframes rainbow {
			    from {
			        background-position-x: -85vw;
			    }
			    to {
			        background-position-x: 15vw;
			    }
			}