Advertisement
n3ito

[code] shake on hover image

May 21st, 2022
217
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.92 KB | None | 0 0
  1. <style>
  2. img {
  3.  
  4. border: 3px double black;
  5.  
  6. }
  7.  
  8. img:hover {
  9. /* Start the shake animation and make the animation last for 0.5 seconds */
  10. animation: shake 0.5s;
  11. /* When the animation is finished, start again */
  12. animation-iteration-count: infinite;
  13. }
  14. @keyframes shake {
  15. 0% { transform: translate(1px, 1px) rotate(0deg); }
  16. 10% { transform: translate(-1px, -2px) rotate(-1deg); }
  17. 20% { transform: translate(-3px, 0px) rotate(1deg); }
  18. 30% { transform: translate(3px, 2px) rotate(0deg); }
  19. 40% { transform: translate(1px, -1px) rotate(1deg); }
  20. 50% { transform: translate(-1px, 2px) rotate(-1deg); }
  21. 60% { transform
  22. : translate(-3px, 1px) rotate(0deg); }
  23. 70% { transform: translate(3px, 1px) rotate(-1deg); }
  24. 80% { transform: translate(-1px, -1px) rotate(1deg); }
  25. 90% { transform: translate(1px, 2px) rotate(0deg); }
  26. 100% { transform: translate(1px, -2px) rotate(-1deg); }
  27. }
  28. </style>
  29. <div id="img"><img src="imgurl">
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement