Seesaw Text Animation
Last Updated :
21 Jul, 2020
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.
HTML
<!DOCTYPE html>
< html >
< head >
< title >SeeSaw Text Animation</ title >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
</ body >
</ html >
|
CSS Code:
- 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.
<style>
body {
background : green ;
}
h 1 {
text-align : center ;
margin-top : 150px ;
font-size : 40px ;
color : white ;
animation: animate 5 s linear infinite;
}
@keyframes animate {
0% {
transform: rotate( 5 deg);
}
25% {
transform: rotate( 0 deg);
}
50% {
transform: rotate( -5 deg);
}
75% {
transform: rotate( 0 deg);
}
100% {
transform: rotate( 5 deg);
}
}
</style>
|
Complete Code: It is the combination of the above two sections of code.
HTML
<!DOCTYPE html>
< html >
< head >
< title >SeeSaw Text Animation</ title >
< style >
body {
background: green;
}
h1 {
text-align: center;
margin-top: 150px;
font-size: 40px;
color: white;
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(5deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(-5deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(5deg);
}
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...