Bounce the assets with CSS Animation

Objective

Animate the given images using CSS animations to show a bounce effect.

Description

Stack the assets and use CSS animations to show a bouncing effect. As shown in the mockup design, there is an image of a burger. Each item of this burger (buns, burger patty, lettuce.. ) are sliced and separated into an individual image with a transparent background. The goal of this exercise is to make these items bounce indefinitely.

 

Bounce effect

CSS Bounce animation effects

Template:

You can use the following template to fork and get started:

https://codesandbox.io/s/cssbounceanimationquestion-q20hw

Each component of the burger is added as an .png image in the assets directory.

Tasks

  • Each item should have a bouncing effect.
  • You can experiment with different animations using timing functions (linear, ease), duration, delay, etc.
  • Make sure that the images stack one below the other when the screen is resized.

Hints

  • You can move an object in the Y or X-axis in CSS using the transform property.
  • animation needs to be defined with the @keyframes at-rule which is then called the animation property.
.element {
  animation-name: bounce;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    //change css property
  }
  100% {
    //change css property
  }
}

Solution Walkthrough

Introduction

The bounce Animation effect is used to move the element quickly up, back, or away from a surface after hitting it. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style The animation property in CSS can be used to animate many CSS properties. Each animation needs to be defined with the @keyframes at-rule which is then called the animation property

.element {
  animation-name: bounce;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    //change css property
  }
  100% {
    //change css property
  }
}

Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end.

Solution walkthrough: Create a new folder and add the assets in this folder.

Create a new HTML file.

touch index.html

Each asset is an item of the burger that we want to build. Add each of these images and enclose it in a <div> in the newly created index.html file. The html file will look as follows:

<!-- index.html -->
<div class="box bounce-1">
  <img src="bun-top.png" alt="" />
</div>

<div class="box bounce-3">
  <img src="cucumber-1.png" alt="" />
</div>

<div class="box bounce-2">
  <img src="onions-1.png" alt="" />
</div>

Two CSS classes are attached to each div:

  • box
  • bounce-N

 

The box class will hold all common properties for the items such as setting a predefined width, animation-duration or animation-iteration-count. We will also use to set how much time it will take to execute the animation from start to finish using the animation-duration property.

 

Add the following CSS in the <style> tag ofindex.html

/* index.html */
.box {
  align-self: flex-end;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  margin: 0 auto 0 auto;
  transform-origin: bottom;
  width: 200px;
}

We have set animation-duration as 2 seconds that executes the animation in 2 seconds from start to end. We have used the “infinite” property to have the animation repeat indefinitely.

 

/* index.html */
.bounce-1 {
  animation-name: bounce-1;
  animation-timing-function: linear;
}
@keyframes bounce-1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(0);
  }
}

bounce-1 class specifies that the name of the @keyframes at-rule defining the keyframes for the animation sequence is named “bounce-1”. It also establishes preset acceleration curves as “linear”. Another option for animation-timing-function is “ease” or by creating a custom cubic Bézier curve.

 

In this case, we have three keyframes. The first one occurs at the start, the second one during the middle, and the third one at the end. At the start, the element will be at its initial position. During the 50% of its way through, the element will move up 80px in the Y-axis direction, and finally, at the end, it will come back to its initial position.