CSS - Animation script

SUBMITTED BY: efbee

DATE: Oct. 4, 2016, 11:09 p.m.

FORMAT: CSS

SIZE: 75.4 kB

Raw Download

HITS: 1128

Report
  1. @charset "UTF-8";
  3. .animated {
  4. -webkit-animation-duration: 1s;
  5. animation-duration: 1s;
  6. -webkit-animation-fill-mode: both;
  7. animation-fill-mode: both;
  8. }
  10. .animated.infinite {
  11. -webkit-animation-iteration-count: infinite;
  12. animation-iteration-count: infinite;
  13. }
  15. .animated.hinge {
  16. -webkit-animation-duration: 2s;
  17. animation-duration: 2s;
  18. }
  20. .animated.flipOutX,
  21. .animated.flipOutY,
  22. .animated.bounceIn,
  23. .animated.bounceOut {
  24. -webkit-animation-duration: .75s;
  25. animation-duration: .75s;
  26. }
  28. @-webkit-keyframes bounce {
  29. from, 20%, 53%, 80%, to {
  30. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  31. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  32. -webkit-transform: translate3d(0,0,0);
  33. transform: translate3d(0,0,0);
  34. }
  36. 40%, 43% {
  37. -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  38. animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  39. -webkit-transform: translate3d(0, -30px, 0);
  40. transform: translate3d(0, -30px, 0);
  41. }
  43. 70% {
  44. -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  45. animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  46. -webkit-transform: translate3d(0, -15px, 0);
  47. transform: translate3d(0, -15px, 0);
  48. }
  50. 90% {
  51. -webkit-transform: translate3d(0,-4px,0);
  52. transform: translate3d(0,-4px,0);
  53. }
  54. }
  56. @keyframes bounce {
  57. from, 20%, 53%, 80%, to {
  58. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  59. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  60. -webkit-transform: translate3d(0,0,0);
  61. transform: translate3d(0,0,0);
  62. }
  64. 40%, 43% {
  65. -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  66. animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  67. -webkit-transform: translate3d(0, -30px, 0);
  68. transform: translate3d(0, -30px, 0);
  69. }
  71. 70% {
  72. -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  73. animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  74. -webkit-transform: translate3d(0, -15px, 0);
  75. transform: translate3d(0, -15px, 0);
  76. }
  78. 90% {
  79. -webkit-transform: translate3d(0,-4px,0);
  80. transform: translate3d(0,-4px,0);
  81. }
  82. }
  84. .bounce {
  85. -webkit-animation-name: bounce;
  86. animation-name: bounce;
  87. -webkit-transform-origin: center bottom;
  88. transform-origin: center bottom;
  89. }
  91. @-webkit-keyframes flash {
  92. from, 50%, to {
  93. opacity: 1;
  94. }
  96. 25%, 75% {
  97. opacity: 0;
  98. }
  99. }
  101. @keyframes flash {
  102. from, 50%, to {
  103. opacity: 1;
  104. }
  106. 25%, 75% {
  107. opacity: 0;
  108. }
  109. }
  111. .flash {
  112. -webkit-animation-name: flash;
  113. animation-name: flash;
  114. }
  116. /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  118. @-webkit-keyframes pulse {
  119. from {
  120. -webkit-transform: scale3d(1, 1, 1);
  121. transform: scale3d(1, 1, 1);
  122. }
  124. 50% {
  125. -webkit-transform: scale3d(1.05, 1.05, 1.05);
  126. transform: scale3d(1.05, 1.05, 1.05);
  127. }
  129. to {
  130. -webkit-transform: scale3d(1, 1, 1);
  131. transform: scale3d(1, 1, 1);
  132. }
  133. }
  135. @keyframes pulse {
  136. from {
  137. -webkit-transform: scale3d(1, 1, 1);
  138. transform: scale3d(1, 1, 1);
  139. }
  141. 50% {
  142. -webkit-transform: scale3d(1.05, 1.05, 1.05);
  143. transform: scale3d(1.05, 1.05, 1.05);
  144. }
  146. to {
  147. -webkit-transform: scale3d(1, 1, 1);
  148. transform: scale3d(1, 1, 1);
  149. }
  150. }
  152. .pulse {
  153. -webkit-animation-name: pulse;
  154. animation-name: pulse;
  155. }
  157. @-webkit-keyframes rubberBand {
  158. from {
  159. -webkit-transform: scale3d(1, 1, 1);
  160. transform: scale3d(1, 1, 1);
  161. }
  163. 30% {
  164. -webkit-transform: scale3d(1.25, 0.75, 1);
  165. transform: scale3d(1.25, 0.75, 1);
  166. }
  168. 40% {
  169. -webkit-transform: scale3d(0.75, 1.25, 1);
  170. transform: scale3d(0.75, 1.25, 1);
  171. }
  173. 50% {
  174. -webkit-transform: scale3d(1.15, 0.85, 1);
  175. transform: scale3d(1.15, 0.85, 1);
  176. }
  178. 65% {
  179. -webkit-transform: scale3d(.95, 1.05, 1);
  180. transform: scale3d(.95, 1.05, 1);
  181. }
  183. 75% {
  184. -webkit-transform: scale3d(1.05, .95, 1);
  185. transform: scale3d(1.05, .95, 1);
  186. }
  188. to {
  189. -webkit-transform: scale3d(1, 1, 1);
  190. transform: scale3d(1, 1, 1);
  191. }
  192. }
  194. @keyframes rubberBand {
  195. from {
  196. -webkit-transform: scale3d(1, 1, 1);
  197. transform: scale3d(1, 1, 1);
  198. }
  200. 30% {
  201. -webkit-transform: scale3d(1.25, 0.75, 1);
  202. transform: scale3d(1.25, 0.75, 1);
  203. }
  205. 40% {
  206. -webkit-transform: scale3d(0.75, 1.25, 1);
  207. transform: scale3d(0.75, 1.25, 1);
  208. }
  210. 50% {
  211. -webkit-transform: scale3d(1.15, 0.85, 1);
  212. transform: scale3d(1.15, 0.85, 1);
  213. }
  215. 65% {
  216. -webkit-transform: scale3d(.95, 1.05, 1);
  217. transform: scale3d(.95, 1.05, 1);
  218. }
  220. 75% {
  221. -webkit-transform: scale3d(1.05, .95, 1);
  222. transform: scale3d(1.05, .95, 1);
  223. }
  225. to {
  226. -webkit-transform: scale3d(1, 1, 1);
  227. transform: scale3d(1, 1, 1);
  228. }
  229. }
  231. .rubberBand {
  232. -webkit-animation-name: rubberBand;
  233. animation-name: rubberBand;
  234. }
  236. @-webkit-keyframes shake {
  237. from, to {
  238. -webkit-transform: translate3d(0, 0, 0);
  239. transform: translate3d(0, 0, 0);
  240. }
  242. 10%, 30%, 50%, 70%, 90% {
  243. -webkit-transform: translate3d(-10px, 0, 0);
  244. transform: translate3d(-10px, 0, 0);
  245. }
  247. 20%, 40%, 60%, 80% {
  248. -webkit-transform: translate3d(10px, 0, 0);
  249. transform: translate3d(10px, 0, 0);
  250. }
  251. }
  253. @keyframes shake {
  254. from, to {
  255. -webkit-transform: translate3d(0, 0, 0);
  256. transform: translate3d(0, 0, 0);
  257. }
  259. 10%, 30%, 50%, 70%, 90% {
  260. -webkit-transform: translate3d(-10px, 0, 0);
  261. transform: translate3d(-10px, 0, 0);
  262. }
  264. 20%, 40%, 60%, 80% {
  265. -webkit-transform: translate3d(10px, 0, 0);
  266. transform: translate3d(10px, 0, 0);
  267. }
  268. }
  270. .shake {
  271. -webkit-animation-name: shake;
  272. animation-name: shake;
  273. }
  275. @-webkit-keyframes headShake {
  276. 0% {
  277. -webkit-transform: translateX(0);
  278. transform: translateX(0);
  279. }
  281. 6.5% {
  282. -webkit-transform: translateX(-6px) rotateY(-9deg);
  283. transform: translateX(-6px) rotateY(-9deg);
  284. }
  286. 18.5% {
  287. -webkit-transform: translateX(5px) rotateY(7deg);
  288. transform: translateX(5px) rotateY(7deg);
  289. }
  291. 31.5% {
  292. -webkit-transform: translateX(-3px) rotateY(-5deg);
  293. transform: translateX(-3px) rotateY(-5deg);
  294. }
  296. 43.5% {
  297. -webkit-transform: translateX(2px) rotateY(3deg);
  298. transform: translateX(2px) rotateY(3deg);
  299. }
  301. 50% {
  302. -webkit-transform: translateX(0);
  303. transform: translateX(0);
  304. }
  305. }
  307. @keyframes headShake {
  308. 0% {
  309. -webkit-transform: translateX(0);
  310. transform: translateX(0);
  311. }
  313. 6.5% {
  314. -webkit-transform: translateX(-6px) rotateY(-9deg);
  315. transform: translateX(-6px) rotateY(-9deg);
  316. }
  318. 18.5% {
  319. -webkit-transform: translateX(5px) rotateY(7deg);
  320. transform: translateX(5px) rotateY(7deg);
  321. }
  323. 31.5% {
  324. -webkit-transform: translateX(-3px) rotateY(-5deg);
  325. transform: translateX(-3px) rotateY(-5deg);
  326. }
  328. 43.5% {
  329. -webkit-transform: translateX(2px) rotateY(3deg);
  330. transform: translateX(2px) rotateY(3deg);
  331. }
  333. 50% {
  334. -webkit-transform: translateX(0);
  335. transform: translateX(0);
  336. }
  337. }
  339. .headShake {
  340. -webkit-animation-timing-function: ease-in-out;
  341. animation-timing-function: ease-in-out;
  342. -webkit-animation-name: headShake;
  343. animation-name: headShake;
  344. }
  346. @-webkit-keyframes swing {
  347. 20% {
  348. -webkit-transform: rotate3d(0, 0, 1, 15deg);
  349. transform: rotate3d(0, 0, 1, 15deg);
  350. }
  352. 40% {
  353. -webkit-transform: rotate3d(0, 0, 1, -10deg);
  354. transform: rotate3d(0, 0, 1, -10deg);
  355. }
  357. 60% {
  358. -webkit-transform: rotate3d(0, 0, 1, 5deg);
  359. transform: rotate3d(0, 0, 1, 5deg);
  360. }
  362. 80% {
  363. -webkit-transform: rotate3d(0, 0, 1, -5deg);
  364. transform: rotate3d(0, 0, 1, -5deg);
  365. }
  367. to {
  368. -webkit-transform: rotate3d(0, 0, 1, 0deg);
  369. transform: rotate3d(0, 0, 1, 0deg);
  370. }
  371. }
  373. @keyframes swing {
  374. 20% {
  375. -webkit-transform: rotate3d(0, 0, 1, 15deg);
  376. transform: rotate3d(0, 0, 1, 15deg);
  377. }
  379. 40% {
  380. -webkit-transform: rotate3d(0, 0, 1, -10deg);
  381. transform: rotate3d(0, 0, 1, -10deg);
  382. }
  384. 60% {
  385. -webkit-transform: rotate3d(0, 0, 1, 5deg);
  386. transform: rotate3d(0, 0, 1, 5deg);
  387. }
  389. 80% {
  390. -webkit-transform: rotate3d(0, 0, 1, -5deg);
  391. transform: rotate3d(0, 0, 1, -5deg);
  392. }
  394. to {
  395. -webkit-transform: rotate3d(0, 0, 1, 0deg);
  396. transform: rotate3d(0, 0, 1, 0deg);
  397. }
  398. }
  400. .swing {
  401. -webkit-transform-origin: top center;
  402. transform-origin: top center;
  403. -webkit-animation-name: swing;
  404. animation-name: swing;
  405. }
  407. @-webkit-keyframes tada {
  408. from {
  409. -webkit-transform: scale3d(1, 1, 1);
  410. transform: scale3d(1, 1, 1);
  411. }
  413. 10%, 20% {
  414. -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  415. transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  416. }
  418. 30%, 50%, 70%, 90% {
  419. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  420. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  421. }
  423. 40%, 60%, 80% {
  424. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  425. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  426. }
  428. to {
  429. -webkit-transform: scale3d(1, 1, 1);
  430. transform: scale3d(1, 1, 1);
  431. }
  432. }
  434. @keyframes tada {
  435. from {
  436. -webkit-transform: scale3d(1, 1, 1);
  437. transform: scale3d(1, 1, 1);
  438. }
  440. 10%, 20% {
  441. -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  442. transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  443. }
  445. 30%, 50%, 70%, 90% {
  446. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  447. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  448. }
  450. 40%, 60%, 80% {
  451. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  452. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  453. }
  455. to {
  456. -webkit-transform: scale3d(1, 1, 1);
  457. transform: scale3d(1, 1, 1);
  458. }
  459. }
  461. .tada {
  462. -webkit-animation-name: tada;
  463. animation-name: tada;
  464. }
  466. /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  468. @-webkit-keyframes wobble {
  469. from {
  470. -webkit-transform: none;
  471. transform: none;
  472. }
  474. 15% {
  475. -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  476. transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  477. }
  479. 30% {
  480. -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  481. transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  482. }
  484. 45% {
  485. -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  486. transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  487. }
  489. 60% {
  490. -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  491. transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  492. }
  494. 75% {
  495. -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  496. transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  497. }
  499. to {
  500. -webkit-transform: none;
  501. transform: none;
  502. }
  503. }
  505. @keyframes wobble {
  506. from {
  507. -webkit-transform: none;
  508. transform: none;
  509. }
  511. 15% {
  512. -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  513. transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  514. }
  516. 30% {
  517. -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  518. transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  519. }
  521. 45% {
  522. -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  523. transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  524. }
  526. 60% {
  527. -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  528. transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  529. }
  531. 75% {
  532. -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  533. transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  534. }
  536. to {
  537. -webkit-transform: none;
  538. transform: none;
  539. }
  540. }
  542. .wobble {
  543. -webkit-animation-name: wobble;
  544. animation-name: wobble;
  545. }
  547. @-webkit-keyframes jello {
  548. from, 11.1%, to {
  549. -webkit-transform: none;
  550. transform: none;
  551. }
  553. 22.2% {
  554. -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
  555. transform: skewX(-12.5deg) skewY(-12.5deg);
  556. }
  558. 33.3% {
  559. -webkit-transform: skewX(6.25deg) skewY(6.25deg);
  560. transform: skewX(6.25deg) skewY(6.25deg);
  561. }
  563. 44.4% {
  564. -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
  565. transform: skewX(-3.125deg) skewY(-3.125deg);
  566. }
  568. 55.5% {
  569. -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
  570. transform: skewX(1.5625deg) skewY(1.5625deg);
  571. }
  573. 66.6% {
  574. -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
  575. transform: skewX(-0.78125deg) skewY(-0.78125deg);
  576. }
  578. 77.7% {
  579. -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
  580. transform: skewX(0.390625deg) skewY(0.390625deg);
  581. }
  583. 88.8% {
  584. -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  585. transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  586. }
  587. }
  589. @keyframes jello {
  590. from, 11.1%, to {
  591. -webkit-transform: none;
  592. transform: none;
  593. }
  595. 22.2% {
  596. -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
  597. transform: skewX(-12.5deg) skewY(-12.5deg);
  598. }
  600. 33.3% {
  601. -webkit-transform: skewX(6.25deg) skewY(6.25deg);
  602. transform: skewX(6.25deg) skewY(6.25deg);
  603. }
  605. 44.4% {
  606. -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
  607. transform: skewX(-3.125deg) skewY(-3.125deg);
  608. }
  610. 55.5% {
  611. -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
  612. transform: skewX(1.5625deg) skewY(1.5625deg);
  613. }
  615. 66.6% {
  616. -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
  617. transform: skewX(-0.78125deg) skewY(-0.78125deg);
  618. }
  620. 77.7% {
  621. -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
  622. transform: skewX(0.390625deg) skewY(0.390625deg);
  623. }
  625. 88.8% {
  626. -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  627. transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  628. }
  629. }
  631. .jello {
  632. -webkit-animation-name: jello;
  633. animation-name: jello;
  634. -webkit-transform-origin: center;
  635. transform-origin: center;
  636. }
  638. @-webkit-keyframes bounceIn {
  639. from, 20%, 40%, 60%, 80%, to {
  640. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  641. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  642. }
  644. 0% {
  645. opacity: 0;
  646. -webkit-transform: scale3d(.3, .3, .3);
  647. transform: scale3d(.3, .3, .3);
  648. }
  650. 20% {
  651. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  652. transform: scale3d(1.1, 1.1, 1.1);
  653. }
  655. 40% {
  656. -webkit-transform: scale3d(.9, .9, .9);
  657. transform: scale3d(.9, .9, .9);
  658. }
  660. 60% {
  661. opacity: 1;
  662. -webkit-transform: scale3d(1.03, 1.03, 1.03);
  663. transform: scale3d(1.03, 1.03, 1.03);
  664. }
  666. 80% {
  667. -webkit-transform: scale3d(.97, .97, .97);
  668. transform: scale3d(.97, .97, .97);
  669. }
  671. to {
  672. opacity: 1;
  673. -webkit-transform: scale3d(1, 1, 1);
  674. transform: scale3d(1, 1, 1);
  675. }
  676. }
  678. @keyframes bounceIn {
  679. from, 20%, 40%, 60%, 80%, to {
  680. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  681. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  682. }
  684. 0% {
  685. opacity: 0;
  686. -webkit-transform: scale3d(.3, .3, .3);
  687. transform: scale3d(.3, .3, .3);
  688. }
  690. 20% {
  691. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  692. transform: scale3d(1.1, 1.1, 1.1);
  693. }
  695. 40% {
  696. -webkit-transform: scale3d(.9, .9, .9);
  697. transform: scale3d(.9, .9, .9);
  698. }
  700. 60% {
  701. opacity: 1;
  702. -webkit-transform: scale3d(1.03, 1.03, 1.03);
  703. transform: scale3d(1.03, 1.03, 1.03);
  704. }
  706. 80% {
  707. -webkit-transform: scale3d(.97, .97, .97);
  708. transform: scale3d(.97, .97, .97);
  709. }
  711. to {
  712. opacity: 1;
  713. -webkit-transform: scale3d(1, 1, 1);
  714. transform: scale3d(1, 1, 1);
  715. }
  716. }
  718. .bounceIn {
  719. -webkit-animation-name: bounceIn;
  720. animation-name: bounceIn;
  721. }
  723. @-webkit-keyframes bounceInDown {
  724. from, 60%, 75%, 90%, to {
  725. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  726. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  727. }
  729. 0% {
  730. opacity: 0;
  731. -webkit-transform: translate3d(0, -3000px, 0);
  732. transform: translate3d(0, -3000px, 0);
  733. }
  735. 60% {
  736. opacity: 1;
  737. -webkit-transform: translate3d(0, 25px, 0);
  738. transform: translate3d(0, 25px, 0);
  739. }
  741. 75% {
  742. -webkit-transform: translate3d(0, -10px, 0);
  743. transform: translate3d(0, -10px, 0);
  744. }
  746. 90% {
  747. -webkit-transform: translate3d(0, 5px, 0);
  748. transform: translate3d(0, 5px, 0);
  749. }
  751. to {
  752. -webkit-transform: none;
  753. transform: none;
  754. }
  755. }
  757. @keyframes bounceInDown {
  758. from, 60%, 75%, 90%, to {
  759. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  760. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  761. }
  763. 0% {
  764. opacity: 0;
  765. -webkit-transform: translate3d(0, -3000px, 0);
  766. transform: translate3d(0, -3000px, 0);
  767. }
  769. 60% {
  770. opacity: 1;
  771. -webkit-transform: translate3d(0, 25px, 0);
  772. transform: translate3d(0, 25px, 0);
  773. }
  775. 75% {
  776. -webkit-transform: translate3d(0, -10px, 0);
  777. transform: translate3d(0, -10px, 0);
  778. }
  780. 90% {
  781. -webkit-transform: translate3d(0, 5px, 0);
  782. transform: translate3d(0, 5px, 0);
  783. }
  785. to {
  786. -webkit-transform: none;
  787. transform: none;
  788. }
  789. }
  791. .bounceInDown {
  792. -webkit-animation-name: bounceInDown;
  793. animation-name: bounceInDown;
  794. }
  796. @-webkit-keyframes bounceInLeft {
  797. from, 60%, 75%, 90%, to {
  798. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  799. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  800. }
  802. 0% {
  803. opacity: 0;
  804. -webkit-transform: translate3d(-3000px, 0, 0);
  805. transform: translate3d(-3000px, 0, 0);
  806. }
  808. 60% {
  809. opacity: 1;
  810. -webkit-transform: translate3d(25px, 0, 0);
  811. transform: translate3d(25px, 0, 0);
  812. }
  814. 75% {
  815. -webkit-transform: translate3d(-10px, 0, 0);
  816. transform: translate3d(-10px, 0, 0);
  817. }
  819. 90% {
  820. -webkit-transform: translate3d(5px, 0, 0);
  821. transform: translate3d(5px, 0, 0);
  822. }
  824. to {
  825. -webkit-transform: none;
  826. transform: none;
  827. }
  828. }
  830. @keyframes bounceInLeft {
  831. from, 60%, 75%, 90%, to {
  832. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  833. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  834. }
  836. 0% {
  837. opacity: 0;
  838. -webkit-transform: translate3d(-3000px, 0, 0);
  839. transform: translate3d(-3000px, 0, 0);
  840. }
  842. 60% {
  843. opacity: 1;
  844. -webkit-transform: translate3d(25px, 0, 0);
  845. transform: translate3d(25px, 0, 0);
  846. }
  848. 75% {
  849. -webkit-transform: translate3d(-10px, 0, 0);
  850. transform: translate3d(-10px, 0, 0);
  851. }
  853. 90% {
  854. -webkit-transform: translate3d(5px, 0, 0);
  855. transform: translate3d(5px, 0, 0);
  856. }
  858. to {
  859. -webkit-transform: none;
  860. transform: none;
  861. }
  862. }
  864. .bounceInLeft {
  865. -webkit-animation-name: bounceInLeft;
  866. animation-name: bounceInLeft;
  867. }
  869. @-webkit-keyframes bounceInRight {
  870. from, 60%, 75%, 90%, to {
  871. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  872. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  873. }
  875. from {
  876. opacity: 0;
  877. -webkit-transform: translate3d(3000px, 0, 0);
  878. transform: translate3d(3000px, 0, 0);
  879. }
  881. 60% {
  882. opacity: 1;
  883. -webkit-transform: translate3d(-25px, 0, 0);
  884. transform: translate3d(-25px, 0, 0);
  885. }
  887. 75% {
  888. -webkit-transform: translate3d(10px, 0, 0);
  889. transform: translate3d(10px, 0, 0);
  890. }
  892. 90% {
  893. -webkit-transform: translate3d(-5px, 0, 0);
  894. transform: translate3d(-5px, 0, 0);
  895. }
  897. to {
  898. -webkit-transform: none;
  899. transform: none;
  900. }
  901. }
  903. @keyframes bounceInRight {
  904. from, 60%, 75%, 90%, to {
  905. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  906. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  907. }
  909. from {
  910. opacity: 0;
  911. -webkit-transform: translate3d(3000px, 0, 0);
  912. transform: translate3d(3000px, 0, 0);
  913. }
  915. 60% {
  916. opacity: 1;
  917. -webkit-transform: translate3d(-25px, 0, 0);
  918. transform: translate3d(-25px, 0, 0);
  919. }
  921. 75% {
  922. -webkit-transform: translate3d(10px, 0, 0);
  923. transform: translate3d(10px, 0, 0);
  924. }
  926. 90% {
  927. -webkit-transform: translate3d(-5px, 0, 0);
  928. transform: translate3d(-5px, 0, 0);
  929. }
  931. to {
  932. -webkit-transform: none;
  933. transform: none;
  934. }
  935. }
  937. .bounceInRight {
  938. -webkit-animation-name: bounceInRight;
  939. animation-name: bounceInRight;
  940. }
  942. @-webkit-keyframes bounceInUp {
  943. from, 60%, 75%, 90%, to {
  944. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  945. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  946. }
  948. from {
  949. opacity: 0;
  950. -webkit-transform: translate3d(0, 3000px, 0);
  951. transform: translate3d(0, 3000px, 0);
  952. }
  954. 60% {
  955. opacity: 1;
  956. -webkit-transform: translate3d(0, -20px, 0);
  957. transform: translate3d(0, -20px, 0);
  958. }
  960. 75% {
  961. -webkit-transform: translate3d(0, 10px, 0);
  962. transform: translate3d(0, 10px, 0);
  963. }
  965. 90% {
  966. -webkit-transform: translate3d(0, -5px, 0);
  967. transform: translate3d(0, -5px, 0);
  968. }
  970. to {
  971. -webkit-transform: translate3d(0, 0, 0);
  972. transform: translate3d(0, 0, 0);
  973. }
  974. }
  976. @keyframes bounceInUp {
  977. from, 60%, 75%, 90%, to {
  978. -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  979. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  980. }
  982. from {
  983. opacity: 0;
  984. -webkit-transform: translate3d(0, 3000px, 0);
  985. transform: translate3d(0, 3000px, 0);
  986. }
  988. 60% {
  989. opacity: 1;
  990. -webkit-transform: translate3d(0, -20px, 0);
  991. transform: translate3d(0, -20px, 0);
  992. }
  994. 75% {
  995. -webkit-transform: translate3d(0, 10px, 0);
  996. transform: translate3d(0, 10px, 0);
  997. }
  999. 90% {
  1000. -webkit-transform: translate3d(0, -5px, 0);
  1001. transform: translate3d(0, -5px, 0);
  1002. }
  1004. to {
  1005. -webkit-transform: translate3d(0, 0, 0);
  1006. transform: translate3d(0, 0, 0);
  1007. }
  1008. }
  1010. .bounceInUp {
  1011. -webkit-animation-name: bounceInUp;
  1012. animation-name: bounceInUp;
  1013. }
  1015. @-webkit-keyframes bounceOut {
  1016. 20% {
  1017. -webkit-transform: scale3d(.9, .9, .9);
  1018. transform: scale3d(.9, .9, .9);
  1019. }
  1021. 50%, 55% {
  1022. opacity: 1;
  1023. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  1024. transform: scale3d(1.1, 1.1, 1.1);
  1025. }
  1027. to {
  1028. opacity: 0;
  1029. -webkit-transform: scale3d(.3, .3, .3);
  1030. transform: scale3d(.3, .3, .3);
  1031. }
  1032. }
  1034. @keyframes bounceOut {
  1035. 20% {
  1036. -webkit-transform: scale3d(.9, .9, .9);
  1037. transform: scale3d(.9, .9, .9);
  1038. }
  1040. 50%, 55% {
  1041. opacity: 1;
  1042. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  1043. transform: scale3d(1.1, 1.1, 1.1);
  1044. }
  1046. to {
  1047. opacity: 0;
  1048. -webkit-transform: scale3d(.3, .3, .3);
  1049. transform: scale3d(.3, .3, .3);
  1050. }
  1051. }
  1053. .bounceOut {
  1054. -webkit-animation-name: bounceOut;
  1055. animation-name: bounceOut;
  1056. }
  1058. @-webkit-keyframes bounceOutDown {
  1059. 20% {
  1060. -webkit-transform: translate3d(0, 10px, 0);
  1061. transform: translate3d(0, 10px, 0);
  1062. }
  1064. 40%, 45% {
  1065. opacity: 1;
  1066. -webkit-transform: translate3d(0, -20px, 0);
  1067. transform: translate3d(0, -20px, 0);
  1068. }
  1070. to {
  1071. opacity: 0;
  1072. -webkit-transform: translate3d(0, 2000px, 0);
  1073. transform: translate3d(0, 2000px, 0);
  1074. }
  1075. }
  1077. @keyframes bounceOutDown {
  1078. 20% {
  1079. -webkit-transform: translate3d(0, 10px, 0);
  1080. transform: translate3d(0, 10px, 0);
  1081. }
  1083. 40%, 45% {
  1084. opacity: 1;
  1085. -webkit-transform: translate3d(0, -20px, 0);
  1086. transform: translate3d(0, -20px, 0);
  1087. }
  1089. to {
  1090. opacity: 0;
  1091. -webkit-transform: translate3d(0, 2000px, 0);
  1092. transform: translate3d(0, 2000px, 0);
  1093. }
  1094. }
  1096. .bounceOutDown {
  1097. -webkit-animation-name: bounceOutDown;
  1098. animation-name: bounceOutDown;
  1099. }
  1101. @-webkit-keyframes bounceOutLeft {
  1102. 20% {
  1103. opacity: 1;
  1104. -webkit-transform: translate3d(20px, 0, 0);
  1105. transform: translate3d(20px, 0, 0);
  1106. }
  1108. to {
  1109. opacity: 0;
  1110. -webkit-transform: translate3d(-2000px, 0, 0);
  1111. transform: translate3d(-2000px, 0, 0);
  1112. }
  1113. }
  1115. @keyframes bounceOutLeft {
  1116. 20% {
  1117. opacity: 1;
  1118. -webkit-transform: translate3d(20px, 0, 0);
  1119. transform: translate3d(20px, 0, 0);
  1120. }
  1122. to {
  1123. opacity: 0;
  1124. -webkit-transform: translate3d(-2000px, 0, 0);
  1125. transform: translate3d(-2000px, 0, 0);
  1126. }
  1127. }
  1129. .bounceOutLeft {
  1130. -webkit-animation-name: bounceOutLeft;
  1131. animation-name: bounceOutLeft;
  1132. }
  1134. @-webkit-keyframes bounceOutRight {
  1135. 20% {
  1136. opacity: 1;
  1137. -webkit-transform: translate3d(-20px, 0, 0);
  1138. transform: translate3d(-20px, 0, 0);
  1139. }
  1141. to {
  1142. opacity: 0;
  1143. -webkit-transform: translate3d(2000px, 0, 0);
  1144. transform: translate3d(2000px, 0, 0);
  1145. }
  1146. }
  1148. @keyframes bounceOutRight {
  1149. 20% {
  1150. opacity: 1;
  1151. -webkit-transform: translate3d(-20px, 0, 0);
  1152. transform: translate3d(-20px, 0, 0);
  1153. }
  1155. to {
  1156. opacity: 0;
  1157. -webkit-transform: translate3d(2000px, 0, 0);
  1158. transform: translate3d(2000px, 0, 0);
  1159. }
  1160. }
  1162. .bounceOutRight {
  1163. -webkit-animation-name: bounceOutRight;
  1164. animation-name: bounceOutRight;
  1165. }
  1167. @-webkit-keyframes bounceOutUp {
  1168. 20% {
  1169. -webkit-transform: translate3d(0, -10px, 0);
  1170. transform: translate3d(0, -10px, 0);
  1171. }
  1173. 40%, 45% {
  1174. opacity: 1;
  1175. -webkit-transform: translate3d(0, 20px, 0);
  1176. transform: translate3d(0, 20px, 0);
  1177. }
  1179. to {
  1180. opacity: 0;
  1181. -webkit-transform: translate3d(0, -2000px, 0);
  1182. transform: translate3d(0, -2000px, 0);
  1183. }
  1184. }
  1186. @keyframes bounceOutUp {
  1187. 20% {
  1188. -webkit-transform: translate3d(0, -10px, 0);
  1189. transform: translate3d(0, -10px, 0);
  1190. }
  1192. 40%, 45% {
  1193. opacity: 1;
  1194. -webkit-transform: translate3d(0, 20px, 0);
  1195. transform: translate3d(0, 20px, 0);
  1196. }
  1198. to {
  1199. opacity: 0;
  1200. -webkit-transform: translate3d(0, -2000px, 0);
  1201. transform: translate3d(0, -2000px, 0);
  1202. }
  1203. }
  1205. .bounceOutUp {
  1206. -webkit-animation-name: bounceOutUp;
  1207. animation-name: bounceOutUp;
  1208. }
  1210. @-webkit-keyframes fadeIn {
  1211. from {
  1212. opacity: 0;
  1213. }
  1215. to {
  1216. opacity: 1;
  1217. }
  1218. }
  1220. @keyframes fadeIn {
  1221. from {
  1222. opacity: 0;
  1223. }
  1225. to {
  1226. opacity: 1;
  1227. }
  1228. }
  1230. .fadeIn {
  1231. -webkit-animation-name: fadeIn;
  1232. animation-name: fadeIn;
  1233. }
  1235. @-webkit-keyframes fadeInDown {
  1236. from {
  1237. opacity: 0;
  1238. -webkit-transform: translate3d(0, -100%, 0);
  1239. transform: translate3d(0, -100%, 0);
  1240. }
  1242. to {
  1243. opacity: 1;
  1244. -webkit-transform: none;
  1245. transform: none;
  1246. }
  1247. }
  1249. @keyframes fadeInDown {
  1250. from {
  1251. opacity: 0;
  1252. -webkit-transform: translate3d(0, -100%, 0);
  1253. transform: translate3d(0, -100%, 0);
  1254. }
  1256. to {
  1257. opacity: 1;
  1258. -webkit-transform: none;
  1259. transform: none;
  1260. }
  1261. }
  1263. .fadeInDown {
  1264. -webkit-animation-name: fadeInDown;
  1265. animation-name: fadeInDown;
  1266. }
  1268. @-webkit-keyframes fadeInDownBig {
  1269. from {
  1270. opacity: 0;
  1271. -webkit-transform: translate3d(0, -2000px, 0);
  1272. transform: translate3d(0, -2000px, 0);
  1273. }
  1275. to {
  1276. opacity: 1;
  1277. -webkit-transform: none;
  1278. transform: none;
  1279. }
  1280. }
  1282. @keyframes fadeInDownBig {
  1283. from {
  1284. opacity: 0;
  1285. -webkit-transform: translate3d(0, -2000px, 0);
  1286. transform: translate3d(0, -2000px, 0);
  1287. }
  1289. to {
  1290. opacity: 1;
  1291. -webkit-transform: none;
  1292. transform: none;
  1293. }
  1294. }
  1296. .fadeInDownBig {
  1297. -webkit-animation-name: fadeInDownBig;
  1298. animation-name: fadeInDownBig;
  1299. }
  1301. @-webkit-keyframes fadeInLeft {
  1302. from {
  1303. opacity: 0;
  1304. -webkit-transform: translate3d(-100%, 0, 0);
  1305. transform: translate3d(-100%, 0, 0);
  1306. }
  1308. to {
  1309. opacity: 1;
  1310. -webkit-transform: none;
  1311. transform: none;
  1312. }
  1313. }
  1315. @keyframes fadeInLeft {
  1316. from {
  1317. opacity: 0;
  1318. -webkit-transform: translate3d(-100%, 0, 0);
  1319. transform: translate3d(-100%, 0, 0);
  1320. }
  1322. to {
  1323. opacity: 1;
  1324. -webkit-transform: none;
  1325. transform: none;
  1326. }
  1327. }
  1329. .fadeInLeft {
  1330. -webkit-animation-name: fadeInLeft;
  1331. animation-name: fadeInLeft;
  1332. }
  1334. @-webkit-keyframes fadeInLeftBig {
  1335. from {
  1336. opacity: 0;
  1337. -webkit-transform: translate3d(-2000px, 0, 0);
  1338. transform: translate3d(-2000px, 0, 0);
  1339. }
  1341. to {
  1342. opacity: 1;
  1343. -webkit-transform: none;
  1344. transform: none;
  1345. }
  1346. }
  1348. @keyframes fadeInLeftBig {
  1349. from {
  1350. opacity: 0;
  1351. -webkit-transform: translate3d(-2000px, 0, 0);
  1352. transform: translate3d(-2000px, 0, 0);
  1353. }
  1355. to {
  1356. opacity: 1;
  1357. -webkit-transform: none;
  1358. transform: none;
  1359. }
  1360. }
  1362. .fadeInLeftBig {
  1363. -webkit-animation-name: fadeInLeftBig;
  1364. animation-name: fadeInLeftBig;
  1365. }
  1367. @-webkit-keyframes fadeInRight {
  1368. from {
  1369. opacity: 0;
  1370. -webkit-transform: translate3d(100%, 0, 0);
  1371. transform: translate3d(100%, 0, 0);
  1372. }
  1374. to {
  1375. opacity: 1;
  1376. -webkit-transform: none;
  1377. transform: none;
  1378. }
  1379. }
  1381. @keyframes fadeInRight {
  1382. from {
  1383. opacity: 0;
  1384. -webkit-transform: translate3d(100%, 0, 0);
  1385. transform: translate3d(100%, 0, 0);
  1386. }
  1388. to {
  1389. opacity: 1;
  1390. -webkit-transform: none;
  1391. transform: none;
  1392. }
  1393. }
  1395. .fadeInRight {
  1396. -webkit-animation-name: fadeInRight;
  1397. animation-name: fadeInRight;
  1398. }
  1400. @-webkit-keyframes fadeInRightBig {
  1401. from {
  1402. opacity: 0;
  1403. -webkit-transform: translate3d(2000px, 0, 0);
  1404. transform: translate3d(2000px, 0, 0);
  1405. }
  1407. to {
  1408. opacity: 1;
  1409. -webkit-transform: none;
  1410. transform: none;
  1411. }
  1412. }
  1414. @keyframes fadeInRightBig {
  1415. from {
  1416. opacity: 0;
  1417. -webkit-transform: translate3d(2000px, 0, 0);
  1418. transform: translate3d(2000px, 0, 0);
  1419. }
  1421. to {
  1422. opacity: 1;
  1423. -webkit-transform: none;
  1424. transform: none;
  1425. }
  1426. }
  1428. .fadeInRightBig {
  1429. -webkit-animation-name: fadeInRightBig;
  1430. animation-name: fadeInRightBig;
  1431. }
  1433. @-webkit-keyframes fadeInUp {
  1434. from {
  1435. opacity: 0;
  1436. -webkit-transform: translate3d(0, 100%, 0);
  1437. transform: translate3d(0, 100%, 0);
  1438. }
  1440. to {
  1441. opacity: 1;
  1442. -webkit-transform: none;
  1443. transform: none;
  1444. }
  1445. }
  1447. @keyframes fadeInUp {
  1448. from {
  1449. opacity: 0;
  1450. -webkit-transform: translate3d(0, 100%, 0);
  1451. transform: translate3d(0, 100%, 0);
  1452. }
  1454. to {
  1455. opacity: 1;
  1456. -webkit-transform: none;
  1457. transform: none;
  1458. }
  1459. }
  1461. .fadeInUp {
  1462. -webkit-animation-name: fadeInUp;
  1463. animation-name: fadeInUp;
  1464. }
  1466. @-webkit-keyframes fadeInUpBig {
  1467. from {
  1468. opacity: 0;
  1469. -webkit-transform: translate3d(0, 2000px, 0);
  1470. transform: translate3d(0, 2000px, 0);
  1471. }
  1473. to {
  1474. opacity: 1;
  1475. -webkit-transform: none;
  1476. transform: none;
  1477. }
  1478. }
  1480. @keyframes fadeInUpBig {
  1481. from {
  1482. opacity: 0;
  1483. -webkit-transform: translate3d(0, 2000px, 0);
  1484. transform: translate3d(0, 2000px, 0);
  1485. }
  1487. to {
  1488. opacity: 1;
  1489. -webkit-transform: none;
  1490. transform: none;
  1491. }
  1492. }
  1494. .fadeInUpBig {
  1495. -webkit-animation-name: fadeInUpBig;
  1496. animation-name: fadeInUpBig;
  1497. }
  1499. @-webkit-keyframes fadeOut {
  1500. from {
  1501. opacity: 1;
  1502. }
  1504. to {
  1505. opacity: 0;
  1506. }
  1507. }
  1509. @keyframes fadeOut {
  1510. from {
  1511. opacity: 1;
  1512. }
  1514. to {
  1515. opacity: 0;
  1516. }
  1517. }
  1519. .fadeOut {
  1520. -webkit-animation-name: fadeOut;
  1521. animation-name: fadeOut;
  1522. }
  1524. @-webkit-keyframes fadeOutDown {
  1525. from {
  1526. opacity: 1;
  1527. }
  1529. to {
  1530. opacity: 0;
  1531. -webkit-transform: translate3d(0, 100%, 0);
  1532. transform: translate3d(0, 100%, 0);
  1533. }
  1534. }
  1536. @keyframes fadeOutDown {
  1537. from {
  1538. opacity: 1;
  1539. }
  1541. to {
  1542. opacity: 0;
  1543. -webkit-transform: translate3d(0, 100%, 0);
  1544. transform: translate3d(0, 100%, 0);
  1545. }
  1546. }
  1548. .fadeOutDown {
  1549. -webkit-animation-name: fadeOutDown;
  1550. animation-name: fadeOutDown;
  1551. }
  1553. @-webkit-keyframes fadeOutDownBig {
  1554. from {
  1555. opacity: 1;
  1556. }
  1558. to {
  1559. opacity: 0;
  1560. -webkit-transform: translate3d(0, 2000px, 0);
  1561. transform: translate3d(0, 2000px, 0);
  1562. }
  1563. }
  1565. @keyframes fadeOutDownBig {
  1566. from {
  1567. opacity: 1;
  1568. }
  1570. to {
  1571. opacity: 0;
  1572. -webkit-transform: translate3d(0, 2000px, 0);
  1573. transform: translate3d(0, 2000px, 0);
  1574. }
  1575. }
  1577. .fadeOutDownBig {
  1578. -webkit-animation-name: fadeOutDownBig;
  1579. animation-name: fadeOutDownBig;
  1580. }
  1582. @-webkit-keyframes fadeOutLeft {
  1583. from {
  1584. opacity: 1;
  1585. }
  1587. to {
  1588. opacity: 0;
  1589. -webkit-transform: translate3d(-100%, 0, 0);
  1590. transform: translate3d(-100%, 0, 0);
  1591. }
  1592. }
  1594. @keyframes fadeOutLeft {
  1595. from {
  1596. opacity: 1;
  1597. }
  1599. to {
  1600. opacity: 0;
  1601. -webkit-transform: translate3d(-100%, 0, 0);
  1602. transform: translate3d(-100%, 0, 0);
  1603. }
  1604. }
  1606. .fadeOutLeft {
  1607. -webkit-animation-name: fadeOutLeft;
  1608. animation-name: fadeOutLeft;
  1609. }
  1611. @-webkit-keyframes fadeOutLeftBig {
  1612. from {
  1613. opacity: 1;
  1614. }
  1616. to {
  1617. opacity: 0;
  1618. -webkit-transform: translate3d(-2000px, 0, 0);
  1619. transform: translate3d(-2000px, 0, 0);
  1620. }
  1621. }
  1623. @keyframes fadeOutLeftBig {
  1624. from {
  1625. opacity: 1;
  1626. }
  1628. to {
  1629. opacity: 0;
  1630. -webkit-transform: translate3d(-2000px, 0, 0);
  1631. transform: translate3d(-2000px, 0, 0);
  1632. }
  1633. }
  1635. .fadeOutLeftBig {
  1636. -webkit-animation-name: fadeOutLeftBig;
  1637. animation-name: fadeOutLeftBig;
  1638. }
  1640. @-webkit-keyframes fadeOutRight {
  1641. from {
  1642. opacity: 1;
  1643. }
  1645. to {
  1646. opacity: 0;
  1647. -webkit-transform: translate3d(100%, 0, 0);
  1648. transform: translate3d(100%, 0, 0);
  1649. }
  1650. }
  1652. @keyframes fadeOutRight {
  1653. from {
  1654. opacity: 1;
  1655. }
  1657. to {
  1658. opacity: 0;
  1659. -webkit-transform: translate3d(100%, 0, 0);
  1660. transform: translate3d(100%, 0, 0);
  1661. }
  1662. }
  1664. .fadeOutRight {
  1665. -webkit-animation-name: fadeOutRight;
  1666. animation-name: fadeOutRight;
  1667. }
  1669. @-webkit-keyframes fadeOutRightBig {
  1670. from {
  1671. opacity: 1;
  1672. }
  1674. to {
  1675. opacity: 0;
  1676. -webkit-transform: translate3d(2000px, 0, 0);
  1677. transform: translate3d(2000px, 0, 0);
  1678. }
  1679. }
  1681. @keyframes fadeOutRightBig {
  1682. from {
  1683. opacity: 1;
  1684. }
  1686. to {
  1687. opacity: 0;
  1688. -webkit-transform: translate3d(2000px, 0, 0);
  1689. transform: translate3d(2000px, 0, 0);
  1690. }
  1691. }
  1693. .fadeOutRightBig {
  1694. -webkit-animation-name: fadeOutRightBig;
  1695. animation-name: fadeOutRightBig;
  1696. }
  1698. @-webkit-keyframes fadeOutUp {
  1699. from {
  1700. opacity: 1;
  1701. }
  1703. to {
  1704. opacity: 0;
  1705. -webkit-transform: translate3d(0, -100%, 0);
  1706. transform: translate3d(0, -100%, 0);
  1707. }
  1708. }
  1710. @keyframes fadeOutUp {
  1711. from {
  1712. opacity: 1;
  1713. }
  1715. to {
  1716. opacity: 0;
  1717. -webkit-transform: translate3d(0, -100%, 0);
  1718. transform: translate3d(0, -100%, 0);
  1719. }
  1720. }
  1722. .fadeOutUp {
  1723. -webkit-animation-name: fadeOutUp;
  1724. animation-name: fadeOutUp;
  1725. }
  1727. @-webkit-keyframes fadeOutUpBig {
  1728. from {
  1729. opacity: 1;
  1730. }
  1732. to {
  1733. opacity: 0;
  1734. -webkit-transform: translate3d(0, -2000px, 0);
  1735. transform: translate3d(0, -2000px, 0);
  1736. }
  1737. }
  1739. @keyframes fadeOutUpBig {
  1740. from {
  1741. opacity: 1;
  1742. }
  1744. to {
  1745. opacity: 0;
  1746. -webkit-transform: translate3d(0, -2000px, 0);
  1747. transform: translate3d(0, -2000px, 0);
  1748. }
  1749. }
  1751. .fadeOutUpBig {
  1752. -webkit-animation-name: fadeOutUpBig;
  1753. animation-name: fadeOutUpBig;
  1754. }
  1756. @-webkit-keyframes flip {
  1757. from {
  1758. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  1759. transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  1760. -webkit-animation-timing-function: ease-out;
  1761. animation-timing-function: ease-out;
  1762. }
  1764. 40% {
  1765. -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  1766. transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  1767. -webkit-animation-timing-function: ease-out;
  1768. animation-timing-function: ease-out;
  1769. }
  1771. 50% {
  1772. -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  1773. transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  1774. -webkit-animation-timing-function: ease-in;
  1775. animation-timing-function: ease-in;
  1776. }
  1778. 80% {
  1779. -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
  1780. transform: perspective(400px) scale3d(.95, .95, .95);
  1781. -webkit-animation-timing-function: ease-in;
  1782. animation-timing-function: ease-in;
  1783. }
  1785. to {
  1786. -webkit-transform: perspective(400px);
  1787. transform: perspective(400px);
  1788. -webkit-animation-timing-function: ease-in;
  1789. animation-timing-function: ease-in;
  1790. }
  1791. }
  1793. @keyframes flip {
  1794. from {
  1795. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  1796. transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  1797. -webkit-animation-timing-function: ease-out;
  1798. animation-timing-function: ease-out;
  1799. }
  1801. 40% {
  1802. -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  1803. transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  1804. -webkit-animation-timing-function: ease-out;
  1805. animation-timing-function: ease-out;
  1806. }
  1808. 50% {
  1809. -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  1810. transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  1811. -webkit-animation-timing-function: ease-in;
  1812. animation-timing-function: ease-in;
  1813. }
  1815. 80% {
  1816. -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
  1817. transform: perspective(400px) scale3d(.95, .95, .95);
  1818. -webkit-animation-timing-function: ease-in;
  1819. animation-timing-function: ease-in;
  1820. }
  1822. to {
  1823. -webkit-transform: perspective(400px);
  1824. transform: perspective(400px);
  1825. -webkit-animation-timing-function: ease-in;
  1826. animation-timing-function: ease-in;
  1827. }
  1828. }
  1830. .animated.flip {
  1831. -webkit-backface-visibility: visible;
  1832. backface-visibility: visible;
  1833. -webkit-animation-name: flip;
  1834. animation-name: flip;
  1835. }
  1837. @-webkit-keyframes flipInX {
  1838. from {
  1839. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  1840. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  1841. -webkit-animation-timing-function: ease-in;
  1842. animation-timing-function: ease-in;
  1843. opacity: 0;
  1844. }
  1846. 40% {
  1847. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  1848. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  1849. -webkit-animation-timing-function: ease-in;
  1850. animation-timing-function: ease-in;
  1851. }
  1853. 60% {
  1854. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  1855. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  1856. opacity: 1;
  1857. }
  1859. 80% {
  1860. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  1861. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  1862. }
  1864. to {
  1865. -webkit-transform: perspective(400px);
  1866. transform: perspective(400px);
  1867. }
  1868. }
  1870. @keyframes flipInX {
  1871. from {
  1872. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  1873. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  1874. -webkit-animation-timing-function: ease-in;
  1875. animation-timing-function: ease-in;
  1876. opacity: 0;
  1877. }
  1879. 40% {
  1880. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  1881. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  1882. -webkit-animation-timing-function: ease-in;
  1883. animation-timing-function: ease-in;
  1884. }
  1886. 60% {
  1887. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  1888. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  1889. opacity: 1;
  1890. }
  1892. 80% {
  1893. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  1894. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  1895. }
  1897. to {
  1898. -webkit-transform: perspective(400px);
  1899. transform: perspective(400px);
  1900. }
  1901. }
  1903. .flipInX {
  1904. -webkit-backface-visibility: visible !important;
  1905. backface-visibility: visible !important;
  1906. -webkit-animation-name: flipInX;
  1907. animation-name: flipInX;
  1908. }
  1910. @-webkit-keyframes flipInY {
  1911. from {
  1912. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  1913. transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  1914. -webkit-animation-timing-function: ease-in;
  1915. animation-timing-function: ease-in;
  1916. opacity: 0;
  1917. }
  1919. 40% {
  1920. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  1921. transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  1922. -webkit-animation-timing-function: ease-in;
  1923. animation-timing-function: ease-in;
  1924. }
  1926. 60% {
  1927. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  1928. transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  1929. opacity: 1;
  1930. }
  1932. 80% {
  1933. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  1934. transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  1935. }
  1937. to {
  1938. -webkit-transform: perspective(400px);
  1939. transform: perspective(400px);
  1940. }
  1941. }
  1943. @keyframes flipInY {
  1944. from {
  1945. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  1946. transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  1947. -webkit-animation-timing-function: ease-in;
  1948. animation-timing-function: ease-in;
  1949. opacity: 0;
  1950. }
  1952. 40% {
  1953. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  1954. transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  1955. -webkit-animation-timing-function: ease-in;
  1956. animation-timing-function: ease-in;
  1957. }
  1959. 60% {
  1960. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  1961. transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  1962. opacity: 1;
  1963. }
  1965. 80% {
  1966. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  1967. transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  1968. }
  1970. to {
  1971. -webkit-transform: perspective(400px);
  1972. transform: perspective(400px);
  1973. }
  1974. }
  1976. .flipInY {
  1977. -webkit-backface-visibility: visible !important;
  1978. backface-visibility: visible !important;
  1979. -webkit-animation-name: flipInY;
  1980. animation-name: flipInY;
  1981. }
  1983. @-webkit-keyframes flipOutX {
  1984. from {
  1985. -webkit-transform: perspective(400px);
  1986. transform: perspective(400px);
  1987. }
  1989. 30% {
  1990. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  1991. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  1992. opacity: 1;
  1993. }
  1995. to {
  1996. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  1997. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  1998. opacity: 0;
  1999. }
  2000. }
  2002. @keyframes flipOutX {
  2003. from {
  2004. -webkit-transform: perspective(400px);
  2005. transform: perspective(400px);
  2006. }
  2008. 30% {
  2009. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  2010. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  2011. opacity: 1;
  2012. }
  2014. to {
  2015. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  2016. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  2017. opacity: 0;
  2018. }
  2019. }
  2021. .flipOutX {
  2022. -webkit-animation-name: flipOutX;
  2023. animation-name: flipOutX;
  2024. -webkit-backface-visibility: visible !important;
  2025. backface-visibility: visible !important;
  2026. }
  2028. @-webkit-keyframes flipOutY {
  2029. from {
  2030. -webkit-transform: perspective(400px);
  2031. transform: perspective(400px);
  2032. }
  2034. 30% {
  2035. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  2036. transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  2037. opacity: 1;
  2038. }
  2040. to {
  2041. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  2042. transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  2043. opacity: 0;
  2044. }
  2045. }
  2047. @keyframes flipOutY {
  2048. from {
  2049. -webkit-transform: perspective(400px);
  2050. transform: perspective(400px);
  2051. }
  2053. 30% {
  2054. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  2055. transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  2056. opacity: 1;
  2057. }
  2059. to {
  2060. -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  2061. transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  2062. opacity: 0;
  2063. }
  2064. }
  2066. .flipOutY {
  2067. -webkit-backface-visibility: visible !important;
  2068. backface-visibility: visible !important;
  2069. -webkit-animation-name: flipOutY;
  2070. animation-name: flipOutY;
  2071. }
  2073. @-webkit-keyframes lightSpeedIn {
  2074. from {
  2075. -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  2076. transform: translate3d(100%, 0, 0) skewX(-30deg);
  2077. opacity: 0;
  2078. }
  2080. 60% {
  2081. -webkit-transform: skewX(20deg);
  2082. transform: skewX(20deg);
  2083. opacity: 1;
  2084. }
  2086. 80% {
  2087. -webkit-transform: skewX(-5deg);
  2088. transform: skewX(-5deg);
  2089. opacity: 1;
  2090. }
  2092. to {
  2093. -webkit-transform: none;
  2094. transform: none;
  2095. opacity: 1;
  2096. }
  2097. }
  2099. @keyframes lightSpeedIn {
  2100. from {
  2101. -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  2102. transform: translate3d(100%, 0, 0) skewX(-30deg);
  2103. opacity: 0;
  2104. }
  2106. 60% {
  2107. -webkit-transform: skewX(20deg);
  2108. transform: skewX(20deg);
  2109. opacity: 1;
  2110. }
  2112. 80% {
  2113. -webkit-transform: skewX(-5deg);
  2114. transform: skewX(-5deg);
  2115. opacity: 1;
  2116. }
  2118. to {
  2119. -webkit-transform: none;
  2120. transform: none;
  2121. opacity: 1;
  2122. }
  2123. }
  2125. .lightSpeedIn {
  2126. -webkit-animation-name: lightSpeedIn;
  2127. animation-name: lightSpeedIn;
  2128. -webkit-animation-timing-function: ease-out;
  2129. animation-timing-function: ease-out;
  2130. }
  2132. @-webkit-keyframes lightSpeedOut {
  2133. from {
  2134. opacity: 1;
  2135. }
  2137. to {
  2138. -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
  2139. transform: translate3d(100%, 0, 0) skewX(30deg);
  2140. opacity: 0;
  2141. }
  2142. }
  2144. @keyframes lightSpeedOut {
  2145. from {
  2146. opacity: 1;
  2147. }
  2149. to {
  2150. -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
  2151. transform: translate3d(100%, 0, 0) skewX(30deg);
  2152. opacity: 0;
  2153. }
  2154. }
  2156. .lightSpeedOut {
  2157. -webkit-animation-name: lightSpeedOut;
  2158. animation-name: lightSpeedOut;
  2159. -webkit-animation-timing-function: ease-in;
  2160. animation-timing-function: ease-in;
  2161. }
  2163. @-webkit-keyframes rotateIn {
  2164. from {
  2165. -webkit-transform-origin: center;
  2166. transform-origin: center;
  2167. -webkit-transform: rotate3d(0, 0, 1, -200deg);
  2168. transform: rotate3d(0, 0, 1, -200deg);
  2169. opacity: 0;
  2170. }
  2172. to {
  2173. -webkit-transform-origin: center;
  2174. transform-origin: center;
  2175. -webkit-transform: none;
  2176. transform: none;
  2177. opacity: 1;
  2178. }
  2179. }
  2181. @keyframes rotateIn {
  2182. from {
  2183. -webkit-transform-origin: center;
  2184. transform-origin: center;
  2185. -webkit-transform: rotate3d(0, 0, 1, -200deg);
  2186. transform: rotate3d(0, 0, 1, -200deg);
  2187. opacity: 0;
  2188. }
  2190. to {
  2191. -webkit-transform-origin: center;
  2192. transform-origin: center;
  2193. -webkit-transform: none;
  2194. transform: none;
  2195. opacity: 1;
  2196. }
  2197. }
  2199. .rotateIn {
  2200. -webkit-animation-name: rotateIn;
  2201. animation-name: rotateIn;
  2202. }
  2204. @-webkit-keyframes rotateInDownLeft {
  2205. from {
  2206. -webkit-transform-origin: left bottom;
  2207. transform-origin: left bottom;
  2208. -webkit-transform: rotate3d(0, 0, 1, -45deg);
  2209. transform: rotate3d(0, 0, 1, -45deg);
  2210. opacity: 0;
  2211. }
  2213. to {
  2214. -webkit-transform-origin: left bottom;
  2215. transform-origin: left bottom;
  2216. -webkit-transform: none;
  2217. transform: none;
  2218. opacity: 1;
  2219. }
  2220. }
  2222. @keyframes rotateInDownLeft {
  2223. from {
  2224. -webkit-transform-origin: left bottom;
  2225. transform-origin: left bottom;
  2226. -webkit-transform: rotate3d(0, 0, 1, -45deg);
  2227. transform: rotate3d(0, 0, 1, -45deg);
  2228. opacity: 0;
  2229. }
  2231. to {
  2232. -webkit-transform-origin: left bottom;
  2233. transform-origin: left bottom;
  2234. -webkit-transform: none;
  2235. transform: none;
  2236. opacity: 1;
  2237. }
  2238. }
  2240. .rotateInDownLeft {
  2241. -webkit-animation-name: rotateInDownLeft;
  2242. animation-name: rotateInDownLeft;
  2243. }
  2245. @-webkit-keyframes rotateInDownRight {
  2246. from {
  2247. -webkit-transform-origin: right bottom;
  2248. transform-origin: right bottom;
  2249. -webkit-transform: rotate3d(0, 0, 1, 45deg);
  2250. transform: rotate3d(0, 0, 1, 45deg);
  2251. opacity: 0;
  2252. }
  2254. to {
  2255. -webkit-transform-origin: right bottom;
  2256. transform-origin: right bottom;
  2257. -webkit-transform: none;
  2258. transform: none;
  2259. opacity: 1;
  2260. }
  2261. }
  2263. @keyframes rotateInDownRight {
  2264. from {
  2265. -webkit-transform-origin: right bottom;
  2266. transform-origin: right bottom;
  2267. -webkit-transform: rotate3d(0, 0, 1, 45deg);
  2268. transform: rotate3d(0, 0, 1, 45deg);
  2269. opacity: 0;
  2270. }
  2272. to {
  2273. -webkit-transform-origin: right bottom;
  2274. transform-origin: right bottom;
  2275. -webkit-transform: none;
  2276. transform: none;
  2277. opacity: 1;
  2278. }
  2279. }
  2281. .rotateInDownRight {
  2282. -webkit-animation-name: rotateInDownRight;
  2283. animation-name: rotateInDownRight;
  2284. }
  2286. @-webkit-keyframes rotateInUpLeft {
  2287. from {
  2288. -webkit-transform-origin: left bottom;
  2289. transform-origin: left bottom;
  2290. -webkit-transform: rotate3d(0, 0, 1, 45deg);
  2291. transform: rotate3d(0, 0, 1, 45deg);
  2292. opacity: 0;
  2293. }
  2295. to {
  2296. -webkit-transform-origin: left bottom;
  2297. transform-origin: left bottom;
  2298. -webkit-transform: none;
  2299. transform: none;
  2300. opacity: 1;
  2301. }
  2302. }
  2304. @keyframes rotateInUpLeft {
  2305. from {
  2306. -webkit-transform-origin: left bottom;
  2307. transform-origin: left bottom;
  2308. -webkit-transform: rotate3d(0, 0, 1, 45deg);
  2309. transform: rotate3d(0, 0, 1, 45deg);
  2310. opacity: 0;
  2311. }
  2313. to {
  2314. -webkit-transform-origin: left bottom;
  2315. transform-origin: left bottom;
  2316. -webkit-transform: none;
  2317. transform: none;
  2318. opacity: 1;
  2319. }
  2320. }
  2322. .rotateInUpLeft {
  2323. -webkit-animation-name: rotateInUpLeft;
  2324. animation-name: rotateInUpLeft;
  2325. }
  2327. @-webkit-keyframes rotateInUpRight {
  2328. from {
  2329. -webkit-transform-origin: right bottom;
  2330. transform-origin: right bottom;
  2331. -webkit-transform: rotate3d(0, 0, 1, -90deg);
  2332. transform: rotate3d(0, 0, 1, -90deg);
  2333. opacity: 0;
  2334. }
  2336. to {
  2337. -webkit-transform-origin: right bottom;
  2338. transform-origin: right bottom;
  2339. -webkit-transform: none;
  2340. transform: none;
  2341. opacity: 1;
  2342. }
  2343. }
  2345. @keyframes rotateInUpRight {
  2346. from {
  2347. -webkit-transform-origin: right bottom;
  2348. transform-origin: right bottom;
  2349. -webkit-transform: rotate3d(0, 0, 1, -90deg);
  2350. transform: rotate3d(0, 0, 1, -90deg);
  2351. opacity: 0;
  2352. }
  2354. to {
  2355. -webkit-transform-origin: right bottom;
  2356. transform-origin: right bottom;
  2357. -webkit-transform: none;
  2358. transform: none;
  2359. opacity: 1;
  2360. }
  2361. }
  2363. .rotateInUpRight {
  2364. -webkit-animation-name: rotateInUpRight;
  2365. animation-name: rotateInUpRight;
  2366. }
  2368. @-webkit-keyframes rotateOut {
  2369. from {
  2370. -webkit-transform-origin: center;
  2371. transform-origin: center;
  2372. opacity: 1;
  2373. }
  2375. to {
  2376. -webkit-transform-origin: center;
  2377. transform-origin: center;
  2378. -webkit-transform: rotate3d(0, 0, 1, 200deg);
  2379. transform: rotate3d(0, 0, 1, 200deg);
  2380. opacity: 0;
  2381. }
  2382. }
  2384. @keyframes rotateOut {
  2385. from {
  2386. -webkit-transform-origin: center;
  2387. transform-origin: center;
  2388. opacity: 1;
  2389. }
  2391. to {
  2392. -webkit-transform-origin: center;
  2393. transform-origin: center;
  2394. -webkit-transform: rotate3d(0, 0, 1, 200deg);
  2395. transform: rotate3d(0, 0, 1, 200deg);
  2396. opacity: 0;
  2397. }
  2398. }
  2400. .rotateOut {
  2401. -webkit-animation-name: rotateOut;
  2402. animation-name: rotateOut;
  2403. }
  2405. @-webkit-keyframes rotateOutDownLeft {
  2406. from {
  2407. -webkit-transform-origin: left bottom;
  2408. transform-origin: left bottom;
  2409. opacity: 1;
  2410. }
  2412. to {
  2413. -webkit-transform-origin: left bottom;
  2414. transform-origin: left bottom;
  2415. -webkit-transform: rotate3d(0, 0, 1, 45deg);
  2416. transform: rotate3d(0, 0, 1, 45deg);
  2417. opacity: 0;
  2418. }
  2419. }
  2421. @keyframes rotateOutDownLeft {
  2422. from {
  2423. -webkit-transform-origin: left bottom;
  2424. transform-origin: left bottom;
  2425. opacity: 1;
  2426. }
  2428. to {
  2429. -webkit-transform-origin: left bottom;
  2430. transform-origin: left bottom;
  2431. -webkit-transform: rotate3d(0, 0, 1, 45deg);
  2432. transform: rotate3d(0, 0, 1, 45deg);
  2433. opacity: 0;
  2434. }
  2435. }
  2437. .rotateOutDownLeft {
  2438. -webkit-animation-name: rotateOutDownLeft;
  2439. animation-name: rotateOutDownLeft;
  2440. }
  2442. @-webkit-keyframes rotateOutDownRight {
  2443. from {
  2444. -webkit-transform-origin: right bottom;
  2445. transform-origin: right bottom;
  2446. opacity: 1;
  2447. }
  2449. to {
  2450. -webkit-transform-origin: right bottom;
  2451. transform-origin: right bottom;
  2452. -webkit-transform: rotate3d(0, 0, 1, -45deg);
  2453. transform: rotate3d(0, 0, 1, -45deg);
  2454. opacity: 0;
  2455. }
  2456. }
  2458. @keyframes rotateOutDownRight {
  2459. from {
  2460. -webkit-transform-origin: right bottom;
  2461. transform-origin: right bottom;
  2462. opacity: 1;
  2463. }
  2465. to {
  2466. -webkit-transform-origin: right bottom;
  2467. transform-origin: right bottom;
  2468. -webkit-transform: rotate3d(0, 0, 1, -45deg);
  2469. transform: rotate3d(0, 0, 1, -45deg);
  2470. opacity: 0;
  2471. }
  2472. }
  2474. .rotateOutDownRight {
  2475. -webkit-animation-name: rotateOutDownRight;
  2476. animation-name: rotateOutDownRight;
  2477. }
  2479. @-webkit-keyframes rotateOutUpLeft {
  2480. from {
  2481. -webkit-transform-origin: left bottom;
  2482. transform-origin: left bottom;
  2483. opacity: 1;
  2484. }
  2486. to {
  2487. -webkit-transform-origin: left bottom;
  2488. transform-origin: left bottom;
  2489. -webkit-transform: rotate3d(0, 0, 1, -45deg);
  2490. transform: rotate3d(0, 0, 1, -45deg);
  2491. opacity: 0;
  2492. }
  2493. }
  2495. @keyframes rotateOutUpLeft {
  2496. from {
  2497. -webkit-transform-origin: left bottom;
  2498. transform-origin: left bottom;
  2499. opacity: 1;
  2500. }
  2502. to {
  2503. -webkit-transform-origin: left bottom;
  2504. transform-origin: left bottom;
  2505. -webkit-transform: rotate3d(0, 0, 1, -45deg);
  2506. transform: rotate3d(0, 0, 1, -45deg);
  2507. opacity: 0;
  2508. }
  2509. }
  2511. .rotateOutUpLeft {
  2512. -webkit-animation-name: rotateOutUpLeft;
  2513. animation-name: rotateOutUpLeft;
  2514. }
  2516. @-webkit-keyframes rotateOutUpRight {
  2517. from {
  2518. -webkit-transform-origin: right bottom;
  2519. transform-origin: right bottom;
  2520. opacity: 1;
  2521. }
  2523. to {
  2524. -webkit-transform-origin: right bottom;
  2525. transform-origin: right bottom;
  2526. -webkit-transform: rotate3d(0, 0, 1, 90deg);
  2527. transform: rotate3d(0, 0, 1, 90deg);
  2528. opacity: 0;
  2529. }
  2530. }
  2532. @keyframes rotateOutUpRight {
  2533. from {
  2534. -webkit-transform-origin: right bottom;
  2535. transform-origin: right bottom;
  2536. opacity: 1;
  2537. }
  2539. to {
  2540. -webkit-transform-origin: right bottom;
  2541. transform-origin: right bottom;
  2542. -webkit-transform: rotate3d(0, 0, 1, 90deg);
  2543. transform: rotate3d(0, 0, 1, 90deg);
  2544. opacity: 0;
  2545. }
  2546. }
  2548. .rotateOutUpRight {
  2549. -webkit-animation-name: rotateOutUpRight;
  2550. animation-name: rotateOutUpRight;
  2551. }
  2553. @-webkit-keyframes hinge {
  2554. 0% {
  2555. -webkit-transform-origin: top left;
  2556. transform-origin: top left;
  2557. -webkit-animation-timing-function: ease-in-out;
  2558. animation-timing-function: ease-in-out;
  2559. }
  2561. 20%, 60% {
  2562. -webkit-transform: rotate3d(0, 0, 1, 80deg);
  2563. transform: rotate3d(0, 0, 1, 80deg);
  2564. -webkit-transform-origin: top left;
  2565. transform-origin: top left;
  2566. -webkit-animation-timing-function: ease-in-out;
  2567. animation-timing-function: ease-in-out;
  2568. }
  2570. 40%, 80% {
  2571. -webkit-transform: rotate3d(0, 0, 1, 60deg);
  2572. transform: rotate3d(0, 0, 1, 60deg);
  2573. -webkit-transform-origin: top left;
  2574. transform-origin: top left;
  2575. -webkit-animation-timing-function: ease-in-out;
  2576. animation-timing-function: ease-in-out;
  2577. opacity: 1;
  2578. }
  2580. to {
  2581. -webkit-transform: translate3d(0, 700px, 0);
  2582. transform: translate3d(0, 700px, 0);
  2583. opacity: 0;
  2584. }
  2585. }
  2587. @keyframes hinge {
  2588. 0% {
  2589. -webkit-transform-origin: top left;
  2590. transform-origin: top left;
  2591. -webkit-animation-timing-function: ease-in-out;
  2592. animation-timing-function: ease-in-out;
  2593. }
  2595. 20%, 60% {
  2596. -webkit-transform: rotate3d(0, 0, 1, 80deg);
  2597. transform: rotate3d(0, 0, 1, 80deg);
  2598. -webkit-transform-origin: top left;
  2599. transform-origin: top left;
  2600. -webkit-animation-timing-function: ease-in-out;
  2601. animation-timing-function: ease-in-out;
  2602. }
  2604. 40%, 80% {
  2605. -webkit-transform: rotate3d(0, 0, 1, 60deg);
  2606. transform: rotate3d(0, 0, 1, 60deg);
  2607. -webkit-transform-origin: top left;
  2608. transform-origin: top left;
  2609. -webkit-animation-timing-function: ease-in-out;
  2610. animation-timing-function: ease-in-out;
  2611. opacity: 1;
  2612. }
  2614. to {
  2615. -webkit-transform: translate3d(0, 700px, 0);
  2616. transform: translate3d(0, 700px, 0);
  2617. opacity: 0;
  2618. }
  2619. }
  2621. .hinge {
  2622. -webkit-animation-name: hinge;
  2623. animation-name: hinge;
  2624. }
  2626. /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  2628. @-webkit-keyframes rollIn {
  2629. from {
  2630. opacity: 0;
  2631. -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  2632. transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  2633. }
  2635. to {
  2636. opacity: 1;
  2637. -webkit-transform: none;
  2638. transform: none;
  2639. }
  2640. }
  2642. @keyframes rollIn {
  2643. from {
  2644. opacity: 0;
  2645. -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  2646. transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  2647. }
  2649. to {
  2650. opacity: 1;
  2651. -webkit-transform: none;
  2652. transform: none;
  2653. }
  2654. }
  2656. .rollIn {
  2657. -webkit-animation-name: rollIn;
  2658. animation-name: rollIn;
  2659. }
  2661. /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  2663. @-webkit-keyframes rollOut {
  2664. from {
  2665. opacity: 1;
  2666. }
  2668. to {
  2669. opacity: 0;
  2670. -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  2671. transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  2672. }
  2673. }
  2675. @keyframes rollOut {
  2676. from {
  2677. opacity: 1;
  2678. }
  2680. to {
  2681. opacity: 0;
  2682. -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  2683. transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  2684. }
  2685. }
  2687. .rollOut {
  2688. -webkit-animation-name: rollOut;
  2689. animation-name: rollOut;
  2690. }
  2692. @-webkit-keyframes zoomIn {
  2693. from {
  2694. opacity: 0;
  2695. -webkit-transform: scale3d(.3, .3, .3);
  2696. transform: scale3d(.3, .3, .3);
  2697. }
  2699. 50% {
  2700. opacity: 1;
  2701. }
  2702. }
  2704. @keyframes zoomIn {
  2705. from {
  2706. opacity: 0;
  2707. -webkit-transform: scale3d(.3, .3, .3);
  2708. transform: scale3d(.3, .3, .3);
  2709. }
  2711. 50% {
  2712. opacity: 1;
  2713. }
  2714. }
  2716. .zoomIn {
  2717. -webkit-animation-name: zoomIn;
  2718. animation-name: zoomIn;
  2719. }
  2721. @-webkit-keyframes zoomInDown {
  2722. from {
  2723. opacity: 0;
  2724. -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  2725. transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  2726. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2727. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2728. }
  2730. 60% {
  2731. opacity: 1;
  2732. -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  2733. transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  2734. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2735. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2736. }
  2737. }
  2739. @keyframes zoomInDown {
  2740. from {
  2741. opacity: 0;
  2742. -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  2743. transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  2744. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2745. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2746. }
  2748. 60% {
  2749. opacity: 1;
  2750. -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  2751. transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  2752. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2753. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2754. }
  2755. }
  2757. .zoomInDown {
  2758. -webkit-animation-name: zoomInDown;
  2759. animation-name: zoomInDown;
  2760. }
  2762. @-webkit-keyframes zoomInLeft {
  2763. from {
  2764. opacity: 0;
  2765. -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
  2766. transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
  2767. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2768. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2769. }
  2771. 60% {
  2772. opacity: 1;
  2773. -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
  2774. transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
  2775. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2776. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2777. }
  2778. }
  2780. @keyframes zoomInLeft {
  2781. from {
  2782. opacity: 0;
  2783. -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
  2784. transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
  2785. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2786. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2787. }
  2789. 60% {
  2790. opacity: 1;
  2791. -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
  2792. transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
  2793. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2794. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2795. }
  2796. }
  2798. .zoomInLeft {
  2799. -webkit-animation-name: zoomInLeft;
  2800. animation-name: zoomInLeft;
  2801. }
  2803. @-webkit-keyframes zoomInRight {
  2804. from {
  2805. opacity: 0;
  2806. -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
  2807. transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
  2808. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2809. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2810. }
  2812. 60% {
  2813. opacity: 1;
  2814. -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
  2815. transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
  2816. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2817. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2818. }
  2819. }
  2821. @keyframes zoomInRight {
  2822. from {
  2823. opacity: 0;
  2824. -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
  2825. transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
  2826. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2827. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2828. }
  2830. 60% {
  2831. opacity: 1;
  2832. -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
  2833. transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
  2834. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2835. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2836. }
  2837. }
  2839. .zoomInRight {
  2840. -webkit-animation-name: zoomInRight;
  2841. animation-name: zoomInRight;
  2842. }
  2844. @-webkit-keyframes zoomInUp {
  2845. from {
  2846. opacity: 0;
  2847. -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  2848. transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  2849. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2850. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2851. }
  2853. 60% {
  2854. opacity: 1;
  2855. -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  2856. transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  2857. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2858. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2859. }
  2860. }
  2862. @keyframes zoomInUp {
  2863. from {
  2864. opacity: 0;
  2865. -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  2866. transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  2867. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2868. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2869. }
  2871. 60% {
  2872. opacity: 1;
  2873. -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  2874. transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  2875. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2876. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2877. }
  2878. }
  2880. .zoomInUp {
  2881. -webkit-animation-name: zoomInUp;
  2882. animation-name: zoomInUp;
  2883. }
  2885. @-webkit-keyframes zoomOut {
  2886. from {
  2887. opacity: 1;
  2888. }
  2890. 50% {
  2891. opacity: 0;
  2892. -webkit-transform: scale3d(.3, .3, .3);
  2893. transform: scale3d(.3, .3, .3);
  2894. }
  2896. to {
  2897. opacity: 0;
  2898. }
  2899. }
  2901. @keyframes zoomOut {
  2902. from {
  2903. opacity: 1;
  2904. }
  2906. 50% {
  2907. opacity: 0;
  2908. -webkit-transform: scale3d(.3, .3, .3);
  2909. transform: scale3d(.3, .3, .3);
  2910. }
  2912. to {
  2913. opacity: 0;
  2914. }
  2915. }
  2917. .zoomOut {
  2918. -webkit-animation-name: zoomOut;
  2919. animation-name: zoomOut;
  2920. }
  2922. @-webkit-keyframes zoomOutDown {
  2923. 40% {
  2924. opacity: 1;
  2925. -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  2926. transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  2927. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2928. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2929. }
  2931. to {
  2932. opacity: 0;
  2933. -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
  2934. transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
  2935. -webkit-transform-origin: center bottom;
  2936. transform-origin: center bottom;
  2937. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2938. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2939. }
  2940. }
  2942. @keyframes zoomOutDown {
  2943. 40% {
  2944. opacity: 1;
  2945. -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  2946. transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  2947. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2948. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  2949. }
  2951. to {
  2952. opacity: 0;
  2953. -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
  2954. transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
  2955. -webkit-transform-origin: center bottom;
  2956. transform-origin: center bottom;
  2957. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2958. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  2959. }
  2960. }
  2962. .zoomOutDown {
  2963. -webkit-animation-name: zoomOutDown;
  2964. animation-name: zoomOutDown;
  2965. }
  2967. @-webkit-keyframes zoomOutLeft {
  2968. 40% {
  2969. opacity: 1;
  2970. -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  2971. transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  2972. }
  2974. to {
  2975. opacity: 0;
  2976. -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
  2977. transform: scale(.1) translate3d(-2000px, 0, 0);
  2978. -webkit-transform-origin: left center;
  2979. transform-origin: left center;
  2980. }
  2981. }
  2983. @keyframes zoomOutLeft {
  2984. 40% {
  2985. opacity: 1;
  2986. -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  2987. transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  2988. }
  2990. to {
  2991. opacity: 0;
  2992. -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
  2993. transform: scale(.1) translate3d(-2000px, 0, 0);
  2994. -webkit-transform-origin: left center;
  2995. transform-origin: left center;
  2996. }
  2997. }
  2999. .zoomOutLeft {
  3000. -webkit-animation-name: zoomOutLeft;
  3001. animation-name: zoomOutLeft;
  3002. }
  3004. @-webkit-keyframes zoomOutRight {
  3005. 40% {
  3006. opacity: 1;
  3007. -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  3008. transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  3009. }
  3011. to {
  3012. opacity: 0;
  3013. -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
  3014. transform: scale(.1) translate3d(2000px, 0, 0);
  3015. -webkit-transform-origin: right center;
  3016. transform-origin: right center;
  3017. }
  3018. }
  3020. @keyframes zoomOutRight {
  3021. 40% {
  3022. opacity: 1;
  3023. -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  3024. transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  3025. }
  3027. to {
  3028. opacity: 0;
  3029. -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
  3030. transform: scale(.1) translate3d(2000px, 0, 0);
  3031. -webkit-transform-origin: right center;
  3032. transform-origin: right center;
  3033. }
  3034. }
  3036. .zoomOutRight {
  3037. -webkit-animation-name: zoomOutRight;
  3038. animation-name: zoomOutRight;
  3039. }
  3041. @-webkit-keyframes zoomOutUp {
  3042. 40% {
  3043. opacity: 1;
  3044. -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  3045. transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  3046. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  3047. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  3048. }
  3050. to {
  3051. opacity: 0;
  3052. -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  3053. transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  3054. -webkit-transform-origin: center bottom;
  3055. transform-origin: center bottom;
  3056. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  3057. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  3058. }
  3059. }
  3061. @keyframes zoomOutUp {
  3062. 40% {
  3063. opacity: 1;
  3064. -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  3065. transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  3066. -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  3067. animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  3068. }
  3070. to {
  3071. opacity: 0;
  3072. -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  3073. transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  3074. -webkit-transform-origin: center bottom;
  3075. transform-origin: center bottom;
  3076. -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  3077. animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  3078. }
  3079. }
  3081. .zoomOutUp {
  3082. -webkit-animation-name: zoomOutUp;
  3083. animation-name: zoomOutUp;
  3084. }
  3086. @-webkit-keyframes slideInDown {
  3087. from {
  3088. -webkit-transform: translate3d(0, -100%, 0);
  3089. transform: translate3d(0, -100%, 0);
  3090. visibility: visible;
  3091. }
  3093. to {
  3094. -webkit-transform: translate3d(0, 0, 0);
  3095. transform: translate3d(0, 0, 0);
  3096. }
  3097. }
  3099. @keyframes slideInDown {
  3100. from {
  3101. -webkit-transform: translate3d(0, -100%, 0);
  3102. transform: translate3d(0, -100%, 0);
  3103. visibility: visible;
  3104. }
  3106. to {
  3107. -webkit-transform: translate3d(0, 0, 0);
  3108. transform: translate3d(0, 0, 0);
  3109. }
  3110. }
  3112. .slideInDown {
  3113. -webkit-animation-name: slideInDown;
  3114. animation-name: slideInDown;
  3115. }
  3117. @-webkit-keyframes slideInLeft {
  3118. from {
  3119. -webkit-transform: translate3d(-100%, 0, 0);
  3120. transform: translate3d(-100%, 0, 0);
  3121. visibility: visible;
  3122. }
  3124. to {
  3125. -webkit-transform: translate3d(0, 0, 0);
  3126. transform: translate3d(0, 0, 0);
  3127. }
  3128. }
  3130. @keyframes slideInLeft {
  3131. from {
  3132. -webkit-transform: translate3d(-100%, 0, 0);
  3133. transform: translate3d(-100%, 0, 0);
  3134. visibility: visible;
  3135. }
  3137. to {
  3138. -webkit-transform: translate3d(0, 0, 0);
  3139. transform: translate3d(0, 0, 0);
  3140. }
  3141. }
  3143. .slideInLeft {
  3144. -webkit-animation-name: slideInLeft;
  3145. animation-name: slideInLeft;
  3146. }
  3148. @-webkit-keyframes slideInRight {
  3149. from {
  3150. -webkit-transform: translate3d(100%, 0, 0);
  3151. transform: translate3d(100%, 0, 0);
  3152. visibility: visible;
  3153. }
  3155. to {
  3156. -webkit-transform: translate3d(0, 0, 0);
  3157. transform: translate3d(0, 0, 0);
  3158. }
  3159. }
  3161. @keyframes slideInRight {
  3162. from {
  3163. -webkit-transform: translate3d(100%, 0, 0);
  3164. transform: translate3d(100%, 0, 0);
  3165. visibility: visible;
  3166. }
  3168. to {
  3169. -webkit-transform: translate3d(0, 0, 0);
  3170. transform: translate3d(0, 0, 0);
  3171. }
  3172. }
  3174. .slideInRight {
  3175. -webkit-animation-name: slideInRight;
  3176. animation-name: slideInRight;
  3177. }
  3179. @-webkit-keyframes slideInUp {
  3180. from {
  3181. -webkit-transform: translate3d(0, 100%, 0);
  3182. transform: translate3d(0, 100%, 0);
  3183. visibility: visible;
  3184. }
  3186. to {
  3187. -webkit-transform: translate3d(0, 0, 0);
  3188. transform: translate3d(0, 0, 0);
  3189. }
  3190. }
  3192. @keyframes slideInUp {
  3193. from {
  3194. -webkit-transform: translate3d(0, 100%, 0);
  3195. transform: translate3d(0, 100%, 0);
  3196. visibility: visible;
  3197. }
  3199. to {
  3200. -webkit-transform: translate3d(0, 0, 0);
  3201. transform: translate3d(0, 0, 0);
  3202. }
  3203. }
  3205. .slideInUp {
  3206. -webkit-animation-name: slideInUp;
  3207. animation-name: slideInUp;
  3208. }
  3210. @-webkit-keyframes slideOutDown {
  3211. from {
  3212. -webkit-transform: translate3d(0, 0, 0);
  3213. transform: translate3d(0, 0, 0);
  3214. }
  3216. to {
  3217. visibility: hidden;
  3218. -webkit-transform: translate3d(0, 100%, 0);
  3219. transform: translate3d(0, 100%, 0);
  3220. }
  3221. }
  3223. @keyframes slideOutDown {
  3224. from {
  3225. -webkit-transform: translate3d(0, 0, 0);
  3226. transform: translate3d(0, 0, 0);
  3227. }
  3229. to {
  3230. visibility: hidden;
  3231. -webkit-transform: translate3d(0, 100%, 0);
  3232. transform: translate3d(0, 100%, 0);
  3233. }
  3234. }
  3236. .slideOutDown {
  3237. -webkit-animation-name: slideOutDown;
  3238. animation-name: slideOutDown;
  3239. }
  3241. @-webkit-keyframes slideOutLeft {
  3242. from {
  3243. -webkit-transform: translate3d(0, 0, 0);
  3244. transform: translate3d(0, 0, 0);
  3245. }
  3247. to {
  3248. visibility: hidden;
  3249. -webkit-transform: translate3d(-100%, 0, 0);
  3250. transform: translate3d(-100%, 0, 0);
  3251. }
  3252. }
  3254. @keyframes slideOutLeft {
  3255. from {
  3256. -webkit-transform: translate3d(0, 0, 0);
  3257. transform: translate3d(0, 0, 0);
  3258. }
  3260. to {
  3261. visibility: hidden;
  3262. -webkit-transform: translate3d(-100%, 0, 0);
  3263. transform: translate3d(-100%, 0, 0);
  3264. }
  3265. }
  3267. .slideOutLeft {
  3268. -webkit-animation-name: slideOutLeft;
  3269. animation-name: slideOutLeft;
  3270. }
  3272. @-webkit-keyframes slideOutRight {
  3273. from {
  3274. -webkit-transform: translate3d(0, 0, 0);
  3275. transform: translate3d(0, 0, 0);
  3276. }
  3278. to {
  3279. visibility: hidden;
  3280. -webkit-transform: translate3d(100%, 0, 0);
  3281. transform: translate3d(100%, 0, 0);
  3282. }
  3283. }
  3285. @keyframes slideOutRight {
  3286. from {
  3287. -webkit-transform: translate3d(0, 0, 0);
  3288. transform: translate3d(0, 0, 0);
  3289. }
  3291. to {
  3292. visibility: hidden;
  3293. -webkit-transform: translate3d(100%, 0, 0);
  3294. transform: translate3d(100%, 0, 0);
  3295. }
  3296. }
  3298. .slideOutRight {
  3299. -webkit-animation-name: slideOutRight;
  3300. animation-name: slideOutRight;
  3301. }
  3303. @-webkit-keyframes slideOutUp {
  3304. from {
  3305. -webkit-transform: translate3d(0, 0, 0);
  3306. transform: translate3d(0, 0, 0);
  3307. }
  3309. to {
  3310. visibility: hidden;
  3311. -webkit-transform: translate3d(0, -100%, 0);
  3312. transform: translate3d(0, -100%, 0);
  3313. }
  3314. }
  3316. @keyframes slideOutUp {
  3317. from {
  3318. -webkit-transform: translate3d(0, 0, 0);
  3319. transform: translate3d(0, 0, 0);
  3320. }
  3322. to {
  3323. visibility: hidden;
  3324. -webkit-transform: translate3d(0, -100%, 0);
  3325. transform: translate3d(0, -100%, 0);
  3326. }
  3327. }
  3329. .slideOutUp {
  3330. -webkit-animation-name: slideOutUp;
  3331. animation-name: slideOutUp;
  3332. }
comments powered by Disqus