Skip to content
Related Articles

Related Articles

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

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :