Bouncing CSS Animation Loader

Introduction

In this lab, we will be exploring the world of CSS animations by creating a bouncing loader animation. This lab is designed to help you understand how to use @keyframes to define animations, how to apply animations to elements using CSS, and how to control the timing and direction of animations. By the end of this lab, you will have a better understanding of how to create engaging and dynamic animations using CSS.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/CSSPreprocessorsGroup -.-> css/mixins("`Mixins`") css/CSSPreprocessorsGroup -.-> css/nesting("`Nesting`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/colors -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/margin_and_padding -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/borders -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/width_and_height -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/display_property -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/flexbox -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/backgrounds -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/animations -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/transformations -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/mixins -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/nesting -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} css/pseudo_classes -.-> lab-35171{{"`Bouncing CSS Animation Loader`"}} end

Bouncing Loader

index.html and style.css have already been provided in the VM.

To create a bouncing loader animation:

Define a @keyframes animation that uses the opacity and transform properties, with a single axis translation on transform: translate3d() for better performance.
Create a parent container with the class .bouncing-loader that uses display: flex and justify-content: center to center the bouncing circles.
Give the three <div> elements for the bouncing circles the same width, height, and border-radius: 50% to make them circular.
Apply the bouncing-loader animation to each of the three bouncing circles.
Use a different animation-delay for each circle and animation-direction: alternate to create the appropriate effect.

Here is the HTML code:

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

And here is the CSS code:

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -16px, 0);
  }
}

.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader > div {
  width: 16px;
  height: 16px;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Bouncing Loader lab. You can practice more labs in LabEx to improve your skills.

Bouncing CSS Animation Loader

Introduction

Skills Graph

Bouncing Loader

Summary

Other CSS Tutorials you may like