26cssanimation

CSS Animations

CSS Animations are features that let you add fun and engaging effects to your web pages. They improve user interaction and make your website look better.

CSS Animations let you create more advanced animations using keyframes. You can set properties like how long the animation lasts, its speed, and when it starts. With CSS Animations, you can make elements move, rotate, scale, and fade on your web page.

Creating a CSS Bounce Animation

Start by creating an HTML element that you want to animate. In this case, we'll use a <div> element:


.bounce-box {
  width: 150px;
  height: 150px;
  background-color: orange;
  position: relative;
  bottom: 0;
}
@keyframes bounceAnimation {
  0% { bottom: 0; }
  50% { bottom: 100px; }
  100% { bottom: 0; }
}
.bounce-box {
  animation: bounceAnimation 1s ease in-out;
}


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

Set the initial CSS properties for the element. In this example, we'll give the box an orange color and position it at the bottom of the container:


.bounce-box {
  width: 150px;
  height: 150px;
  background-color: orange;
  position: relative;
  bottom: 0;
}

Define the animation keyframes using @keyframes. We'll create an animation that makes the element bounce:


@keyframes bounceAnimation {
  0% { bottom: 0; }
  50% { bottom: 100px; }
  100% { bottom: 0; }
}

Apply the animation to the element, specifying the animation name and duration. For this example, we will use the bounceAnimation we defined earlier and set a duration of 1 second:

.bounce-box {
  animation: bounceAnimation 1s ease in-out;
}

Explanation: With these steps, the <div> element will animate by bouncing up and down over a duration of 1 second.

This tutorial demonstrates the fundamentals of creating a simple CSS animation, giving you the tools to enhance your web designs with motion.

Note: We aim to make learning easier by sharing top-quality tutorials, but please remember that tutorials may not be 100% accurate, as occasional mistakes can happen. Once you've mastered the language, we highly recommend consulting the official documentation to stay updated with the latest changes. If you spot any errors, please feel free to report them to help us improve.

top-home