Hiệu ứng Wiggle (Lắc lư) với CSS Animation

Hiệu ứng wiggle làm phần tử chuyển động nhanh lên xuống hoặc qua lại qua lại với amplitude nhỏ.

Ví dụ

Thử chạy mã sau để triển khai hiệu ứng wiggle animation:

<html>
<head>
  <style>
    .animated {
      background-image: url(/css/images/logo.png);
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    @-webkit-keyframes wiggle {
      0% { -webkit-transform: skewX(9deg); }
      10% { -webkit-transform: skewX(-8deg); }
      20% { -webkit-transform: skewX(7deg); }
      30% { -webkit-transform: skewX(-6deg); }
      40% { -webkit-transform: skewX(5deg); }
      50% { -webkit-transform: skewX(-4deg); }
      60% { -webkit-transform: skewX(3deg); }
      70% { -webkit-transform: skewX(-2deg); }
      80% { -webkit-transform: skewX(1deg); }
      90% { -webkit-transform: skewX(0deg); }
      100% { -webkit-transform: skewX(0deg); }
    }
    @keyframes wiggle {
      0% { transform: skewX(9deg); }
      10% { transform: skewX(-8deg); }
      20% { transform: skewX(7deg); }
      30% { transform: skewX(-6deg); }
      40% { transform: skewX(5deg); }
      50% { transform: skewX(-4deg); }
      60% { transform: skewX(3deg); }
      70% { transform: skewX(-2deg); }
      80% { transform: skewX(1deg); }
      90% { transform: skewX(0deg); }
      100% { transform: skewX(0deg); }
    }
    .wiggle {
      -webkit-animation-name: wiggle;
      animation-name: wiggle;
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    .animated.wiggle {
      -webkit-animation-duration: 0.75s;
      animation-duration: 0.75s;
    }
  </style>
</head>
<body>
  <div id="animated-example" class="animated wiggle"></div>
  <button onclick="myFunction()">Reload page</button>
  <script>
    function myFunction() { location.reload(); }
  </script>
</body>
</html>