Css Tada动画效果（Css Tada Animation Effect）--- shake抖动效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


    <meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=0.5, maximum-scale=5.0' />

    <!--当前页面的三要素-->
    <title>demo</title>
    <meta name="description" content="demo" />
    <meta http-equiv="keywords" content="demo" />
    <!-- css -->
    <style>
      .animated {
        300px;
        height:300px;
        background:url(./aaa.png) no-repeat center/cover;
        padding-top: 95px;
        margin: 60px auto;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }
    
      @-webkit-keyframes tada {
        0% {
          -webkit-transform: scale(1);
        }
    
        10%,
        20% {
          -webkit-transform: scale(0.9) rotate(-3deg);
        }
    
        30%,
        50%,
        70%,
        90% {
          -webkit-transform: scale(1.1) rotate(3deg);
        }
    
        40%,
        60%,
        80% {
          -webkit-transform: scale(1.1) rotate(-3deg);
        }
    
        100% {
          -webkit-transform: scale(1) rotate(0);
        }
      }
    
      @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);
        }
      }
    
      .tada {
        -webkit-animation-name: tada;
        animation-name: tada;
      }
    </style>
</head>

<body>
 
  <div id="animated-example" class="animated tada"></div>
  <button onclick="myFunction()">Reload page</button>
  <script>
    function myFunction() {
      location.reload();
    }
  </script>
</body>

</html>
效果图：