CSS দিয়ে শেক অ্যানিমেশন ইফেক্ট তৈরি

শেক অ্যানিমেশন ইফেক্ট একটি এলিমেন্টকে আপ-ডাউন বা সাইড টু সাইড მოძায়।

উদাহরণ

<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 shake {             0%, 100% {-webkit-transform: translateX(0);}             10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}             20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}          }          @keyframes shake {             0%, 100% {transform: translateX(0);}             10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}             20%, 40%, 60%, 80% {transform: translateX(10px);}          }          .shake {             -webkit-animation-name: shake;             animation-name: shake;          }          </style>    </head>    <body>       <div id = "animated-example" class = "animated shake"></div>       <button onclick = "myFunction()">Reload page</button>       <script>          function myFunction() {             location.reload();          }       </script>    </body> </html>