Bouncing Arrow

There is no more direct way to lead readers down a page than by telling them to scroll down. That’s what makes arrow icons so effective, and with this quick snippet you’ll be able to make them standout even more with a bounce.

To create a bouncing animation we’ll be using CSS keyframes. Animations are one of the coolest things about CSS as they allow us to bypass JavaScript to create simple effects.

However, for full browser support (CSS animations are still relatively new), the code to produce them can get repetitive to account for different browser prefixes.

Thankfully once we’ve created the animation we can apply a single HTML class to any element to make it bounce.

I rarely work with animations so if you see a way to simplify the code below I’d greatly appreciate you letting me know in the comments!

Add the Animation Styles into your style.css file:

/* BOUNCE EFFECT */

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); transform: translateY(0); }
	40% { -moz-transform: translateY(-7px); transform: translateY(-7px); }
	60% { -moz-transform: translateY(-4px); transform: translateY(-4px); }
}
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
	40% { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
	60% { -webkit-transform: translateY(-4px); transform: translateY(-4px); }
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
	40% { -moz-transform: translateY(-7px); -ms-transform: translateY(-7px); -webkit-transform: translateY(-7px); transform: translateY(-7px); }
	60% { -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -webkit-transform: translateY(-4px); transform: translateY(-4px); }
}

.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}

Like I said, the code is long! If you’d like, you can minify this long CSS once you’re done tweaking it so it takes up less space in your stylesheet.

You can adjust the range of motion (how far up/down the bounce goes) in the keyframes (make sure to use the same values across different keyframes) and increase/decrease the time it takes for the animation to play out in the bounce class (3s = 3 seconds).

It will take you a few edits before you understand how the values work, so don’t be afraid to experiment!

Once we have this CSS code saved to our site we can now make any element on our pages bounce with the .bounce class! Use wisely.

Make an Arrow Icon Bounce

You saw that bouncing arrow at the top of this post right? Here’s the HTML I pasted into the post editor to make it work (uses a default MD font icon). You can use this anywhere in WordPress that accepts HTML (widgets, menus, posts, custom templates, etc.):

<p class="bounce text-center"><i class="md-icon md-icon-angle-down large-title"></i></p>

I highlighted the .bounce class in the code above—again, that’s all it takes to make any element on your page bounce!

Leave a Comment