Make an Icon Bounce

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

2 Likes

Great tip. I made something similar with a combination of setting states every x seconds and changing the padding of the parent group of the icon when the state changes. With a transition of the padding of the group it looks smooth as well!

1 Like

I have an element that bounces, but simply used bubbles built in bounce animation action. Is there any reason I’d be better using the method above?

Can change distance of bounce, plane of travel, and speed

2 Likes