@import url('https://fonts.googleapis.com/css?family=Orbitron:400,700,900'); body { background: black; } p { color: #121212; margin-top: 300px; font-size: 4.1em; letter-spacing: -9px; font-family: 'Orbitron', sans-serif; font-weight: black; } .c { animation: light 300ms ease-in-out, light2 200ms linear forwards 3.5s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8s; } .u { animation: light 300ms ease-in-out 300ms, light2 200ms linear forwards 3.7s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.1s; } .r { animation: light 300ms ease-in-out 600ms, light2 200ms linear forwards 3.9s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.2s; } .l { animation: light 300ms ease-in-out 900ms, light2 200ms linear forwards 4.1s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.3s; } .e { animation: light 300ms ease-in-out 1.2s, light2 200ms linear forwards 4.3s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.4s; } .y { animation: light 300ms ease-in-out 1.5s, light2 200ms linear forwards 4.5s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.5s; } .w { animation: light 300ms ease-in-out 1.8s, light2 200ms linear forwards 4.7s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.6s; } .e2 { animation: light 300ms ease-in-out 2.1s, light2 200ms linear forwards 4.9s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.7s; } .b { animation: light 300ms ease-in-out 2.4s, light2 200ms linear forwards 5.1s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.8s; } .d { animation: light 300ms ease-in-out 2.7s, light2 200ms linear forwards 5.3s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 8.9s; } .e3 { animation: light 300ms ease-in-out 3s, light2 200ms linear forwards 5.5s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 9s; } .v { animation: light 300ms ease-in-out 3.3s, light2 200ms linear forwards 5.7s, dark 2s linear forwards 5.9s, light2 50ms ease-in-out forwards 8s, hue 100ms forwards linear 9.1s; } @keyframes light { from { color: pink; text-shadow: 0 0 3px white, 0 0 7px red, 0 0 20px red; filter: drop-shadow(0 0 25px red); -webkit-text-stroke: 2px red; } to { color: inherit; text-shadow: none; filter: drop-shadow(0 0 0 red); } } @keyframes light2 { from { color: inherit; text-shadow: none; filter: drop-shadow(0 0 0 red); -webkit-text-stroke: black; } to { color: pink; text-shadow: 0 0 1px white, 0 0 3px white, 0 0 7px white, 0 0 20px red; filter: drop-shadow(0 0 25px red); -webkit-text-stroke: 2px red; } } @keyframes dark { 0% { color: pink; text-shadow: 0 0 3px white, 0 0 7px white, 0 0 20px red; filter: drop-shadow(0 0 25px red); -webkit-text-stroke: 2px red; } 25% { color: inherit; text-shadow: none; filter: drop-shadow(0 0 0 black); -webkit-text-stroke: black; } } @keyframes hue { from { filter: hue-rotate(0deg) drop-shadow(0 0 25px red); } to { filter: hue-rotate(360deg) drop-shadow(0 0 25px red); } }