If like me, You like subtle animations on your website, You can use a simple CSS Trick to make your animations bounce on hover.

Firstly you’re going to want to decide what element you’d like to bounce. In this example I’m going to use Icon Links

You’re going to need to either create a new element or add a class to an existing one. Lets say we’re creating a new one.

<div class="bouncing-icon">
<a href="#"><i class="fab fa-facebook"></i></a>
</div>

What this piece of code does is create a new link with a Facebook icon inside a container called “bouncing-icon”. You can add as many icons as you require by duplicating the line starting <a href

Now you’re going to want to add some styling to it.


.bouncing-icon { display: block;}
.bouncing-icon a {
font-size: 36px;
color: #fff;
padding: 10px;
display:inline-block;
}
.bouncing-icon a:hover {
font-size: 36px;
color: #ff0066;
animation: bounce 1.5s infinite;
-webkit-animation: bounce 1.5s infinite;
-moz-animation: bounce 1.5s infinite;
-o-animation: bounce 1.5s infinite;
}

 

Now that you have the base styling you’re going to need to add the Bounce Animation to it, You can place this code below your other CSS

@-webkit-keyframes bounce {
0%, 
100% {
-webkit-transform: translateY(0);
} 
50% {
-webkit-transform: translateY(-10px);
}
}
@-moz-keyframes bounce {
0%, 
100% {
-moz-transform: translateY(0);
}
50% {
-moz-transform: translateY(-10px);
}
}
@-o-keyframes bounce {
0%,
100% {
-o-transform: translateY(0);
}
50% {
-o-transform: translateY(-10px);
}
}
@keyframes bounce {
0%, 
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}

And that’s all there is too it. Now you’ll be able to place a subtle bounce animation anywhere on your website!
If you require any help with this snippet, Please feel free to  Contact me


if you require any assitance with this snippet, feel free to Contact Me and i will be happy to assist you.