CSS3 Animations With Examples

This article covers CSS3 animations with examples and lots of code examples to help you learn and master the CSS3 animations.

CSS3 animations provide a powerful way to create complex and dynamic animations on a webpage.

They can be used to animate any CSS property and can be applied to a wide range of elements.

CSS3 Animations are a powerful tool for creating dynamic and engaging web content. With the ability to animate almost any CSS property, CSS3 Animations can be used to create a wide range of effects from simple hover animations to complex animations with multiple stages.

In this guide, we will cover the basics of CSS3 Animations, including how to create keyframe animations and how to apply them to elements on a webpage. We will also provide plenty of code examples to help you get started with creating your own animations.

Getting Started with CSS3 Animations

To get started with CSS3 Animations, you first need to understand how to create keyframe animations. Keyframe animations allow you to define a series of steps that an element will go through during an animation.

Keyframe animations are created using the @keyframes rule. Here is an example of a simple keyframe animation that rotates an element:

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

In this example, we create a keyframe animation called “rotate” that rotates an element from 0 degrees to 360 degrees. The “from” and “to” keywords represent the start and end points of the animation.

Once you have created a keyframe animation, you can apply it to an element using the animation property. Here is an example of how to apply the “rotate” animation to an element:

.element {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

In this example, we apply the “rotate” animation to an element with the class “element”. We set the animation duration to 2 seconds and the iteration count to infinite, so the animation will continue to rotate the element indefinitely.

Common Animation Properties

There are many properties that you can use to customize your CSS3 Animations. Here are some of the most common properties that you will use when creating animations:

• animation-name: specifies the name of the keyframe animation to be applied.
• animation-duration: specifies the length of time that the animation should take to complete.
• animation-timing-function: specifies the timing function to be used for the animation.
• animation-delay: specifies the delay before the animation starts.
• animation-iteration-count: specifies the number of times that the animation should be repeated.
• animation-direction: specifies whether the animation should play forwards or backward.
• animation-fill-mode: specifies what styles should be applied to the element before and after the animation.

Here is an example that uses some of these properties to create a simple bouncing ball animation:

.ball {
  position: relative;
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    top: 0;
  }
  50% {
    top: -20px;
  }
  100% {
    top: 0;
  }
}

Animating Multiple Properties

One of the most powerful features of CSS3 Animations is the ability to animate multiple properties at once. This can be useful when creating complex animations that involve multiple stages and effects.

Here is an example that animates both the background color and text color of an element:

.element {
  animation-name: colorChange;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes colorChange {
  0% {
    background-color: #fff;
    color: #000;
  }
  50% {
    background-color: #000;
    color: #fff;
  }
  100% {
    background-color: #fff;
    color: #000;
  }
}

Advanced Animations

CSS3 Animations can be used to create much more complex animations than the simple examples we have shown so far. By combining keyframe animations with other CSS properties, you can create animations that are truly impressive.

One advanced animation technique is the use of multiple keyframe animations. Here is an example of an animation that uses two keyframe animations to create a ripple effect:

.ripple {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #00a2ff;
  border-radius: 50%;
  animation-name: ripple, fade;
  animation-duration: 1s, 1s;
  animation-iteration-count: infinite, 1;
  animation-timing-function: ease-in-out, ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
    opacity: 0.5;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

In this example, we create a circle element with a blue background color. We use two keyframe animations to create the ripple effect. The first keyframe animation, “ripple”, scales the element up and changes its opacity to create the ripple effect. The second keyframe animation, “fade”, fades the element out after the ripple animation has completed.

Examples of CSS3 Animations

In this section, we bring you lots of code examples for CSS3 animations which you will need to work on a day-to-day basis.

1. Fading in an element:

.fade-in {
  animation-name: fadeIn;
  animation-duration: 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

2. Rotating an element:

.rotate {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

3. Scaling an element:

.scale {
  animation-name: scale;
  animation-duration: 2s;
}

@keyframes scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

4. Moving an element:

.move {
  animation-name: move;
  animation-duration: 2s;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

5. Bouncing an element:

.bounce {
  animation-name: bounce;
  animation-duration: 2s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

6. Spinning a loader:

.loader {
  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

7. Color-changing text:

.color-change {
  animation-name: colorChange;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes colorChange {
  0% {
    color: red;
  }
  25% {
    color: blue;
  }
  50% {
    color: green;
  }
  75% {
    color: orange;
  }
  100% {
    color: purple;
  }
}