CSS Animation Example: Focus Blur
The "Focus Blur" is a cinematic, atmospheric way to introduce a webpage's primary title or hero text, mimicking a camera lens snapping into sharp focus.
This animation hinges entirely on the blur() value assigned to the CSS filter property. In our @keyframes definition, we start the element at blur(20px) and transition it down to a crisp blur(0px).
To heighten the "camera lens" aesthetic, we also simultaneously fade the opacity from 0 to 1, and employ transform: scale() to make the text appear as if it is pulling back sharply from the viewer into the screen.
Here is the code to create the Focus Blur animation.
Accessibility Considerations
Rapidly shifting focal elements can be disconcerting for visually impaired users or those prone to motion sickness. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion.
For these users, we should disable the animation block outright and manually set opacity: 1 and filter: blur(0) so the text is instantly legible upon loading.
Here's what we used in our example:
@media (prefers-reduced-motion: reduce) {
.blur-text {
animation: none; /* Kills the animation block */
/* Force text to become immediately legible */
opacity: 1;
filter: blur(0px);
}
}