Shaking an element can be very useful. It can call for attention and focus. For example, if you have a website and have introduced a new, important section in navigation, then just adding a New label may not feel convincing enough that the users, used to seeing the main content page, will notice it. You may have an e-store and introduce a brief sale offer, and you’d like the offer text to be attention-seeking enough for the users to notice. In such cases, you can animate those elements to shake and stand out in terms of attention.
In this article, we’ll talk about what is a Rainbow text and demonstrate building one through a basic example. If you are interested in generating code for text with any gradient color, check out our CSS Text Gradient Generator tool.
Animations and Transitions in CSS can come in handy. They allow objects and effects to have a dynamic behavior. Based on your use case, you may be using animation for (but not limited to) the following purposes:
There are cases where you want to bring your user’s attention towards what lies below the scroll. A site can have multiple folds of important content. The user's screen is finite and you don’t want them to leave without scrolling down.
Modern web browsing is all about first impressions. Google’s PageSpeed Insights benchmark declares a website slow if rendering the first contentful paint (FCP) is higher than 3 seconds. In contrast, a fast FCP is 1 second or less. As such, now more than ever, it is vital to focus on page performance just as much as the content. Even a bloated website can engage a relatively larger audience if it prioritizes the visible content first and makes a better first impression in terms of speed and responsiveness.