Bounce Scroll Down Arrow Archives - csshint - A designer hub https://csshint.com/tag/bounce-scroll-down-arrow/ Wed, 29 Jul 2020 07:28:22 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 Scroll Down Arrow With Bounce Animation https://csshint.com/scroll-arrow-bounce-animation/ Wed, 29 Jul 2020 07:27:47 +0000 http://csshint.com/?p=2882 Using CSS and jQuery to create a down arrow that bounces on the bottom of the browser screen. This Amazing Bounce Scroll Down Arrow snippet designed by Yannick Bisaillon. The Html [code language=”html”] <div class="arrow bounce"> <a class="fa fa-arrow-down fa-2x" href="#"></a> </div> [/code] CSS / Less [code language=”css”] @bg: #2d2d37; // Dark blue @primary: #fd6b21; […]

The post Scroll Down Arrow With Bounce Animation appeared first on csshint - A designer hub.

]]> Using CSS and jQuery to create a down arrow that bounces on the bottom of the browser screen. This Amazing Bounce Scroll Down Arrow snippet designed by Yannick Bisaillon.

Scroll Down Arrow With Bounce Animation

Demo : Scroll Down Arrow With Bounce Animation


The Html

[code language=”html”]
<div class="arrow bounce">
<a class="fa fa-arrow-down fa-2x" href="#"></a>
</div>
[/code]

CSS / Less

[code language=”css”]
@bg: #2d2d37; // Dark blue
@primary: #fd6b21; // Orange

body { background: @bg;}
a { color: white; text-decoration: none; }

.arrow {
text-align: center;
margin: 8% 0;
}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
[/code]

Bounce Scroll Down Arrow

The post Scroll Down Arrow With Bounce Animation appeared first on csshint - A designer hub.

]]>