CSS Bounce and Elastic Animations

CSS bounce and elastic animations including bounce, bounceIn, bounceOut, rubberBand, jello, tada, wobble, and swing effects. CSS Bounce and Elastic Animations. These effects give elements a lively and flexible feel, from simple bouncing to elastic stretching and jello like movement. Ideal for buttons, icons, loaders, and entrances all with smooth, reusable CSS code examples and live demos.

Contents

  1. Bounce
  2. Bounce In
  3. Bounce In Up
  4. Bounce In Left
  5. Bounce In Right
  6. Bounce Out
  7. Bounce Out Down
  8. Bounce Out Up
  9. Bounce Out Left
  10. Bounce Out Right
  11. Rubber Band
  12. Jello
  13. Tada
  14. Wobble
  15. Swing

1. Bounce Animation

Demo Bounce Animation
HTML
<div class="demo-text bounce">Bounce Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounce {
    animation: bounce 1s both infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0) }
    40% {transform: translateY(-30px)}
    60% {transform: translateY(-15px)}
}
Run codeTry it yourself

2. Bounce In Animation

Demo Bounce In Animation
HTML
<div class="demo-text bounceIn">Bounce In Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounceIn {
    animation : bounceIn 1s both infinite;
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% { transform: scale(.9) }
    100% { transform: scale(1) }
}
Run codeTry it yourself

3. Bounce In Up Animation

Demo Bounce In Up Animation
HTML
<div class="demo-text bounceInUp">Bounce In Up Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounceInUp {
    animation : bounceInUp 1s both infinite;
}
@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(200px);
    }
    60% {
        opacity: 1;
        transform: translateY(-30px);
    }
    80% { transform: translateY(10px) }
    100% { transform: translateY(0) }
}
Run codeTry it yourself

4. Bounce In Left Animation

Demo Bounce In Left Animation
HTML
<div class="demo-text bounceInLeft">Bounce In Left Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounceInLeft {
    animation : bounceInLeft 1s both infinite;
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }
    60% {
        opacity: 1;
        transform: translateX(30px);
    }
    80% { transform: translateX(-10px) }
    100% { transform: translateX(0) }
}
Run codeTry it yourself

5. Bounce In Right Animation

Demo Bounce In Right Animation
HTML
<div class="demo-text bounceInRight">Bounce In Right Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounceInRight {
    animation : bounceInRight 1s both infinite;
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }
    60% {
        opacity: 1;
        transform: translateX(-30px);
    }
    80% { transform: translateX(10px) }
    100% { transform: translateX(0) }
}
Run codeTry it yourself

6. Bounce Out Animation

Demo Bounce Out Animation
HTML
<div class="demo-text bounceOut">Bounce Out Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounceOut {
    animation : bounceOut 1s both infinite;
}
@keyframes bounceOut {
    0% { transform: scale(1) }
    25% { transform: scale(.95) }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(.3);
    }
}
Run codeTry it yourself

7. Bounce Out Down

Demo Bounce Out Down Animation
HTML
<div class="demo-text bounceOutDown">Bounce Out Down Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounceOutDown {
    animation : bounceOutDown 1s both infinite;
}
@keyframes bounceOutDown {
    0% { transform: translateY(0) }
    20% {
        opacity: 1;
        transform: translateY(-20px);
    }
    100% {
        opacity: 0;
        transform: translateY(200px);
    }
}
Run codeTry it yourself

8. Bounce Out Up

Demo Bounce Out Up Animation
HTML
<div class="demo-text bounceOutUp">Bounce Out Up Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounceOutUp {
    animation : bounceOutUp 1s both infinite;
}
@keyframes bounceOutUp {
    0% { transform: translateY(0) }
    20% {
        opacity: 1;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateY(-200px);
    }
}
Run codeTry it yourself

9. Bounce Out Left

Demo Bounce Out Left Animation
HTML
<div class="demo-text bounceOutLeft">Bounce Out Left Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounceOutLeft {
    animation : bounceOutLeft 1s both infinite;
}

@keyframes bounceOutLeft {
    0% { transform: translateX(0) }
    20% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        opacity: 0;
        transform: translateX(-200px);
    }
}
Run codeTry it yourself

10. Bounce Out Right

Demo Bounce Out Right Animation
HTML
<div class="demo-text bounceOutRight">Bounce Out Right Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.bounceOutRight {
    animation : bounceOutRight 1s both infinite;
}

@keyframes bounceOutRight {
    0% { transform: translateX(0) }
    20% {
        opacity: 1;
        transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        transform: translateX(200px);
    }
}
Run codeTry it yourself

11. Rubber Band

Demo Rubber Band Animation
HTML
<div class="demo-text rubberBand">Rubber Band Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.rubberBand {
    animation : rubberBand 1s both infinite;
}

@keyframes rubberBand {
    0% { transform: scale3d(1, 1, 1) }
    30% { transform: scale3d(1.25, .75, 1) }
    40% { transform: scale3d(0.75, 1.25, 1) }
    50% { transform: scale3d(1.15, .85, 1) }
    65% { transform: scale3d(.95, 1.05, 1) }
    75% { transform: scale3d(1.05, .95, 1) }
    100% { transform: scale3d(1, 1, 1)}
}
Run codeTry it yourself

12. Jello

Demo Jello Animation
HTML
<div class="demo-text jello">Jello Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.jello {
    animation : jello 1s both infinite;
}

@keyframes jello {
    0%, 100%, 11.1% {transform: none }
    22.2% {transform: skewX(-12.5deg) skewY(-12.5deg) }
    33.3% {transform: skewX(6.25deg) skewY(6.25deg) }
    44.4% {transform: skewX(-3.125deg) skewY(-3.125deg) }
    55.5% {transform: skewX(1.5625deg) skewY(1.5625deg) }
    66.6% {transform: skewX(-.78125deg) skewY(-.78125deg) }
    77.7% {transform: skewX(0.390625deg) skewY(0.390625deg) }
    88.8% {transform: skewX(-.1953125deg) skewY(-.1953125deg) }
}
Run codeTry it yourself

13. Tada

Demo Tada Animation
HTML
<div class="demo-text tada">Tada Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.tada {
    animation : tada 1s both infinite;
}

@keyframes tada {
    0% { transform: scale(1) }
    10%, 20% { transform: scale(0.9) rotate(-3deg) }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg) }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg) }
    100% { transform: scale(1) rotate(0) }
}
Run codeTry it yourself

14. Wobble

Demo Wobble Animation
HTML
<div class="demo-text wobble">Wobble Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.wobble {
    animation : wobble 1s both infinite;
}

@keyframes wobble {
  0% { transform: translateX(0%) }
  15% { transform: translateX(-25%) rotate(-5deg) }
  30% { transform: translateX(20%) rotate(3deg) }
  45% { transform: translateX(-15%) rotate(-3deg) }
  60% { transform: translateX(10%) rotate(2deg) }
  75% { transform: translateX(-5%) rotate(-1deg) }
  100% { transform: translateX(0%) }
}
Run codeTry it yourself

15. Swing

Demo Swing Animation
HTML
<div class="demo-text swing">Swing Animation </div>
CSS
.demo-text {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.swing {
    animation : swing 1s both infinite;
}

@keyframes swing {
    20% { transform: rotate(15deg) }
    40% { transform: rotate(-10deg) }
    60% { transform: rotate(5deg) }
    80% { transform: rotate(-5deg) }
    100% { transform: rotate(0deg) }
}
Run codeTry it yourself