•
Hover over the image: Step:1
Copy and paste the given code
<html><br /> <head></p> <style> .anim:hover { animation: shake 0.5s; animation-iteration-count: infinite; }</p> <p>@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> <p></head><br /> <body></p> <p>Hover over the image:</p> <p><img decoding="async" class="anim" src="pineapple-new.jpg" alt="Pineapple" width="300" height="300"></p> <p></body><br /> </html>
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
Δ
Leave a Reply