Pure CSS Arrow Down Bouncing Animation

In this tutorial, I’m going to show you how to create a CSS down arrow bouncing animation using pure CSS3. Basically, such arrow animation can be used in dropdown menu, accordion or some thing like that.

We saw a lot of websites using full-screen banner or slider. So, it’s good to keep the eye of the user to some information which is available below area.

Generally, when we add some animation to an element, it will be more visible and attract the user. The user can quickly understand that this is something point to more information.

By clicking the down arrow, the user will able to see more information on the same page.

It’s best practice to use only CSS for such small thing. This little script helps you to create an animated arrow. We don’t need to code a lot of getting this done.

All we need to use bounce animation which we can easily do using the CSS @-keyframes property. We also used transform property to handle its Y-six position.

Basic Markup for Down Arrow

Let’s first have a look HTML code which has a div with two different classes. The first class downArrow allow us to set the position of arrow center of the page.

Next Class bounce is used to create animations.

<div class="downArrow bounce">
  <img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
</div>

We have placed an image tag and add an SVG path for an Icon. You can put your Image icon here or can define font face in CSS directly.

CSS Styles for Bouncing Animation

For styling, let’s get started with body tag. To style the body, I set the beautiful orange background color to make it look more attractive.

This may not require if you are working on your own template. I have added to make the demo look good.

Next, I have done style to downArrow class and I have used the position fixed for alignment. The left value of 50% allow use to center the element, and the bottom one is 45% to align the center of the body.

body {
  background: #eb4924;
}
.downArrow{
	position: fixed;
	bottom: 45%;
	left: 50%;
}

After that, we used the animation for class .bounce and define the timer 3 seconds. The bounce value is taken from the @keyframe.

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

In addition, to get the browser support, we have to make sure to use both @-moz for Firefox and @-webkit for WebKit browsers like Chrome, etc. So, also add the following CSS into your project.

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@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(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

That’s it. We are done with this small CSS tip which will help you to create down arrow animation. Let have a look at the demo and download source.

You Might Be Interested In: