Skip to main content
Practice

Animation Basics

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


Basic CSS Animations​

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

Example​

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


Creating a Simple Animation​

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


Example of Applying a Bounce Animation​

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


Controlling Animation Effects​

Adjusting Speed with animation-timing-function​

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


Example​

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


Delaying Animation with animation-delay​

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

Example:​

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

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

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.