Two words work: Startling and Strapping, seen below as they animate to their single character:
STARTLING
STRAPPING
Miss the animation? Reload this page, it happens over 20 seconds...
A bit about the animation: It's done strictly with CSS, no javascript or animated GIF's. Each character is wrapped in a SPAN with a class of the order of which it disappears (first, second, third... eighth), with the final remaining letter I's being unwrapped. As you can see with our subset of classes listed below, we have a 2 second delay between each animation running on page load (it's the second count after linear).
.first { animation: 1s linear 2s forwards hideletter ; }
.second { animation: 1s linear 4s forwards hideletter ; }
.third { animation: 1s linear 6s forwards hideletter ; }
...The hideletter animation is tricky, as you cannot animate the display property of an object, and have the object 'disappear' from the page, and make the content reflow. In our case, our animation is in two parts, the first 99% fades it from view using the visibility and opacity settings, then from the page by switching visibility to hidden and the font-size to 0, to allow reflow; This way the word snaps to it's shortest size after each character is removed from the lineup, while still staying centered on the page.
@keyframes hideletter {
0% { visibility: visible; opacity: 1; font-size: 100%;}
99% { visibility: visible; opacity: 0; font-size: 100%;}
100% { visibility: hidden; opacity: 0; font-size: 0;}
}I'd seen a terrible cobbled together graphic that did this idea such a disservice, I figured I could come up with a simple HTML/CSS animation that would answer the question visually and simply.