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> 