πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
Making a Jumping Box Animation Using Only CSS

Making a Jumping Box Animation Using Only CSS

Exploring CSS Animations
Ferenc Almasi β€’ Last updated 2021 November 11 β€’ Read time 5 min read
Get your weekly dose of webtips
  • twitter
  • facebook
CSS

With the introduction of CSS3, it became a reality to create complex animations natively, right inside the browser without having to rely on 3rd party animators.

Implementations done using such applications meant that we can only use the end result as a gif or even worse, as an embed flash file.

CSS now offers us various techniques to achieve the same with a couple of lines of code. To validate this, the final animation in this article will require less than 10 lines. Of course, it all depends on the complexity of the animation. So what will be doing?

If you’ve seen my recent article about Parcel + React, you may have come across the Parcel animation I was making. If you haven’t seen it, here it once more:

Jumping box animation

The animation is pretty simple yet effective. We can raise awareness and it can work as a call to action in the right context. Making animations your primary source for attracting user attention however should be a relic from the 90s.


The Starting Point

The base is only made of a radial gradient with the icon positioned to the center:

Copied to clipboard!
body {
    background: #7db9e8;
    background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%, #21374b 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#21374b 100%);
    background: radial-gradient(ellipse at center, #7db9e8 0%,#21374b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#21374b',GradientType=1 );
    margin: 0;
    width: 100vw;
    height: 100vh;

    #parcel {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        animation: jump 1.2s infinite;
    }
}
index.scss

Here we are defining an animation called β€œjump” that will play over 1.2s and will be repeated indefinitely.

The initial state of the package

Without it, it looks kind of depressing so let’s make it moving!


The Anatomy of the Animation

To fully understand what we are going to do and why, we want to take a look at the animation, frame by frame, and note what steps we need to take in order to achieve the end result:

  • We want to start from a distorted view and move the parcel upwards.
  • If it reaches the peak, we give it a shake and move it back to its original position.

All we are going to use for that are CSS transforms. We are starting with a distorted package, from a squashed position. This is what will make the impression of making momentum to jump upwards. To make it look flat, we can use scale to resize it disproportionately:

Copied to clipboard!
@keyframes jump {
    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
}
index.scss

To keep it in its original position, we also have to pass translate to make sure it stays at the dead center. scale takes in the x-axis first then the y-axis. This means we are reducing its size on the y-axis to 75% and making it 125% of its original size horizontally. This will give us the following look:

The distorted view of the package

From this position, we want to move it upwards while also removing the distorted scaling.

Copied to clipboard!
@keyframes jump {
    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
    50% { transform: translate(-50%, -150%) scale(1, 1); }
}
index.scss

By the half of the animation, it should reach the top, so I chose 50% for the next step. We set back the scaling to 1:1 ratio and move it on the y-axis -100%, which means it will move up. Looking at the animation at this stage will seem odd as we are starting from a squashed position and end up with its original size. When the animation is repeated, it will instantly jump into the scaled position which will make the animation jagged.

How the CSS animation should look like

We want the end of the iteration to look the same as the beginning of the next one to create a smooth animation. To fix it, we simply need to return to the initial state so we just make the same transformations for 100% we have for 0%.

Copied to clipboard!
@keyframes jump {
    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
    50% { transform: translate(-50%, -150%) scale(1, 1); }
    100% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
}
index.scss

All that’s remaining, is making the box shake at the peak of its trajectory.

Looking to improve your skills? Master CSS from start to finish.
Master CSSinfo Remove ads

Creating the Shaking

When the parcel hits the top, we start rotating it back and forth, four times exactly. For that, we can use the rotate transform:

Copied to clipboard!
@keyframes jump {
    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
    50% { transform: translate(-50%, -150%) scale(1, 1); }
    55% { transform: translate(-50%, -150%) rotate(15deg); }
    60% { transform: translate(-50%, -150%) rotate(-15deg); }
    65% { transform: translate(-50%, -150%) rotate(15deg); }
    70% { transform: translate(-50%, -150%) rotate(-15deg); }
    100% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
}
index.scss

We start by rotating it 15Β° to the right then rotating it 30Β° to the left. (-15Β° to its original position) We repeat the two steps one more time and then return to the starting position. I used a step of 5% for each rotation. You can experiment with the timing. Increasing the interval between the steps will slow down the rotation, decreasing it will make it faster.

The end result is a happily jumping box. πŸ“¦ Feel free to play around with the end project on Codepen.

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.