animations.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. /**
  2. * @name animations.css
  3. * @author Philipp Maurer
  4. * @author Tobias Reich
  5. * @copyright 2013 by Philipp Maurer, Tobias Reich
  6. */
  7. /* bounceInDown ------------------------------------------------*/
  8. @-webkit-keyframes bounceInDown {
  9. 0% {
  10. -webkit-transform: translateY(-2000px);
  11. }
  12. 60% {
  13. -webkit-transform: translateY(30px);
  14. }
  15. 80% {
  16. -webkit-transform: translateY(-10px);
  17. }
  18. 100% {
  19. -webkit-transform: translateY(0);
  20. }
  21. }
  22. @-moz-keyframes bounceInDown {
  23. 0% {
  24. opacity: 0;
  25. }
  26. 100% {
  27. opacity: 1;
  28. }
  29. }
  30. @-ms-keyframes bounceInDown {
  31. 0% {
  32. -ms-transform: translateY(-2000px);
  33. }
  34. 60% {
  35. -ms-transform: translateY(30px);
  36. }
  37. 80% {
  38. -ms-transform: translateY(-10px);
  39. }
  40. 100% {
  41. -ms-transform: translateY(0);
  42. }
  43. }
  44. @-o-keyframes bounceInDown {
  45. 0% {
  46. -o-transform: translateY(-2000px);
  47. }
  48. 60% {
  49. -o-transform: translateY(30px);
  50. }
  51. 80% {
  52. -o-transform: translateY(-10px);
  53. }
  54. 100% {
  55. -o-transform: translateY(0);
  56. }
  57. }
  58. @keyframes bounceInDown {
  59. 0% {
  60. transform: translateY(-2000px);
  61. }
  62. 60% {
  63. transform: translateY(30px);
  64. }
  65. 80% {
  66. transform: translateY(-10px);
  67. }
  68. 100% {
  69. transform: translateY(0);
  70. }
  71. }
  72. /* bounceOutUp ------------------------------------------------*/
  73. @-webkit-keyframes bounceOutUp {
  74. 0% {
  75. -webkit-transform: translateY(0);
  76. }
  77. 20% {
  78. -webkit-transform: translateY(20px);
  79. }
  80. 100% {
  81. -webkit-transform: translateY(-2000px);
  82. }
  83. }
  84. @-moz-keyframes bounceOutUp {
  85. 0% {
  86. opacity: 1;
  87. }
  88. 100% {
  89. opacity: 0;
  90. }
  91. }
  92. @-ms-keyframes bounceOutUp {
  93. 0% {
  94. -ms-transform: translateY(0);
  95. }
  96. 20% {
  97. -ms-transform: translateY(20px);
  98. }
  99. 100% {
  100. -ms-transform: translateY(-2000px);
  101. }
  102. }
  103. @-o-keyframes bounceOutUp {
  104. 0% {
  105. -o-transform: translateY(0);
  106. }
  107. 20% {
  108. -o-transform: translateY(20px);
  109. }
  110. 100% {
  111. -o-transform: translateY(-2000px);
  112. }
  113. }
  114. @keyframes bounceOutUp {
  115. 0% {
  116. transform: translateY(0);
  117. }
  118. 20% {
  119. transform: translateY(20px);
  120. }
  121. 100% {
  122. transform: translateY(-2000px);
  123. }
  124. }
  125. /* moveUp ------------------------------------------------*/
  126. @-webkit-keyframes moveUp {
  127. 0% {
  128. -webkit-transform: translateY(1000px);
  129. }
  130. 100% {
  131. -webkit-transform: translateY(0px);
  132. }
  133. }
  134. @-moz-keyframes moveUp {
  135. 0% {
  136. opacity: 0;
  137. }
  138. 100% {
  139. opacity: 1;
  140. }
  141. }
  142. @-ms-keyframes moveUp {
  143. 0% {
  144. -ms-transform: translateY(1000px);
  145. }
  146. 100% {
  147. -ms-transform: translateY(0px);
  148. }
  149. }
  150. @-o-keyframes moveUp {
  151. 0% {
  152. -o-transform: translateY(1000px);
  153. }
  154. 100% {
  155. -o-transform: translateY(0px);
  156. }
  157. }
  158. @keyframes moveUp {
  159. 0% {
  160. transform: translateY(1000px);
  161. }
  162. 100% {
  163. transform: translateY(0px);
  164. }
  165. }
  166. /* moveDown ------------------------------------------------*/
  167. @-webkit-keyframes moveDown {
  168. 0% {
  169. -webkit-transform: translateY(-100px);
  170. }
  171. 100% {
  172. -webkit-transform: translateY(0);
  173. }
  174. }
  175. @-moz-keyframes moveDown {
  176. 0% {
  177. opacity: 0;
  178. }
  179. 100% {
  180. opacity: 1;
  181. }
  182. }
  183. @-ms-keyframes moveDown {
  184. 0% {
  185. -ms-transform: translateY(-100px);
  186. }
  187. 100% {
  188. -ms-transform: translateY(0);
  189. }
  190. }
  191. @-o-keyframes moveDown {
  192. 0% {
  193. -o-transform: translateY(-100px);
  194. }
  195. 100% {
  196. -o-transform: translateY(0);
  197. }
  198. }
  199. @keyframes moveDown {
  200. 0% {
  201. transform: translateY(-100px);
  202. }
  203. 100% {
  204. transform: translateY(0);
  205. }
  206. }
  207. /* fadeIn ------------------------------------------------*/
  208. @-webkit-keyframes fadeIn {
  209. 0% {
  210. opacity: 0;
  211. }
  212. 100% {
  213. opacity: 1;
  214. }
  215. }
  216. @-moz-keyframes fadeIn {
  217. 0% {
  218. opacity: 0;
  219. }
  220. 100% {
  221. opacity: 1;
  222. }
  223. }
  224. @-ms-keyframes fadeIn {
  225. 0% {
  226. opacity: 0;
  227. }
  228. 100% {
  229. opacity: 1;
  230. }
  231. }
  232. @-o-keyframes fadeIn {
  233. 0% {
  234. opacity: 0;
  235. }
  236. 100% {
  237. opacity: 1;
  238. }
  239. }
  240. @keyframes fadeIn {
  241. 0% {
  242. opacity: 0;
  243. }
  244. 100% {
  245. opacity: 1;
  246. }
  247. }
  248. /* fadeOut ------------------------------------------------*/
  249. @-webkit-keyframes fadeOut {
  250. 0% {
  251. opacity: 1;
  252. }
  253. 100% {
  254. opacity: 0;
  255. }
  256. }
  257. @-moz-keyframes fadeOut {
  258. 0% {
  259. opacity: 1;
  260. }
  261. 100% {
  262. opacity: 0;
  263. }
  264. }
  265. @-ms-keyframes fadeOut {
  266. 0% {
  267. opacity: 1;
  268. }
  269. 100% {
  270. opacity: 0;
  271. }
  272. }
  273. @-o-keyframes fadeOut {
  274. 0% {
  275. opacity: 1;
  276. }
  277. 100% {
  278. opacity: 0;
  279. }
  280. }
  281. @keyframes fadeOut {
  282. 0% {
  283. opacity: 1;
  284. }
  285. 100% {
  286. opacity: 0;
  287. }
  288. }
  289. /* moveBackground ------------------------------------------------*/
  290. @-webkit-keyframes moveBackground {
  291. 0% {
  292. background-position-x: 0px;
  293. }
  294. 100% {
  295. background-position-x: -33px;
  296. }
  297. }
  298. @-moz-keyframes moveBackground {
  299. 0% {
  300. background-position-x: 0px;
  301. }
  302. 100% {
  303. background-position-x: -33px;
  304. }
  305. }
  306. @-ms-keyframes moveBackground {
  307. 0% {
  308. background-position-x: 0px;
  309. }
  310. 100% {
  311. background-position-x: -33px;
  312. }
  313. }
  314. @-o-keyframes moveBackground {
  315. 0% {
  316. background-position-x: 0px;
  317. }
  318. 100% {
  319. background-position-x: -33px;
  320. }
  321. }
  322. @keyframes moveBackground {
  323. 0% {
  324. background-position-x: 0px;
  325. }
  326. 100% {
  327. background-position-x: -33px;
  328. }
  329. }
  330. /* zoomOut ------------------------------------------------*/
  331. @-webkit-keyframes zoomOut {
  332. 0% {
  333. opacity: 1;
  334. -webkit-transform: scale(1);
  335. }
  336. 100% {
  337. opacity: 0;
  338. -webkit-transform: scale(.5);
  339. }
  340. }
  341. @-moz-keyframes zoomOut {
  342. 0% {
  343. opacity: 1;
  344. }
  345. 100% {
  346. opacity: 0;
  347. }
  348. }
  349. @-ms-keyframes zoomOut {
  350. 0% {
  351. opacity: 1;
  352. }
  353. 100% {
  354. opacity: 0;
  355. }
  356. }
  357. @-o-keyframes zoomOut {
  358. 0% {
  359. opacity: 1;
  360. }
  361. 100% {
  362. opacity: 0;
  363. }
  364. }
  365. @keyframes zoomOut {
  366. 0% {
  367. opacity: 1;
  368. transform: scale(1);
  369. }
  370. 100% {
  371. opacity: 0;
  372. transform: scale(.5);
  373. }
  374. }
  375. /* zoomIn ------------------------------------------------*/
  376. @-webkit-keyframes zoomIn {
  377. 0% {
  378. opacity: 0;
  379. -webkit-transform: scale(.5);
  380. }
  381. 100% {
  382. opacity: 1;
  383. -webkit-transform: scale(1);
  384. }
  385. }
  386. @-moz-keyframes zoomIn {
  387. 0% {
  388. opacity: 0;
  389. }
  390. 100% {
  391. opacity: 1;
  392. }
  393. }
  394. @-ms-keyframes zoomIn {
  395. 0% {
  396. opacity: 0;
  397. }
  398. 100% {
  399. opacity: 1;
  400. }
  401. }
  402. @-o-keyframes zoomIn {
  403. 0% {
  404. opacity: 0;
  405. }
  406. 100% {
  407. opacity: 1;
  408. }
  409. }
  410. @keyframes zoomIn {
  411. 0% {
  412. opacity: 0;
  413. transform: scale(.5);
  414. }
  415. 100% {
  416. opacity: 1;
  417. transform: scale(1);
  418. }
  419. }
  420. /* pulse ------------------------------------------------*/
  421. @-webkit-keyframes pulse {
  422. 0% {
  423. opacity: 1;
  424. }
  425. 50% {
  426. opacity: 0.3;
  427. }
  428. 100% {
  429. opacity: 1;
  430. }
  431. }
  432. @-moz-keyframes pulse {
  433. 0% {
  434. opacity: 1;
  435. }
  436. 50% {
  437. opacity: 0.8;
  438. }
  439. 100% {
  440. opacity: 1;
  441. }
  442. }
  443. @-ms-keyframes pulse {
  444. 0% {
  445. opacity: 1;
  446. }
  447. 50% {
  448. opacity: 0.8;
  449. }
  450. 100% {
  451. opacity: 1;
  452. }
  453. }
  454. @-o-keyframes pulse {
  455. 0% {
  456. opacity: 1;
  457. }
  458. 50% {
  459. opacity: 0.8;
  460. }
  461. 100% {
  462. opacity: 1;
  463. }
  464. }
  465. @keyframes pulse {
  466. 0% {
  467. opacity: 1;
  468. }
  469. 50% {
  470. opacity: 0.8;
  471. }
  472. 100% {
  473. opacity: 1;
  474. }
  475. }