How to make animation in CSS

Create animated effects with CSS using keyframe animations & transitions. Example: use keyframes to make a bouncing ball animation.

CSS Animation

Animations can be created using CSS, which adds life and interactivity to a web page. CSS animations are made up of two basic components: keyframes and animation properties. Keyframes are the individual frames or images that make up the animation. The animation properties control how the animation is displayed, such as its duration, delay, and iteration count.

To create a CSS animation, you need to define two key components:

• Keyframes - define the stages and styles of the animation.
• Animation properties - assign the animation to an element and define how it is executed.

Example

Let's look at an example of a simple animation that moves an element from left to right. We'll start by defining the keyframes for the animation. The keyframes will define three stages: the starting position, the middle position, and the end position. We'll name the keyframe "move":

@keyframes move {
  0% {
    left: 0;
  }
  50% {
    left: 250px;
  }
  100% {
    left: 500px;
  }
}

Once the keyframes are defined, we can assign the animation to an element using the animation properties. The animation properties control how the animation is displayed, such as its duration, delay, and iteration count. For this example, we'll set the duration to 2 seconds, the delay to 0 seconds, and the iteration count to 1:

#animated-element {
  animation-name: move;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-iteration-count: 1;
}

Now the animation is complete. When the element with the ID "animated-element" is displayed on the page, it will move from left to right over the course of 2 seconds.

CSS animations are a great way to add life and interactivity to a web page. With the keyframes and animation properties, you can create complex and interesting animations. Give it a try!