animate.optimized.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  1. @charset "UTF-8";
  2. /*!
  3. Animate.css - http://daneden.me/animate
  4. Licensed under the MIT license
  5. Copyright (c) 2013 Daniel Eden
  6. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  7. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  8. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  9. */
  10. .animated {
  11. -webkit-animation-duration: 1s;
  12. animation-duration: 1s;
  13. -webkit-animation-fill-mode: both;
  14. animation-fill-mode: both;
  15. }
  16. .animated.hinge {
  17. -webkit-animation-duration: 2s;
  18. animation-duration: 2s;
  19. }
  20. @-webkit-keyframes bounceInDown {
  21. 0% {
  22. opacity: 0;
  23. -webkit-transform: translateY(-2000px);
  24. transform: translateY(-2000px);
  25. }
  26. 60% {
  27. opacity: 1;
  28. -webkit-transform: translateY(30px);
  29. transform: translateY(30px);
  30. }
  31. 80% {
  32. -webkit-transform: translateY(-10px);
  33. transform: translateY(-10px);
  34. }
  35. 100% {
  36. -webkit-transform: translateY(0);
  37. transform: translateY(0);
  38. }
  39. }
  40. @keyframes bounceInDown {
  41. 0% {
  42. opacity: 0;
  43. -webkit-transform: translateY(-2000px);
  44. -ms-transform: translateY(-2000px);
  45. transform: translateY(-2000px);
  46. }
  47. 60% {
  48. opacity: 1;
  49. -webkit-transform: translateY(30px);
  50. -ms-transform: translateY(30px);
  51. transform: translateY(30px);
  52. }
  53. 80% {
  54. -webkit-transform: translateY(-10px);
  55. -ms-transform: translateY(-10px);
  56. transform: translateY(-10px);
  57. }
  58. 100% {
  59. -webkit-transform: translateY(0);
  60. -ms-transform: translateY(0);
  61. transform: translateY(0);
  62. }
  63. }
  64. .bounceInDown {
  65. -webkit-animation-name: bounceInDown;
  66. animation-name: bounceInDown;
  67. }
  68. @-webkit-keyframes bounceInLeft {
  69. 0% {
  70. opacity: 0;
  71. -webkit-transform: translateX(-2000px);
  72. transform: translateX(-2000px);
  73. }
  74. 60% {
  75. opacity: 1;
  76. -webkit-transform: translateX(30px);
  77. transform: translateX(30px);
  78. }
  79. 80% {
  80. -webkit-transform: translateX(-10px);
  81. transform: translateX(-10px);
  82. }
  83. 100% {
  84. -webkit-transform: translateX(0);
  85. transform: translateX(0);
  86. }
  87. }
  88. @keyframes bounceInLeft {
  89. 0% {
  90. opacity: 0;
  91. -webkit-transform: translateX(-2000px);
  92. -ms-transform: translateX(-2000px);
  93. transform: translateX(-2000px);
  94. }
  95. 60% {
  96. opacity: 1;
  97. -webkit-transform: translateX(30px);
  98. -ms-transform: translateX(30px);
  99. transform: translateX(30px);
  100. }
  101. 80% {
  102. -webkit-transform: translateX(-10px);
  103. -ms-transform: translateX(-10px);
  104. transform: translateX(-10px);
  105. }
  106. 100% {
  107. -webkit-transform: translateX(0);
  108. -ms-transform: translateX(0);
  109. transform: translateX(0);
  110. }
  111. }
  112. .bounceInLeft {
  113. -webkit-animation-name: bounceInLeft;
  114. animation-name: bounceInLeft;
  115. }
  116. @-webkit-keyframes bounceInRight {
  117. 0% {
  118. opacity: 0;
  119. -webkit-transform: translateX(2000px);
  120. transform: translateX(2000px);
  121. }
  122. 60% {
  123. opacity: 1;
  124. -webkit-transform: translateX(-30px);
  125. transform: translateX(-30px);
  126. }
  127. 80% {
  128. -webkit-transform: translateX(10px);
  129. transform: translateX(10px);
  130. }
  131. 100% {
  132. -webkit-transform: translateX(0);
  133. transform: translateX(0);
  134. }
  135. }
  136. @keyframes bounceInRight {
  137. 0% {
  138. opacity: 0;
  139. -webkit-transform: translateX(2000px);
  140. -ms-transform: translateX(2000px);
  141. transform: translateX(2000px);
  142. }
  143. 60% {
  144. opacity: 1;
  145. -webkit-transform: translateX(-30px);
  146. -ms-transform: translateX(-30px);
  147. transform: translateX(-30px);
  148. }
  149. 80% {
  150. -webkit-transform: translateX(10px);
  151. -ms-transform: translateX(10px);
  152. transform: translateX(10px);
  153. }
  154. 100% {
  155. -webkit-transform: translateX(0);
  156. -ms-transform: translateX(0);
  157. transform: translateX(0);
  158. }
  159. }
  160. .bounceInRight {
  161. -webkit-animation-name: bounceInRight;
  162. animation-name: bounceInRight;
  163. }
  164. @-webkit-keyframes fadeIn {
  165. 0% {
  166. opacity: 0;
  167. }
  168. 100% {
  169. opacity: 1;
  170. }
  171. }
  172. @keyframes fadeIn {
  173. 0% {
  174. opacity: 0;
  175. }
  176. 100% {
  177. opacity: 1;
  178. }
  179. }
  180. .fadeIn {
  181. -webkit-animation-name: fadeIn;
  182. animation-name: fadeIn;
  183. }
  184. @-webkit-keyframes fadeInDown {
  185. 0% {
  186. opacity: 0;
  187. -webkit-transform: translateY(-20px);
  188. transform: translateY(-20px);
  189. }
  190. 100% {
  191. opacity: 1;
  192. -webkit-transform: translateY(0);
  193. transform: translateY(0);
  194. }
  195. }
  196. @-webkit-keyframes fadeInLeft {
  197. 0% {
  198. opacity: 0;
  199. -webkit-transform: translateX(-20px);
  200. transform: translateX(-20px);
  201. }
  202. 100% {
  203. opacity: 1;
  204. -webkit-transform: translateX(0);
  205. transform: translateX(0);
  206. }
  207. }
  208. @keyframes fadeInLeft {
  209. 0% {
  210. opacity: 0;
  211. -webkit-transform: translateX(-20px);
  212. -ms-transform: translateX(-20px);
  213. transform: translateX(-20px);
  214. }
  215. 100% {
  216. opacity: 1;
  217. -webkit-transform: translateX(0);
  218. -ms-transform: translateX(0);
  219. transform: translateX(0);
  220. }
  221. }
  222. .fadeInLeft {
  223. -webkit-animation-name: fadeInLeft;
  224. animation-name: fadeInLeft;
  225. }
  226. @-webkit-keyframes fadeInRight {
  227. 0% {
  228. opacity: 0;
  229. -webkit-transform: translateX(20px);
  230. transform: translateX(20px);
  231. }
  232. 100% {
  233. opacity: 1;
  234. -webkit-transform: translateX(0);
  235. transform: translateX(0);
  236. }
  237. }
  238. @keyframes fadeInRight {
  239. 0% {
  240. opacity: 0;
  241. -webkit-transform: translateX(20px);
  242. -ms-transform: translateX(20px);
  243. transform: translateX(20px);
  244. }
  245. 100% {
  246. opacity: 1;
  247. -webkit-transform: translateX(0);
  248. -ms-transform: translateX(0);
  249. transform: translateX(0);
  250. }
  251. }
  252. .fadeInRight {
  253. -webkit-animation-name: fadeInRight;
  254. animation-name: fadeInRight;
  255. }
  256. @-webkit-keyframes flip {
  257. 0% {
  258. -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  259. transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  260. -webkit-animation-timing-function: ease-out;
  261. animation-timing-function: ease-out;
  262. }
  263. 40% {
  264. -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
  265. transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
  266. -webkit-animation-timing-function: ease-out;
  267. animation-timing-function: ease-out;
  268. }
  269. 50% {
  270. -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  271. transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  272. -webkit-animation-timing-function: ease-in;
  273. animation-timing-function: ease-in;
  274. }
  275. 80% {
  276. -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
  277. transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
  278. -webkit-animation-timing-function: ease-in;
  279. animation-timing-function: ease-in;
  280. }
  281. 100% {
  282. -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
  283. transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
  284. -webkit-animation-timing-function: ease-in;
  285. animation-timing-function: ease-in;
  286. }
  287. }
  288. @keyframes flip {
  289. 0% {
  290. -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  291. -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  292. transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
  293. -webkit-animation-timing-function: ease-out;
  294. animation-timing-function: ease-out;
  295. }
  296. 40% {
  297. -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
  298. -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
  299. transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
  300. -webkit-animation-timing-function: ease-out;
  301. animation-timing-function: ease-out;
  302. }
  303. 50% {
  304. -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  305. -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  306. transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
  307. -webkit-animation-timing-function: ease-in;
  308. animation-timing-function: ease-in;
  309. }
  310. 80% {
  311. -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
  312. -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
  313. transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
  314. -webkit-animation-timing-function: ease-in;
  315. animation-timing-function: ease-in;
  316. }
  317. 100% {
  318. -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
  319. -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
  320. transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
  321. -webkit-animation-timing-function: ease-in;
  322. animation-timing-function: ease-in;
  323. }
  324. }
  325. .animated.flip {
  326. -webkit-backface-visibility: visible;
  327. -ms-backface-visibility: visible;
  328. backface-visibility: visible;
  329. -webkit-animation-name: flip;
  330. animation-name: flip;
  331. }
  332. @-webkit-keyframes flipInY {
  333. 0% {
  334. -webkit-transform: perspective(400px) rotateY(90deg);
  335. transform: perspective(400px) rotateY(90deg);
  336. opacity: 0;
  337. }
  338. 40% {
  339. -webkit-transform: perspective(400px) rotateY(-10deg);
  340. transform: perspective(400px) rotateY(-10deg);
  341. }
  342. 70% {
  343. -webkit-transform: perspective(400px) rotateY(10deg);
  344. transform: perspective(400px) rotateY(10deg);
  345. }
  346. 100% {
  347. -webkit-transform: perspective(400px) rotateY(0deg);
  348. transform: perspective(400px) rotateY(0deg);
  349. opacity: 1;
  350. }
  351. }
  352. @keyframes flipInY {
  353. 0% {
  354. -webkit-transform: perspective(400px) rotateY(90deg);
  355. -ms-transform: perspective(400px) rotateY(90deg);
  356. transform: perspective(400px) rotateY(90deg);
  357. opacity: 0;
  358. }
  359. 40% {
  360. -webkit-transform: perspective(400px) rotateY(-10deg);
  361. -ms-transform: perspective(400px) rotateY(-10deg);
  362. transform: perspective(400px) rotateY(-10deg);
  363. }
  364. 70% {
  365. -webkit-transform: perspective(400px) rotateY(10deg);
  366. -ms-transform: perspective(400px) rotateY(10deg);
  367. transform: perspective(400px) rotateY(10deg);
  368. }
  369. 100% {
  370. -webkit-transform: perspective(400px) rotateY(0deg);
  371. -ms-transform: perspective(400px) rotateY(0deg);
  372. transform: perspective(400px) rotateY(0deg);
  373. opacity: 1;
  374. }
  375. }
  376. .flipInY {
  377. -webkit-backface-visibility: visible !important;
  378. -ms-backface-visibility: visible !important;
  379. backface-visibility: visible !important;
  380. -webkit-animation-name: flipInY;
  381. animation-name: flipInY;
  382. }
  383. @keyframes lightSpeedIn {
  384. 0% {
  385. -webkit-transform: translateX(100%) skewX(-30deg);
  386. -ms-transform: translateX(100%) skewX(-30deg);
  387. transform: translateX(100%) skewX(-30deg);
  388. opacity: 0;
  389. }
  390. 60% {
  391. -webkit-transform: translateX(-20%) skewX(30deg);
  392. -ms-transform: translateX(-20%) skewX(30deg);
  393. transform: translateX(-20%) skewX(30deg);
  394. opacity: 1;
  395. }
  396. 80% {
  397. -webkit-transform: translateX(0%) skewX(-15deg);
  398. -ms-transform: translateX(0%) skewX(-15deg);
  399. transform: translateX(0%) skewX(-15deg);
  400. opacity: 1;
  401. }
  402. 100% {
  403. -webkit-transform: translateX(0%) skewX(0deg);
  404. -ms-transform: translateX(0%) skewX(0deg);
  405. transform: translateX(0%) skewX(0deg);
  406. opacity: 1;
  407. }
  408. }
  409. .lightSpeedIn {
  410. -webkit-animation-name: lightSpeedIn;
  411. animation-name: lightSpeedIn;
  412. -webkit-animation-timing-function: ease-out;
  413. animation-timing-function: ease-out;
  414. }
  415. @-webkit-keyframes rotateIn {
  416. 0% {
  417. -webkit-transform-origin: center center;
  418. transform-origin: center center;
  419. -webkit-transform: rotate(-200deg);
  420. transform: rotate(-200deg);
  421. opacity: 0;
  422. }
  423. 100% {
  424. -webkit-transform-origin: center center;
  425. transform-origin: center center;
  426. -webkit-transform: rotate(0);
  427. transform: rotate(0);
  428. opacity: 1;
  429. }
  430. }
  431. @keyframes rotateIn {
  432. 0% {
  433. -webkit-transform-origin: center center;
  434. -ms-transform-origin: center center;
  435. transform-origin: center center;
  436. -webkit-transform: rotate(-200deg);
  437. -ms-transform: rotate(-200deg);
  438. transform: rotate(-200deg);
  439. opacity: 0;
  440. }
  441. 100% {
  442. -webkit-transform-origin: center center;
  443. -ms-transform-origin: center center;
  444. transform-origin: center center;
  445. -webkit-transform: rotate(0);
  446. -ms-transform: rotate(0);
  447. transform: rotate(0);
  448. opacity: 1;
  449. }
  450. }
  451. .rotateIn {
  452. -webkit-animation-name: rotateIn;
  453. animation-name: rotateIn;
  454. }