Advertisement
urgonic

Untitled

Jul 11th, 2021
495
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.75 KB | None | 0 0
  1. <style>
  2. .infinitespin {
  3. -webkit-animation-name: spin;
  4. -webkit-animation-duration: 10000ms;
  5. -webkit-animation-iteration-count: infinite;
  6. -webkit-animation-timing-function: linear;
  7. -moz-animation-name: spin;
  8. -moz-animation-duration: 10000ms;
  9. -moz-animation-iteration-count: infinite;
  10. -moz-animation-timing-function: linear;
  11. -ms-animation-name: spin;
  12. -ms-animation-duration: 10000ms;
  13. -ms-animation-iteration-count: infinite;
  14. -ms-animation-timing-function: linear;
  15. -o-transition: rotate(3600deg);
  16. }
  17.  
  18. @-moz-keyframes spin {
  19. from {
  20. -moz-transform: rotate(0deg);
  21. }
  22. to {
  23. -moz-transform: rotate(360deg);
  24. }
  25. }
  26.  
  27. @-webkit-keyframes spin {
  28. from {
  29. -webkit-transform: rotate(0deg);
  30. }
  31. to {
  32. -webkit-transform: rotate(360deg);
  33. }
  34. }
  35.  
  36. @keyframes spin {
  37. from {
  38. transform: rotate(0deg);
  39. }
  40. to {
  41. transform: rotate(360deg);
  42. }
  43. }
  44.  
  45. .tilt {
  46. -webkit-transition: 0.2s;
  47. -moz-transition: 0.2s;
  48. -o-transition: 0.2s;
  49. -ms-transition: 0.2s;
  50. transition: 0.2s;
  51. }
  52.  
  53. .tilt:hover {
  54. -webkit-transform: rotate(5deg);
  55. -moz-transform: rotate(5deg);
  56. -o-transform: rotate(5deg);
  57. -ms-transform: rotate(5deg);
  58. transform: rotate(5deg);
  59. }
  60.  
  61. .twist,
  62. .easyhome {
  63. -webkit-transition: 1s;
  64. -moz-transition: 1s;
  65. -o-transition: 1s;
  66. -ms-transition: 1s;
  67. transition: 1s;
  68. }
  69.  
  70. .twist:hover,
  71. .easyhome:hover {
  72. -webkit-transform: rotate(360deg);
  73. -moz-transform: rotate(360deg);
  74. -o-transform: rotate(360deg);
  75. -ms-transform: rotate(360deg);
  76. transform: rotate(360deg);
  77. }
  78.  
  79. .slow-twist {
  80. -webkit-transition: 8s;
  81. -moz-transition: 8s;
  82. -o-transition: 8s;
  83. -ms-transition: 8s;
  84. transition: 8s;
  85. }
  86.  
  87. .slow-twist:hover {
  88. -webkit-transform: rotate(360deg);
  89. -moz-transform: rotate(360deg);
  90. -o-transform: rotate(360deg);
  91. -ms-transform: rotate(360deg);
  92. transform: rotate(360deg);
  93. }
  94.  
  95. .blink {
  96. animation: blink-animation 1.5s steps(3, start) infinite;
  97. -webkit-animation: blink-animation 1.5s steps(3, start) infinite;
  98. }
  99.  
  100. @keyframes blink-animation {
  101. to {
  102. visibility: hidden;
  103. }
  104. }
  105.  
  106. @-webkit-keyframes blink-animation {
  107. to {
  108. visibility: hidden;
  109. }
  110. }
  111.  
  112. /*tossing*/
  113.  
  114. .tossing,
  115. .easyhome {
  116. animation-name: tossing;
  117. -webkit-animation-name: tossing;
  118. animation-duration: 8s;
  119. -webkit-animation-duration: 8s;
  120. animation-iteration-count: infinite;
  121. -webkit-animation-iteration-count: infinite;
  122. }
  123.  
  124. @keyframes tossing {
  125. 0% {
  126. transform: rotate(-4deg);
  127. }
  128. 50% {
  129. transform: rotate(4deg);
  130. }
  131. 100% {
  132. transform: rotate(-4deg);
  133. }
  134. }
  135.  
  136. @-webkit-keyframes tossing {
  137. 0% {
  138. -webkit-transform: rotate(-4deg);
  139. }
  140. 50% {
  141. -webkit-transform: rotate(4deg);
  142. }
  143. 100% {
  144. -webkit-transform: rotate(-4deg);
  145. }
  146. }
  147.  
  148. .spin {
  149. -webkit-transition: -webkit-transform .8s ease-in-out;
  150. transition: transform .8s ease-in-out;
  151. }
  152.  
  153. .spin:hover {
  154. -webkit-transform: rotate(360deg);
  155. transform: rotate(360deg);
  156. }
  157.  
  158. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement