CSS - Wobble Effect

Quiz

Description

It provides to move an element or cause to move unsteadily from side to side.

Syntax

@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%); } 
}

Parameters

Transform − Transform applies to 2d and 3d transformation to an element.
Opacity − Opacity applies to an element to make translucence.

Example

<html>

<head>
  <style>
    .wobbleAnimated {
      background-image: url(/https/www.tutorialspoint.com/html/images/test.png);
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      margin-left: 100px;
      margin-top: 60px;
      -webkit-animation-duration: 3s;
      animation-duration: 3s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }


    @-webkit-keyframes wobble {
      0% {
        -webkit-transform: translateX(0%);
      }

      15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
      }

      30% {
        -webkit-transform: translateX(20%) rotate(3deg);
      }

      45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
      }

      60% {
        -webkit-transform: translateX(10%) rotate(2deg);
      }

      75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
      }

      100% {
        -webkit-transform: translateX(0%);
      }
    }

    @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%);
      }
    }

    .wobble {
      -webkit-animation-name: wobble;
      animation-name: wobble;
    }
  </style>
</head>

<body>

  <div id="wobbleAnimates" class="wobbleAnimated"></div>
  <button onclick="wobbleFun()">Click</button>

  <script>
    function wobbleFun() {
      document.getElementById("wobbleAnimates").classList.add('wobble');
    }
  </script>
</body>

</html>

Output

It will produce the following result:

css_animation.htm

Print Page