CSS Animations

CSS Animations , allow you to create more complex and sophisticated animations by defining keyframes and specifying various properties such as duration, timing function, and delay. With CSS Animations, you can create eye-catching effects like moving, rotating, scaling, and fading elements on your web page.

Step 1 : Create an HTML element to animate. Let's use a <div> element :

Edit Copy Hide

<div class="box"></div>

Edit Copy Hide

    .box {
  width: 200px; /* Set the width of the box */
  height: 200px; /* Set the height of the box */
  background-color: blue; /* Set the background color to blue */
  position: relative; /* Set the position to relative */
  top: 0; /* Set the initial top position to 0 */
  left: 0; /* Set the initial left position to 0 */
}

@keyframes moveAnimation {
  0% { top: 0; left: 0; } /* Define the keyframe at 0% */
  100% { top: 100px; left: 100px; } /* Define the keyframe at 100% */
}

.box {
  animation: moveAnimation 2s; /* Apply the moveAnimation for 2 seconds */
}

Step 2 : Define the initial CSS properties for the element. For this example, let's set the initial background color to blue and position it at the top-left corner:

Edit Copy Hide

.box {
  width: 200px; /* Set the width of the box */
  height: 200px; /* Set the height of the box */
  background-color: blue; /* Set the background color to blue */
  position: relative; /* Set the position to relative */
  top: 0; /* Set the initial top position to 0 */
  left: 0; /* Set the initial left position to 0 */
}

Step 3 : Define the animation keyframes using @keyframes. We'll create a simple animation that moves the element diagonally to the bottom-right corner:

Edit Copy Hide

@keyframes moveAnimation {
  0% { top: 0; left: 0; }
  100% { top: 100px; left: 100px; }
}

Step 4 : Apply the animation to the element, specifying the animation name, duration, and any other desired properties. For this example, we'll use the moveAnimation we defined above and set a duration of 2 seconds:

Edit Copy Hide

.box {
  animation: moveAnimation 2s;
}

Explanation : With these steps, the <div> element will smoothly animate by moving from the top-left corner to the bottom-right corner over a period of 2 seconds.

These step-by-step examples provide a basic understanding of CSS Animation.