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.
- Text Animation with changing the color of the text using HTML & CSS
- Loading Text Animation Effect using CSS
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- Rubber Band Text animation using HTML and CSS
- How to Create Text Color Animation using HTML and CSS ?
- How to Create Jumping Text 3D Animation Effect using CSS ?
- How to Create Text Changing Animation Effect using CSS ?
- How to create text-fill animation using CSS ?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to create text stagger animation using TypographyMotion plugin ?
- How to create long shadow of text without using text-shadow in HTML and CSS ?
- How to embed text and text boxes in New Google Sites ?
- How to use animation on favicon image ?
- CSS | animation-delay Property
- CSS | animation-name Property
- CSS | animation-direction Property
- CSS | animation-play-state Property
- Cartoon animation loader using CSS
- CSS | animation-fill-mode Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.