dracslaura

rubberband links

Oct 12th, 2021 (edited)
378
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2.  
  3. a.rubber {
  4. display: inline-block;
  5. font-size:2em;
  6. text-decoration: none;
  7. animation-duration: 1s;
  8. animation-fill-mode: both;
  9. animation-iteration-count: 1;
  10. }
  11.  
  12. a.rubber:hover {
  13. animation-name: rubberBand;
  14. animation-iteration-count: infinite;
  15. }
  16.  
  17. @keyframes rubberBand {
  18. from {
  19. transform: scale3d(1, 1, 1);
  20. }
  21.  
  22. 30% {
  23. transform: scale3d(1.25, 0.75, 1);
  24. }
  25.  
  26. 40% {
  27. transform: scale3d(0.75, 1.25, 1);
  28. }
  29.  
  30. 50% {
  31. transform: scale3d(1.15, 0.85, 1);
  32. }
  33.  
  34. 65% {
  35. transform: scale3d(.95, 1.05, 1);
  36. }
  37.  
  38. 75% {
  39. transform: scale3d(1.05, .95, 1);
  40. }
  41.  
  42. to {
  43. transform: scale3d(1, 1, 1);
  44. }
  45. }
  46.  
  47. .rubberBand {
  48. -webkit-animation-name: rubberBand;
  49. animation-name: rubberBand;
  50. }
  51. </style>
  52. <a href="#" class="rubber">Rubber Band</a>
RAW Paste Data