1. Home
  2. Css
  3. Bounce animation

Bouncy animation using @keyframes and transform property.

#css#animation
<style>

    .bounce{
        animation: bounce 2s infinite;
    }
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-30px);
        }
        60% {
            transform: translateY(-15px);
        }
    }

</style>
<div class="bounce">Bouncy!</div>
Output:
Bouncy!
copy
Full Css cheatsheet