Pure CSS Arrow Down Bouncing Animation

Pure CSS Arrow Down Bouncing Animation

In this small tip, I am going to show you how to create a CSS down arrow bouncing animation by using pure CSS3. Such type of arrow animation is an excellent way to draw the attention of users to click on to see more information.

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.

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 @-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.

Bouncing Animation Styles

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%;
}

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;
}

To get the browser support, we have to make sure to use @-moz for Firefox and @-webkit for WebKit browsers like Chrome, etc.

@-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 tip which will help you with adding down arrow. Let have a look at the demo and download source.

Code ExamplesYou May Also Like