The Seesaw animation is an animation that can be applied to various components of a website like text, cards, and even buttons. But, it is mostly used for text-animation. This is a relatively new animation when it comes to text animations.
Approach: The approach is simple, we will be rotating the text in some fixed order of angles. For this article, we will be using 5, 0, -5 sequence for the angles.
HTML Code: In this section, we have the text wrapped inside <h1> tag.
- Step 1: Apply a background to the body element.
- Step 2: Align the text to the “center” and do some basic styling like using “font-size”.
- Step 3: Use animation property with identifier named as animate.
- Step 4: Use keyframes to animate the text. Use the same sequence for angles that were discussed in the approach.
Note: Do not increase the angle more than 10. You can add some “text-shadow” to give this animation of 3-D look.
Complete Code: It is the combination of the above two sections of code.