In order to make an icon bounce you can use the below CSS in an html element on the page
<style>
.ball {
animation: bounce 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
animation-iteration-count: infinite;
}
@keyframes bounce {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 50px, 0);
}
}
/* Prefix Support */
ball {
-webkit-animation-name: bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
}
}
</style>
For any icon you want to make bounce, add the ID attribute as below
{addClass: "ball"}
In order for this to work, you’ll need the classify plugin installed in the app
In the code above the use of 50px in the transform: translate3d ‘to’ section is how high the icon will bounce. You can change these values…the other values are for different dimensional axis, so you can change it to bounce not just up and down.
For more details on the code, reference this link