CSS Transitions and Animations Tutorial

Previous Next

This tutorial demonstrates how to use CSS transitions and animations to create interactive and visually engaging effects.

1. CSS Transitions

Transitions allow smooth changes in CSS properties over a specified duration. Here’s an example:

.box1 {
  width: 100px;
  height: 100px;
  margin: 50px;
  background-color: red;
  transition: width 2s, height 2s, transform 2s; /* Specifies properties to animate */
}

.box1:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg); /* Applies changes on hover */
}

Hover over the red box below to see the transition effect:

2. CSS Animations

Animations allow you to define keyframes for more complex sequences. Example 1:

.box2 {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: blue;
  animation-name: animation1;
  animation-duration: 3s; /* Animation lasts 3 seconds */
}

@keyframes animation1 {
  from {
    left: 0px; /* Starts at left */
  }
  to {
    left: 500px; /* Moves to the right */
  }
}

Here’s the animation of a blue box moving horizontally:

3. Complex Animations with Keyframes

You can create multi-step animations using percentages. Example:

.box3 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: red;
  animation-name: animation2;
  animation-duration: 4s;
  animation-iteration-count: infinite; /* Loops the animation infinitely */
}

@keyframes animation2 {
  0% {
    left: 0px;
    top: 0px;
  }
  25% {
    left: 500px;
    top: 0px;
  }
  50% {
    left: 500px;
    top: 300px;
  }
  75% {
    left: 0px;
    top: 300px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}

The red box below animates in a square path:

4. Summary

Transitions: Use for simple, state-based animations (e.g., hover effects).
Animations: Use for complex, multi-step sequences.
Keyframes: Define specific steps in an animation sequence.
Properties: Control duration, delay, iteration count, and easing functions.

5. Complete Code

Here’s the full code for both examples:

HTML File 1


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transitions and animations</title>
</head>

<body>
    <style>
        /* transitions */
        .box1 {
            width: 100px;
            height: 100px;
            margin:50px;
            background-color: red;
            transition: width 2s, height 2s, transform 2s;}

        .box1:hover {
            width: 200px;
            height: 200px;
            transform: rotate(180deg);
            }
        
        /*animation */
        .box2 {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: blue;
            animation-name: animation1;
            animation-duration: 3s;
                
            }

        @keyframes animation1 {
            from{left:0px}
            to{left:500px}
        }

               
    </style>
    <div class="box1"></div>
   
    <div class="box2"></div>
   
</body>

</html>

Run Code

HTML File 2


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transitions and animations</title>
</head>

<body>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: red;
            animation-name: animation2;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }

        @keyframes animation2 {
            0% {
                left: 0px;
                top: 0px
            }
            25% {
                left: 500px;
                top: 0px;
            }
            50% {
                left: 500px;
                top: 300px
            }
            75% {
                left: 0px;
                top: 300px
            }
            100% {
                left: 0px;
                top: 0px
            }
        }
    </style>
    <div class="box1"></div>
</body>

</html>

Run Code

Previous Next