<div>
<h1>
Keyframes
</h1>
</div>
h1 {
animation: rainbow 4s ease 2s infinite reverse;
font-family: 'Rubik', sans-serif;
font-size: 2em;
font-style: italic;
text-shadow: 2px 4px 0px #1afe48;
}
@keyframes rainbow {
20% {
text-shadow: 2px 4px 0px #ff00a0;
}
40% {
text-shadow: 2px 4px 0px #fe75fe;
}
60% {
text-shadow: 2px 4px 0px #ff0000;
}
80% {
text-shadow: 2px 4px 0px #73fffe;
}
}
body {
font-family: 'Roboto Mono', monospace;
height: 100vh;
}
div {
height: inherit;
display: flex;
justify-content: center;
align-items: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.