How to use Animation and Transition Effects in CSS ?

Last Updated : 22 May, 2023

With the help of CSS, you may design impressive visual effects for your website. Animation and transition effects are two common ways to add animation and visual effects to a web page. By attracting users’ attention and directing them through your material, these effects may make your website more dynamic and engaging. In this article, we will see how to use Animation And Transition Effects together in CSS.

Animation allows an element to gradually transition from one style to another. You must first create some keyframes before using CSS animation. The styles that an element will have at various periods in time are defined by keyframes.

A CSS transition occurs when the value of a property changes from one value to another over time. You may specify how an element changes its style over a certain amount of time using transition, as well as how it will act before, during, and after the transition.

Syntax:

Animation:

selector {
      animation: animation-name duration timing-function delay iteration-count direction;
}

Transition:

selector {
     transition: property duration timing-function delay;
}

Example 1: In this example, we have a container that is centered on the page. We have three box elements inside a container each box has different color and animation.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>Geeksforgeeks</title> 
    <style> 
        * { 
            margin: 0px; 
            padding: 0px; 
        } 
  
        .container { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            background-color: #212121; 
        } 
  
        .box1,.box2,.box3,.box4 { 
            width: 50px; 
            height: 50px; 
            margin: 10px; 
            background-color: #FFC107; 
            border-radius: 50%; 
            cursor: pointer; 
            box-shadow: 0px 0px 5px#81ecec; 
        } 
  
        .box1:hover,.box2:hover, 
        .box3:hover,.box4:hover { 
            transform: scale(1.2); 
            transition: transform 0.5s ease-in-out; 
        } 
  
        .box1:active,.box2:active, 
        .box3:active,.box4:active { 
            animation: explode 0.5s ease-in-out; 
        } 
  
        @keyframes explode { 
            0% { 
                transform: scale(1); 
            } 
  
            50% { 
                transform: scale(2); 
                opacity: 0.5; 
            } 
  
            100% { 
                transform: scale(1); 
                opacity: 1; 
            } 
        } 
  
        .box2 { 
            background-color: #2196F3; 
            animation: slide 3s ease-in-out infinite; 
        } 
  
        @keyframes slide { 
            0% { 
                transform: translateX(-100%); 
            } 
  
            50% { 
                transform: translateX(100%); 
            } 
  
            100% { 
                transform: translateX(-100%); 
            } 
        } 
  
        .box3 { 
            background-color: #F44336; 
            animation: pulse 1s ease-in-out infinite; 
        } 
  
        .box4 { 
            background-color: green; 
            animation: slide 3s ease-in-out infinite; 
        } 
  
        @keyframes pulse { 
            0% { 
                transform: scale(1); 
            } 
  
            50% { 
                transform: scale(1.2); 
            } 
  
            100% { 
                transform: scale(1); 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="box1"></div> 
        <div class="box2"></div> 
        <div class="box3"></div> 
        <div class="box4"></div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we have a container and a button that is centered on the page. As the user hovers over the box element, a CSS transition effect scales it up by 20%, and a CSS animation named “pulse” scales it up and down over the course of one second. When we clicked on the button box start animating again if we click on the button then it stops animating.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title> 
          How To Use Animation And Transition Effects In Css? 
      </title> 
    <style> 
        * { 
            margin: 0px; 
            padding: 0px; 
        } 
  
        .container { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            background-color: #212121; 
        } 
  
        .box { 
            width: 50px; 
            height: 50px; 
            margin: 10px; 
            background-color: #FFC107; 
            border-radius: 50%; 
            cursor: pointer; 
            transition: transform 0.5s ease-in-out; 
        } 
  
        .box:hover { 
            transform: scale(1.2); 
        } 
  
        .box.animate { 
            animation: pulse 1s ease-in-out infinite; 
        } 
  
        @keyframes pulse { 
            0% { 
                transform: scale(1); 
            } 
  
            50% { 
                transform: scale(1.2); 
            } 
  
            100% { 
                transform: scale(1); 
            } 
        } 
  
        button { 
            padding: 10px 10px 10px 10px; 
            margin-bottom: 1rem; 
            background: green; 
            color: white; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            transition: all linear 0.5s; 
            margin-top: 1rem; 
        } 
  
        button:hover { 
            transform: translate(0px, -6px); 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="box"></div> 
        <button id="btn"> 
              Start Animation 
          </button> 
    </div> 
    <script>const box =  
              document.querySelector('.box'); 
        const btn =  
              document.querySelector('#btn'); 
  
        btn.addEventListener('click', () => { 
            box.classList.toggle('animate'); 
        }); 
    </script> 
</body> 
  
</html>