Pure CSS Arrow Down Bouncing Animation

Author
In CSS Animation, CSS Tutorial Last updated Jan 14, 2017
Make CSS Arrow Down Bouncing Animation

CSS Arrow Down Bouncing Animation

In this small tip, I am going to show you how to create a down arrow with bouncing animation by using pure CSS. 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 viable and attract the user. The user can quickly understand that this is something point to more information. By clicking the arrow, the user will able to see more information on your page.

It’s best practice to use only CSS for such small thing. This little script helps you to create 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 @-keyframes property. We also used transform property to handle it’s Y-six position.

CSS Arrow Down Bouncing Animation Implementation

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

Next Class bounce is used to create aniamtion.

<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 SVG path for an Icon.You can put your Image icon here or can define font face in CSS directly.

Styling

For styling, let’s get start 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 did 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 second. The bounce value is take 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 the demo below.

See the Pen Animated Scroll Down Arrow by codeconvey (@codeconvey) on CodePen.

Author

Ashfaq Ahmed is a freelance creative front-end and WordPress developer. He develops modern, highly interactive websites with cutting edge technologies. In his spare time, he loves to do blogging and web experiments.

Website: http://reverie-tech.com/

Social Links: