Today you’ll learn how to use CSS animations to make an arrow SVG icon bounce up and down. You’ll also learn how to tweak the animation type, timing, and duration with some of the many CSS animation properties.
Why is this useful?
Animations, when done right, can:
Guide your users
Encourage your users to take action
Grab your users attention (while you still have it).
You’ll need a text editor to follow along. If you don’t have your own local development environment, I recommend CodePen since. You can get started coding immediately.
Alright, let’s get started!
HTML: adding the container & arrow
To recreate the demo example, you need four HTML elements:
An image element for the arrow icon
A span element for the text label above the arrow
A container-footer element to wrap around the arrow & text label
A container element to wrap around all elements
Go to your HTML editor and add the following markup inside your <body></body> element:
The arrow code we added above is in SVG format. It’s based on the Font Awesome CSS icon library.
You can pick between hundreds of Font Awesome icons in SVG format from
this GitHub repo.
For this example, we’re embedding the SVG file directly in the HTML markup. This approach is called inline SVG. There are many other ways to add SVGs for different purposes — but I’ll save that for a different tutorial.
Now if you refresh your browser window, it should look like this:
What’s happening in the CSS:
First, we give the parent div element’s
.container class a height value of 100vh. This makes it take up the entire viewport, no matter the device. We use the display: flex; property to make it a flex container, which we’ll need for the arrow & text
label. We also give it a nice light blue background color.
Then we give the
.arrow-circle-down class a fixed width and a height of 40px so it doesn’t take up too much space. It should be noticeable, but not distracting.
The .text-label gets a bit of cosmetic styling with the uppercase property and some letter-spacing. Feel free to change this to your own preference.
We give the .container-footer a margin auto property to the top, right, and left. This forces the container footer and its children (icon & text) to the bottom of the parent container, which is where we want it. The bottom margin
gets a 1rem; value to make sure everything stays within the viewport when the arrow bounces.
The .container-footer class also gets a few flex properties, flex-direction: column; and align-items: center;. These properties make the text and icon elements stack on top of each other and align them
exactly in the center of the container footer.
For clarification, the
margin: auto auto 1rem auto declaration is a nice shorthand for the more verbose:
The second @keyframe block says that at the 40% mark, the arrow should move up, by giving it a position of Y(-20px).
The third keyframe block says that at the 60% mark, the arrow should move up again. This time we only move the arrow up around half as much as the first time, by giving it a position of Y(-12px).
in-between the two keyframes where the arrow moves up (40% and 60%) it moves back to Y(0) at the 50% keyframe. That’s what makes the arrow to move up and down twice, relatively fast within a short period.
I decided to only move the arrow by -12px on the third position because it mimics a real-life bouncing ball. The second down a ball hit the ground it will move up way less than the first time. How much a ball bounces (and how high) is of course determined by multiple factors, like weight, speed, material type etc. but that only gives us more wiggle room, since there isn’t one way to do it.
If the CSS for the animation is confusing, try messing around with the duration and CSS
transform translate property. With a bit of practice, it’ll be much easier to connect the dots.
Try to give the 40% keyframe a transform translate property of -48px and see what happens.
Try to give the CSS
animation property a duration of 5 seconds instead of 2. Then try to give it a value of 100ms (you can use milliseconds instead of seconds).
It’s often easier to drive a concept home if you experiment with the extremes. That’s usually where I have my “aha” moments.
CSS animations have countless possibilities. Let’s briefly check out a few variations we can make to our existing animation.
The animation-delay property
Right now your arrow bounces as soon as your webpage has been loaded. You might want to delay it a bit, so your users aren’t distracted within seconds of entering your site.
You can do that by adding the
animation delay property to your
.bounce class, like this:
But tread carefully with infinite animations. Nobody likes animations that spin around forever.
An exception would be if you have some type of living space background with a bunch of tiny stars with subtle blinking animations. You might want to loop/repeat an animation for that type of purpose, to keep the atmosphere dynamic.
To make this code work in all modern browsers, you should use autoprefixer. I didn’t add them in the code here because I wanted to keep the code shorter and easier to read. If you go to this CodePen you can get all the code, including the prefixed properties.