<article></article>
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap');
body {
background: #a00;
}
article {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font: 10vmin 'Bowlby One SC';
height: 1em;
line-height: 1em;
clip-path: polygon(-200% 0, 200% 0, 200% 100%, -200% 100%);
color: #fff;
}
article::before {
content: "BE";
display: inline-block;
float: left;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
}
@keyframes changeToGray {
0% { color: #fff; }
100% { color: #ccc; }
}
@keyframes showWords {
0% { transform: translateY(0); }
100% { transform: translateY(-76em); }
}
article::after {
content: "LOVED\a HOPE\a THERE\a TOUGH\a NOW\a FRIEND\a QUICK\a ALLY\a SAD\a HAPPY\a WISE\a GENTLE\a GOOD\a MODEST\a BRIGHT\a HUMBLE\a NAIVE\a LOYAL\a CASUAL\a GULLIBLE\a SHY\a BLUNT\a PROUD\a PATIENT\a ABLE\a FUN\a SERIOUS\a TRUTH\a RAIN\a FEARLESS\a FRANK\a FIT\a CRAFTY\a TIMID\a EAGER\a HUMAN\a GOD\a BOLD\a WORTH\a FRUGAL\a FIRST\a ONE\a HONOR\a ACTIVE\a NOISY\a SUAVE\a DIRECT\a LIVELY\a MORAL\a LAST\a ALERT\a CANDID\a DARING\a NICE\a SMART\a SILLY\a BIG\a SMALL\a AWARE\a WARM\a NEAT\a CALM\a TENDER\a CARING\a HONEST\a STRONG\a WITTY\a HELP\a CLEVER\a POLITE\a THEM\a HER\a HIM\a FAIR\a KIND \a YOU\a LOVED";
animation:
showWords 16s 2.5s cubic-bezier(0.30, 0, 0.70, 1.025) forwards,
changeToGray 1s 1s forwards,
changeToGray 2s 18.5s reverse forwards;
display: inline-block;
float: left;
white-space: pre;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.