<figure>
<blockquote>
Humans are<br/>
allergic to
<span>c</span><span>h</span><span>a</span><span>n</span><span>g</span><span>e</span>
</blockquote>
<figcaption>
—Grace Hopper,
<cite>
The Wit and Wisdom of Grace Hopper
</cite>
</figcaption>
</figure>
html, body {
overflow: hidden;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: 1fr 1fr
}
figcaption {
align-self: flex-start;
margin-top: 5vmin;
font-size: 3.5vmin;
font-family: Times, serif;
}
blockquote {
align-self: flex-end;
margin: 0;
line-height: 12vmin;
font-size: 10vmin;
font-family: Helvetica, sans-serif;
}
@keyframes changefont {
0% { font-weight: 400; color: #000; font-style: italic; font-family: Helvetica, sans-serif; }
10% { font-weight: 200; color: #333; font-style: normal; font-family: Helvetica, sans-serif; }
20% { font-weight: 300; color: #000; font-style: normal; font-family: Arial, sans-serif; }
30% { font-weight: 600; color: #666; font-style: italic; font-family: Times, serif; }
40% { font-weight: 300; color: #f00; font-style: normal; font-family: Times, serif; }
50% { font-weight: 500; color: #000; font-style: italic; font-family: Courier, monospace; }
60% { font-weight: 300; color: #f06; font-style: italic; font-family: Helvetica, sans-serif; }
70% { font-weight: 600; color: #070; font-style: normal; font-family: Times, serif; }
80% { font-weight: 200; color: #00f; font-style: normal; font-family: Courier, monospace; }
90% { font-weight: 400; color: #069; font-style: italic; font-family: Arial, serif; }
100% { font-weight: 700; color: #fca; font-style: normal; font-family: Helvetica, sans-serif; }
}
blockquote span {
animation: changefont 5s linear infinite;
}
blockquote span:nth-child(1) { animation-delay: -0s; }
blockquote span:nth-child(2) { animation-delay: -3.25s; }
blockquote span:nth-child(3) { animation-delay: -1s; }
blockquote span:nth-child(4) { animation-delay: -5s; }
blockquote span:nth-child(5) { animation-delay: -2.5s; }
blockquote span:nth-child(6) { animation-delay: -4.3s; }
@media (prefers-reduced-motion) {
blockquote span {
animation: none !important;
font-style: italic;
font-family: Times, serif;
font-size: 1.1em;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.