animations.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. /**
  2. * @name animations.css
  3. * @author Tobias Reich
  4. * @copyright 2014 by Tobias Reich
  5. */
  6. /* Animation Setter ------------------------------------------------*/
  7. .fadeIn {
  8. -webkit-animation-name: fadeIn;
  9. -webkit-animation-duration: .3s;
  10. -webkit-animation-fill-mode: forwards;
  11. -moz-animation-name: fadeIn;
  12. -moz-animation-duration: .3s;
  13. -moz-animation-fill-mode: forwards;
  14. animation-name: fadeIn;
  15. animation-duration: .3s;
  16. animation-fill-mode: forwards; }
  17. .fadeOut {
  18. -webkit-animation-name: fadeOut;
  19. -webkit-animation-duration: .3s;
  20. -webkit-animation-fill-mode: forwards;
  21. -moz-animation-name: fadeOut;
  22. -moz-animation-duration: .3s;
  23. -moz-animation-fill-mode: forwards;
  24. animation-name: fadeOut;
  25. animation-duration: .3s;
  26. animation-fill-mode: forwards; }
  27. .contentZoomIn {
  28. -webkit-animation-name: zoomIn;
  29. -webkit-animation-duration: .2s;
  30. -webkit-animation-fill-mode: forwards;
  31. -moz-animation-name: zoomIn;
  32. -moz-animation-duration: .2s;
  33. -moz-animation-fill-mode: forwards;
  34. animation-name: zoomIn;
  35. animation-duration: .2s;
  36. animation-fill-mode: forwards; }
  37. .contentZoomOut {
  38. -webkit-animation-name: zoomOut;
  39. -webkit-animation-duration: .2s;
  40. -webkit-animation-fill-mode: forwards;
  41. -moz-animation-name: zoomOut;
  42. -moz-animation-duration: .2s;
  43. -moz-animation-fill-mode: forwards;
  44. animation-name: zoomOut;
  45. animation-duration: .2s;
  46. animation-fill-mode: forwards; }
  47. /* moveUp ------------------------------------------------*/
  48. @-webkit-keyframes moveUp {
  49. 0% {
  50. -webkit-transform: translateY(30px);
  51. opacity: 0;
  52. }
  53. 100% {
  54. -webkit-transform: translateY(0);
  55. opacity: 1;
  56. }
  57. }
  58. @-moz-keyframes moveUp {
  59. 0% {
  60. opacity: 0;
  61. }
  62. 100% {
  63. opacity: 1;
  64. }
  65. }
  66. @keyframes moveUp {
  67. 0% {
  68. transform: translateY(30px);
  69. opacity: 0;
  70. }
  71. 100% {
  72. transform: translateY(0);
  73. opacity: 1;
  74. }
  75. }
  76. /* fadeIn ------------------------------------------------*/
  77. @-webkit-keyframes fadeIn {
  78. 0% {
  79. opacity: 0;
  80. }
  81. 100% {
  82. opacity: 1;
  83. }
  84. }
  85. @-moz-keyframes fadeIn {
  86. 0% {
  87. opacity: 0;
  88. }
  89. 100% {
  90. opacity: 1;
  91. }
  92. }
  93. @keyframes fadeIn {
  94. 0% {
  95. opacity: 0;
  96. }
  97. 100% {
  98. opacity: 1;
  99. }
  100. }
  101. /* fadeOut ------------------------------------------------*/
  102. @-webkit-keyframes fadeOut {
  103. 0% {
  104. opacity: 1;
  105. }
  106. 100% {
  107. opacity: 0;
  108. }
  109. }
  110. @-moz-keyframes fadeOut {
  111. 0% {
  112. opacity: 1;
  113. }
  114. 100% {
  115. opacity: 0;
  116. }
  117. }
  118. @keyframes fadeOut {
  119. 0% {
  120. opacity: 1;
  121. }
  122. 100% {
  123. opacity: 0;
  124. }
  125. }
  126. /* moveBackground ------------------------------------------------*/
  127. @-webkit-keyframes moveBackground {
  128. 0% {
  129. background-position-x: 0px;
  130. }
  131. 100% {
  132. background-position-x: -100px;
  133. }
  134. }
  135. @-moz-keyframes moveBackground {
  136. 0% {
  137. background-position-x: 0px;
  138. }
  139. 100% {
  140. background-position-x: -100px;
  141. }
  142. }
  143. @keyframes moveBackground {
  144. 0% {
  145. background-position-x: 0px;
  146. }
  147. 100% {
  148. background-position-x: -100px;
  149. }
  150. }
  151. /* zoomIn ------------------------------------------------*/
  152. @-webkit-keyframes zoomIn {
  153. 0% {
  154. opacity: 0;
  155. -webkit-transform: scale(.8);
  156. }
  157. 100% {
  158. opacity: 1;
  159. -webkit-transform: scale(1);
  160. }
  161. }
  162. @-moz-keyframes zoomIn {
  163. 0% {
  164. opacity: 0;
  165. }
  166. 100% {
  167. opacity: 1;
  168. }
  169. }
  170. @keyframes zoomIn {
  171. 0% {
  172. opacity: 0;
  173. transform: scale(.8);
  174. }
  175. 100% {
  176. opacity: 1;
  177. transform: scale(1);
  178. }
  179. }
  180. /* zoomOut ------------------------------------------------*/
  181. @-webkit-keyframes zoomOut {
  182. 0% {
  183. opacity: 1;
  184. -webkit-transform: scale(1);
  185. }
  186. 100% {
  187. opacity: 0;
  188. -webkit-transform: scale(.8);
  189. }
  190. }
  191. @-moz-keyframes zoomOut {
  192. 0% {
  193. opacity: 1;
  194. }
  195. 100% {
  196. opacity: 0;
  197. }
  198. }
  199. @keyframes zoomOut {
  200. 0% {
  201. opacity: 1;
  202. transform: scale(1);
  203. }
  204. 100% {
  205. opacity: 0;
  206. transform: scale(.8);
  207. }
  208. }
  209. /* popIn ------------------------------------------------*/
  210. @-webkit-keyframes popIn {
  211. 0% {
  212. opacity: 0;
  213. -webkit-transform: scale(0);
  214. }
  215. 100% {
  216. opacity: 1;
  217. -webkit-transform: scale(1);
  218. }
  219. }
  220. @-moz-keyframes popIn {
  221. 0% {
  222. opacity: 0;
  223. -moz-transform: scale(0);
  224. }
  225. 100% {
  226. opacity: 1;
  227. -moz-transform: scale(1);
  228. }
  229. }
  230. @keyframes popIn {
  231. 0% {
  232. opacity: 0;
  233. transform: scale(0);
  234. }
  235. 100% {
  236. opacity: 1;
  237. transform: scale(1);
  238. }
  239. }
  240. /* pulse ------------------------------------------------*/
  241. @-webkit-keyframes pulse {
  242. 0% {
  243. opacity: 1;
  244. }
  245. 50% {
  246. opacity: 0.3;
  247. }
  248. 100% {
  249. opacity: 1;
  250. }
  251. }
  252. @-moz-keyframes pulse {
  253. 0% {
  254. opacity: 1;
  255. }
  256. 50% {
  257. opacity: 0.8;
  258. }
  259. 100% {
  260. opacity: 1;
  261. }
  262. }
  263. @keyframes pulse {
  264. 0% {
  265. opacity: 1;
  266. }
  267. 50% {
  268. opacity: 0.8;
  269. }
  270. 100% {
  271. opacity: 1;
  272. }
  273. }