Animation Basics

Using CSS animations, you can make elements on the screen move and change, adding a bit of liveliness to the page.

• Understanding @keyframes @keyframes defines how an animation should progress. Similar to flipping through the pages of a comic book, each 'page' (keyframe) defines how the element will change.

• The beginning and end of an animation A CSS animation has a start and an end. In the example below, 0% represents the start, and 100% represents the end. CSS animations specify how the HTML element will change between these values.

Copy
@keyframes bounce {
  0% {
    transform: translateY(0); /* Apply translateY(0) at 0% */
  }
  50% {
    transform: translateY(-20px); /* Apply translateY(-20px), moving up 20px at 50% */
  }
  100% {
    transform: translateY(0); /* Apply translateY(0), returning to the original position at 100% */
  }
}

The code above creates an animation called "bounce," making the HTML element move up and then back down.

To apply an animation, you need to specify what to animate (animation-name) and how long it should run (animation-duration).

Copy
div {
  animation-name: bounce; /* Apply the bounce animation */
  animation-duration: 2s; /* Run the animation for 2 seconds */
}

This will make the div element execute the "bounce" animation for 2 seconds.

Using animation-timing-function, you can control the speed of the animation, making it slower or faster.

Example

Copy
div {
  animation-timing-function: ease-in-out;
}

ease-in-out starts the animation slowly, accelerates in the middle, and then slows down again at the end.

If you want to delay an animation, use animation-delay.

Example:

Copy
div {
  animation-delay: 1s; /* Execute the animation after 1 second */
}

Follow the highlighted parts of the code to implement these features.