CSS Examples

How to Animate Jumping Icons using CSS

In this example, we will learn how to animate jumping icons using CSS. Here, we will use some CSS properties like the animation to set the animation properties, @keyframes to set the styles of the animation in the specified time periods, and transform to move icons up and down.

Prerequisites

CSS animation property
CSS @keyframes property
CSS transform property

Example

.icons {
            font-size: 50px;
            display: inline-block;
            animation: float 4s infinite ease-in-out;
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(20px);
            }

            100% {
                transform: translateY(0px);
            }
        }

Output

Conclusion

In this example, we will learn how to animate jumping icons using CSS. We used animation , @keyframes , and transform properties of CSS to make the icons jump up and down over a period of time.