您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

animation.css 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. @keyframes rotateme {
  2. from {
  3. transform: rotate(0deg);
  4. }
  5. to {
  6. transform: rotate(360deg);
  7. }
  8. }
  9. @-webkit-keyframes rotateme {
  10. from {
  11. -webkit-transform: rotate(0deg);
  12. }
  13. to {
  14. -webkit-transform: rotate(360deg);
  15. }
  16. }
  17. @-moz-keyframes rotateme {
  18. from {
  19. -moz-transform: rotate(0deg);
  20. }
  21. to {
  22. -moz-transform: rotate(360deg);
  23. }
  24. }
  25. @-o-keyframes rotateme {
  26. from {
  27. -o-transform: rotate(0deg);
  28. }
  29. to {
  30. -o-transform: rotate(360deg);
  31. }
  32. }
  33. .empty-boxed{
  34. animation-name: rotateme;
  35. animation-duration: 24s;
  36. animation-iteration-count: infinite;
  37. animation-timing-function: linear;
  38. -webkit-animation-name: rotateme;
  39. -webkit-animation-duration: 24s;
  40. -webkit-animation-iteration-count: infinite;
  41. -webkit-animation-timing-function: linear;
  42. -moz-animation-name: rotateme;
  43. -moz-animation-duration: 24s;
  44. -moz-animation-iteration-count: infinite;
  45. -moz-animation-timing-function: linear;
  46. -ms-animation-name: rotateme;
  47. -ms-animation-duration: 24s;
  48. -ms-animation-iteration-count: infinite;
  49. -ms-animation-timing-function: linear;
  50. -o-animation-name: rotateme;
  51. -o-animation-duration: 24s;
  52. -o-animation-iteration-count: infinite;
  53. -o-animation-timing-function: linear;
  54. }
  55. /* Bob */
  56. @-webkit-keyframes float-bob {
  57. 0% {
  58. -webkit-transform: translateY(-20px);
  59. transform: translateY(-20px);
  60. }
  61. 50% {
  62. -webkit-transform: translateY(-10px);
  63. transform: translateY(-10px);
  64. }
  65. 100% {
  66. -webkit-transform: translateY(-20px);
  67. transform: translateY(-20px);
  68. }
  69. }
  70. @keyframes float-bob {
  71. 0% {
  72. -webkit-transform: translateY(-20px);
  73. transform: translateY(-20px);
  74. }
  75. 50% {
  76. -webkit-transform: translateY(-10px);
  77. transform: translateY(-10px);
  78. }
  79. 100% {
  80. -webkit-transform: translateY(-20px);
  81. transform: translateY(-20px);
  82. }
  83. }
  84. @-webkit-keyframes zoom-fade {
  85. 0% {
  86. -webkit-transform: scale(0.9);
  87. transform: scale(0.9);
  88. }
  89. 50% {
  90. -webkit-transform: scale(1);
  91. transform: scale(1);
  92. }
  93. 100% {
  94. -webkit-transform: scale(0.9);
  95. transform: scale(0.9);
  96. }
  97. }
  98. @keyframes zoom-fade {
  99. 0% {
  100. -webkit-transform: scale(0.9);
  101. transform: scale(0.9);
  102. }
  103. 50% {
  104. -webkit-transform: scale(1);
  105. transform: scale(1);
  106. }
  107. 100% {
  108. -webkit-transform: scale(0.9);
  109. transform: scale(0.9);
  110. }
  111. }
  112. .empty-boxed{
  113. animation-name: float-bob;
  114. animation-duration: 2s;
  115. animation-iteration-count: infinite;
  116. animation-timing-function: linear;
  117. -webkit-animation-name: float-bob;
  118. -webkit-animation-duration: 2s;
  119. -webkit-animation-iteration-count: infinite;
  120. -webkit-animation-timing-function: linear;
  121. -moz-animation-name: float-bob;
  122. -moz-animation-duration: 2s;
  123. -moz-animation-iteration-count: infinite;
  124. -moz-animation-timing-function: linear;
  125. -ms-animation-name: float-bob;
  126. -ms-animation-duration: 2s;
  127. -ms-animation-iteration-count: infinite;
  128. -ms-animation-timing-function: linear;
  129. -o-animation-name: float-bob;
  130. -o-animation-duration: 2s;
  131. -o-animation-iteration-count: infinite;
  132. -o-animation-timing-function: linear;
  133. }
  134. .choice-section:after,
  135. .welcome-section .image-column .inner-column:before,
  136. .choice-section .image-column .inner-column .image:before{
  137. animation-name: zoom-fade;
  138. animation-duration: 3s;
  139. animation-iteration-count: infinite;
  140. animation-timing-function: linear;
  141. -webkit-animation-name: zoom-fade;
  142. -webkit-animation-duration: 3s;
  143. -webkit-animation-iteration-count: infinite;
  144. -webkit-animation-timing-function: linear;
  145. -moz-animation-name: zoom-fade;
  146. -moz-animation-duration: 3s;
  147. -moz-animation-iteration-count: infinite;
  148. -moz-animation-timing-function: linear;
  149. -ms-animation-name: zoom-fade;
  150. -ms-animation-duration: 3s;
  151. -ms-animation-iteration-count: infinite;
  152. -ms-animation-timing-function: linear;
  153. -o-animation-name: zoom-fade;
  154. -o-animation-duration: 3s;
  155. -o-animation-iteration-count: infinite;
  156. -o-animation-timing-function: linear;
  157. }