Klik untuk Preview → View

1. Dashboard → Layout / Post → HTML
2. Copy / Paste coding bawah ni

<style>
img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
</head>
<body>

<p>Hover over the image:</p>
<img src="https://giant.gfycat.com/FaroffAcclaimedGar.gif" alt="Doraemon" width="300" height="300">

</body>

3. Korang letak lah gambar apa pun.haha
4. Kat bawah ni korang boleh tengok browser mana yang support untuk transforms ni


5. Dah selesai save je. Dah jangan suka sangat dok gegar doraemon tu.. 🤣🤣