Seesaw Text Animation

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>SeeSaw Text Animation</title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
</body>
  
</html>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

   
<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>

chevron_right


Complete Code: It is the combination of the above two sections of code.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.