miitopias

individual letter spin duvet ju mp

Aug 24th, 2021 (edited)
322
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.14 KB | None | 0 0
  1. .spinny mark {
  2. background: none;
  3. font-size: 4em;
  4.  
  5. }
  6.  
  7. .spinny:hover mark {
  8. animation: spin 1s infinite;
  9. animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1);
  10. }
  11.  
  12. .spinny mark:nth-child(1) {
  13. animation-delay: 0.1s;
  14. display: inline-block;
  15. }
  16.  
  17. .spinny mark:nth-child(2) {
  18. animation-delay: 0.2s;
  19. display: inline-block;
  20. }
  21.  
  22. .spinny mark:nth-child(3) {
  23. animation-delay: 0.3s;
  24. display: inline-block;
  25. }
  26.  
  27. .spinny mark:nth-child(4) {
  28. animation-delay: 0.4s;
  29. display: inline-block;
  30. }
  31.  
  32. .spinny mark:nth-child(5) {
  33. animation-delay: 0.5s;
  34. display: inline-block;
  35. }
  36.  
  37. .spinny mark:nth-child(6) {
  38. animation-delay: 0.6s;
  39. display: inline-block;
  40. }
  41.  
  42. .spinny mark:nth-child(7) {
  43. animation-delay: 0.7s;
  44. display: inline-block;
  45. }
  46.  
  47. .spinny mark:nth-child(8) {
  48. animation-delay: 0.8s;
  49. display: inline-block;
  50. }
  51.  
  52. .spinny mark:nth-child(9) {
  53. animation-delay: 0.9s;
  54. display: inline-block;
  55. }
  56.  
  57. .spinny mark:nth-child(10) {
  58. animation-delay: 1s;
  59. display: inline-block;
  60. }
  61.  
  62. @keyframes spin {
  63. 100% {
  64. transform: rotateY(360deg);
  65. }
  66. }
Add Comment
Please, Sign In to add comment