start learning
Image 1

CSS Animations

CSS Animations is powerful features that allow you to add dynamic and engaging effects to your web pages. Both CSS Transitions and Animations offer a way to enhance user interactions and bring visual appeal to your website or application.

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.

CSS Animation Example

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


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

    .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:


.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:


@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:


.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.


Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor