You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1982 lines
45 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Transition
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Transitions
  13. *******************************/
  14. .transition {
  15. -webkit-animation-iteration-count: 1;
  16. animation-iteration-count: 1;
  17. -webkit-animation-duration: 300ms;
  18. animation-duration: 300ms;
  19. -webkit-animation-timing-function: ease;
  20. animation-timing-function: ease;
  21. -webkit-animation-fill-mode: both;
  22. animation-fill-mode: both;
  23. }
  24. /*******************************
  25. States
  26. *******************************/
  27. /* Animating */
  28. .animating.transition {
  29. -webkit-backface-visibility: hidden;
  30. backface-visibility: hidden;
  31. visibility: visible !important;
  32. }
  33. /* Loading */
  34. .loading.transition {
  35. position: absolute;
  36. top: -99999px;
  37. left: -99999px;
  38. }
  39. /* Hidden */
  40. .hidden.transition {
  41. display: none;
  42. visibility: hidden;
  43. }
  44. /* Visible */
  45. .visible.transition {
  46. display: block !important;
  47. visibility: visible !important;
  48. /* backface-visibility: @backfaceVisibility;
  49. transform: @use3DAcceleration;*/
  50. }
  51. /* Disabled */
  52. .disabled.transition {
  53. -webkit-animation-play-state: paused;
  54. animation-play-state: paused;
  55. }
  56. /*******************************
  57. Variations
  58. *******************************/
  59. .looping.transition {
  60. -webkit-animation-iteration-count: infinite;
  61. animation-iteration-count: infinite;
  62. }
  63. /*******************************
  64. Transitions
  65. *******************************/
  66. /*
  67. Some transitions adapted from Animate CSS
  68. https://github.com/daneden/animate.css
  69. Additional transitions adapted from Glide
  70. by Nick Pettit - https://github.com/nickpettit/glide
  71. */
  72. /*--------------
  73. Browse
  74. ---------------*/
  75. .transition.browse {
  76. -webkit-animation-duration: 500ms;
  77. animation-duration: 500ms;
  78. }
  79. .transition.browse.in {
  80. -webkit-animation-name: browseIn;
  81. animation-name: browseIn;
  82. }
  83. .transition.browse.out,
  84. .transition.browse.left.out {
  85. -webkit-animation-name: browseOutLeft;
  86. animation-name: browseOutLeft;
  87. }
  88. .transition.browse.right.out {
  89. -webkit-animation-name: browseOutRight;
  90. animation-name: browseOutRight;
  91. }
  92. /* In */
  93. @-webkit-keyframes browseIn {
  94. 0% {
  95. -webkit-transform: scale(0.8) translateZ(0px);
  96. transform: scale(0.8) translateZ(0px);
  97. z-index: -1;
  98. }
  99. 10% {
  100. -webkit-transform: scale(0.8) translateZ(0px);
  101. transform: scale(0.8) translateZ(0px);
  102. z-index: -1;
  103. opacity: 0.7;
  104. }
  105. 80% {
  106. -webkit-transform: scale(1.05) translateZ(0px);
  107. transform: scale(1.05) translateZ(0px);
  108. opacity: 1;
  109. z-index: 999;
  110. }
  111. 100% {
  112. -webkit-transform: scale(1) translateZ(0px);
  113. transform: scale(1) translateZ(0px);
  114. z-index: 999;
  115. }
  116. }
  117. @keyframes browseIn {
  118. 0% {
  119. -webkit-transform: scale(0.8) translateZ(0px);
  120. transform: scale(0.8) translateZ(0px);
  121. z-index: -1;
  122. }
  123. 10% {
  124. -webkit-transform: scale(0.8) translateZ(0px);
  125. transform: scale(0.8) translateZ(0px);
  126. z-index: -1;
  127. opacity: 0.7;
  128. }
  129. 80% {
  130. -webkit-transform: scale(1.05) translateZ(0px);
  131. transform: scale(1.05) translateZ(0px);
  132. opacity: 1;
  133. z-index: 999;
  134. }
  135. 100% {
  136. -webkit-transform: scale(1) translateZ(0px);
  137. transform: scale(1) translateZ(0px);
  138. z-index: 999;
  139. }
  140. }
  141. /* Out */
  142. @-webkit-keyframes browseOutLeft {
  143. 0% {
  144. z-index: 999;
  145. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  146. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  147. }
  148. 50% {
  149. z-index: -1;
  150. -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  151. transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  152. }
  153. 80% {
  154. opacity: 1;
  155. }
  156. 100% {
  157. z-index: -1;
  158. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  159. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  160. opacity: 0;
  161. }
  162. }
  163. @keyframes browseOutLeft {
  164. 0% {
  165. z-index: 999;
  166. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  167. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  168. }
  169. 50% {
  170. z-index: -1;
  171. -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  172. transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  173. }
  174. 80% {
  175. opacity: 1;
  176. }
  177. 100% {
  178. z-index: -1;
  179. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  180. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  181. opacity: 0;
  182. }
  183. }
  184. @-webkit-keyframes browseOutRight {
  185. 0% {
  186. z-index: 999;
  187. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  188. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  189. }
  190. 50% {
  191. z-index: 1;
  192. -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  193. transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  194. }
  195. 80% {
  196. opacity: 1;
  197. }
  198. 100% {
  199. z-index: 1;
  200. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  201. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  202. opacity: 0;
  203. }
  204. }
  205. @keyframes browseOutRight {
  206. 0% {
  207. z-index: 999;
  208. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  209. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  210. }
  211. 50% {
  212. z-index: 1;
  213. -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  214. transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  215. }
  216. 80% {
  217. opacity: 1;
  218. }
  219. 100% {
  220. z-index: 1;
  221. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  222. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  223. opacity: 0;
  224. }
  225. }
  226. /*--------------
  227. Drop
  228. ---------------*/
  229. .drop.transition {
  230. -webkit-transform-origin: top center;
  231. -ms-transform-origin: top center;
  232. transform-origin: top center;
  233. -webkit-animation-duration: 400ms;
  234. animation-duration: 400ms;
  235. -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
  236. animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
  237. }
  238. .drop.transition.in {
  239. -webkit-animation-name: dropIn;
  240. animation-name: dropIn;
  241. }
  242. .drop.transition.out {
  243. -webkit-animation-name: dropOut;
  244. animation-name: dropOut;
  245. }
  246. /* Drop */
  247. @-webkit-keyframes dropIn {
  248. 0% {
  249. opacity: 0;
  250. -webkit-transform: scale(0);
  251. transform: scale(0);
  252. }
  253. 100% {
  254. opacity: 1;
  255. -webkit-transform: scale(1);
  256. transform: scale(1);
  257. }
  258. }
  259. @keyframes dropIn {
  260. 0% {
  261. opacity: 0;
  262. -webkit-transform: scale(0);
  263. transform: scale(0);
  264. }
  265. 100% {
  266. opacity: 1;
  267. -webkit-transform: scale(1);
  268. transform: scale(1);
  269. }
  270. }
  271. @-webkit-keyframes dropOut {
  272. 0% {
  273. opacity: 1;
  274. -webkit-transform: scale(1);
  275. transform: scale(1);
  276. }
  277. 100% {
  278. opacity: 0;
  279. -webkit-transform: scale(0);
  280. transform: scale(0);
  281. }
  282. }
  283. @keyframes dropOut {
  284. 0% {
  285. opacity: 1;
  286. -webkit-transform: scale(1);
  287. transform: scale(1);
  288. }
  289. 100% {
  290. opacity: 0;
  291. -webkit-transform: scale(0);
  292. transform: scale(0);
  293. }
  294. }
  295. /*--------------
  296. Fade
  297. ---------------*/
  298. .transition.fade.in {
  299. -webkit-animation-name: fadeIn;
  300. animation-name: fadeIn;
  301. }
  302. .transition[class*="fade up"].in {
  303. -webkit-animation-name: fadeInUp;
  304. animation-name: fadeInUp;
  305. }
  306. .transition[class*="fade down"].in {
  307. -webkit-animation-name: fadeInDown;
  308. animation-name: fadeInDown;
  309. }
  310. .transition[class*="fade left"].in {
  311. -webkit-animation-name: fadeInLeft;
  312. animation-name: fadeInLeft;
  313. }
  314. .transition[class*="fade right"].in {
  315. -webkit-animation-name: fadeInRight;
  316. animation-name: fadeInRight;
  317. }
  318. .transition.fade.out {
  319. -webkit-animation-name: fadeOut;
  320. animation-name: fadeOut;
  321. }
  322. .transition[class*="fade up"].out {
  323. -webkit-animation-name: fadeOutUp;
  324. animation-name: fadeOutUp;
  325. }
  326. .transition[class*="fade down"].out {
  327. -webkit-animation-name: fadeOutDown;
  328. animation-name: fadeOutDown;
  329. }
  330. .transition[class*="fade left"].out {
  331. -webkit-animation-name: fadeOutLeft;
  332. animation-name: fadeOutLeft;
  333. }
  334. .transition[class*="fade right"].out {
  335. -webkit-animation-name: fadeOutRight;
  336. animation-name: fadeOutRight;
  337. }
  338. /* In */
  339. @-webkit-keyframes fadeIn {
  340. 0% {
  341. opacity: 0;
  342. }
  343. 100% {
  344. opacity: 1;
  345. }
  346. }
  347. @keyframes fadeIn {
  348. 0% {
  349. opacity: 0;
  350. }
  351. 100% {
  352. opacity: 1;
  353. }
  354. }
  355. @-webkit-keyframes fadeInUp {
  356. 0% {
  357. opacity: 0;
  358. -webkit-transform: translateY(10%);
  359. transform: translateY(10%);
  360. }
  361. 100% {
  362. opacity: 1;
  363. -webkit-transform: translateY(0%);
  364. transform: translateY(0%);
  365. }
  366. }
  367. @keyframes fadeInUp {
  368. 0% {
  369. opacity: 0;
  370. -webkit-transform: translateY(10%);
  371. transform: translateY(10%);
  372. }
  373. 100% {
  374. opacity: 1;
  375. -webkit-transform: translateY(0%);
  376. transform: translateY(0%);
  377. }
  378. }
  379. @-webkit-keyframes fadeInDown {
  380. 0% {
  381. opacity: 0;
  382. -webkit-transform: translateY(-10%);
  383. transform: translateY(-10%);
  384. }
  385. 100% {
  386. opacity: 1;
  387. -webkit-transform: translateY(0%);
  388. transform: translateY(0%);
  389. }
  390. }
  391. @keyframes fadeInDown {
  392. 0% {
  393. opacity: 0;
  394. -webkit-transform: translateY(-10%);
  395. transform: translateY(-10%);
  396. }
  397. 100% {
  398. opacity: 1;
  399. -webkit-transform: translateY(0%);
  400. transform: translateY(0%);
  401. }
  402. }
  403. @-webkit-keyframes fadeInLeft {
  404. 0% {
  405. opacity: 0;
  406. -webkit-transform: translateX(10%);
  407. transform: translateX(10%);
  408. }
  409. 100% {
  410. opacity: 1;
  411. -webkit-transform: translateX(0%);
  412. transform: translateX(0%);
  413. }
  414. }
  415. @keyframes fadeInLeft {
  416. 0% {
  417. opacity: 0;
  418. -webkit-transform: translateX(10%);
  419. transform: translateX(10%);
  420. }
  421. 100% {
  422. opacity: 1;
  423. -webkit-transform: translateX(0%);
  424. transform: translateX(0%);
  425. }
  426. }
  427. @-webkit-keyframes fadeInRight {
  428. 0% {
  429. opacity: 0;
  430. -webkit-transform: translateX(-10%);
  431. transform: translateX(-10%);
  432. }
  433. 100% {
  434. opacity: 1;
  435. -webkit-transform: translateX(0%);
  436. transform: translateX(0%);
  437. }
  438. }
  439. @keyframes fadeInRight {
  440. 0% {
  441. opacity: 0;
  442. -webkit-transform: translateX(-10%);
  443. transform: translateX(-10%);
  444. }
  445. 100% {
  446. opacity: 1;
  447. -webkit-transform: translateX(0%);
  448. transform: translateX(0%);
  449. }
  450. }
  451. /* Out */
  452. @-webkit-keyframes fadeOut {
  453. 0% {
  454. opacity: 1;
  455. }
  456. 100% {
  457. opacity: 0;
  458. }
  459. }
  460. @keyframes fadeOut {
  461. 0% {
  462. opacity: 1;
  463. }
  464. 100% {
  465. opacity: 0;
  466. }
  467. }
  468. @-webkit-keyframes fadeOutUp {
  469. 0% {
  470. opacity: 1;
  471. -webkit-transform: translateY(0%);
  472. transform: translateY(0%);
  473. }
  474. 100% {
  475. opacity: 0;
  476. -webkit-transform: translateY(5%);
  477. transform: translateY(5%);
  478. }
  479. }
  480. @keyframes fadeOutUp {
  481. 0% {
  482. opacity: 1;
  483. -webkit-transform: translateY(0%);
  484. transform: translateY(0%);
  485. }
  486. 100% {
  487. opacity: 0;
  488. -webkit-transform: translateY(5%);
  489. transform: translateY(5%);
  490. }
  491. }
  492. @-webkit-keyframes fadeOutDown {
  493. 0% {
  494. opacity: 1;
  495. -webkit-transform: translateY(0%);
  496. transform: translateY(0%);
  497. }
  498. 100% {
  499. opacity: 0;
  500. -webkit-transform: translateY(-5%);
  501. transform: translateY(-5%);
  502. }
  503. }
  504. @keyframes fadeOutDown {
  505. 0% {
  506. opacity: 1;
  507. -webkit-transform: translateY(0%);
  508. transform: translateY(0%);
  509. }
  510. 100% {
  511. opacity: 0;
  512. -webkit-transform: translateY(-5%);
  513. transform: translateY(-5%);
  514. }
  515. }
  516. @-webkit-keyframes fadeOutLeft {
  517. 0% {
  518. opacity: 1;
  519. -webkit-transform: translateX(0%);
  520. transform: translateX(0%);
  521. }
  522. 100% {
  523. opacity: 0;
  524. -webkit-transform: translateX(5%);
  525. transform: translateX(5%);
  526. }
  527. }
  528. @keyframes fadeOutLeft {
  529. 0% {
  530. opacity: 1;
  531. -webkit-transform: translateX(0%);
  532. transform: translateX(0%);
  533. }
  534. 100% {
  535. opacity: 0;
  536. -webkit-transform: translateX(5%);
  537. transform: translateX(5%);
  538. }
  539. }
  540. @-webkit-keyframes fadeOutRight {
  541. 0% {
  542. opacity: 1;
  543. -webkit-transform: translateX(0%);
  544. transform: translateX(0%);
  545. }
  546. 100% {
  547. opacity: 0;
  548. -webkit-transform: translateX(-5%);
  549. transform: translateX(-5%);
  550. }
  551. }
  552. @keyframes fadeOutRight {
  553. 0% {
  554. opacity: 1;
  555. -webkit-transform: translateX(0%);
  556. transform: translateX(0%);
  557. }
  558. 100% {
  559. opacity: 0;
  560. -webkit-transform: translateX(-5%);
  561. transform: translateX(-5%);
  562. }
  563. }
  564. /*--------------
  565. Flips
  566. ---------------*/
  567. .flip.transition.in,
  568. .flip.transition.out {
  569. -webkit-animation-duration: 600ms;
  570. animation-duration: 600ms;
  571. }
  572. .horizontal.flip.transition.in {
  573. -webkit-animation-name: horizontalFlipIn;
  574. animation-name: horizontalFlipIn;
  575. }
  576. .horizontal.flip.transition.out {
  577. -webkit-animation-name: horizontalFlipOut;
  578. animation-name: horizontalFlipOut;
  579. }
  580. .vertical.flip.transition.in {
  581. -webkit-animation-name: verticalFlipIn;
  582. animation-name: verticalFlipIn;
  583. }
  584. .vertical.flip.transition.out {
  585. -webkit-animation-name: verticalFlipOut;
  586. animation-name: verticalFlipOut;
  587. }
  588. /* In */
  589. @-webkit-keyframes horizontalFlipIn {
  590. 0% {
  591. -webkit-transform: perspective(2000px) rotateY(-90deg);
  592. transform: perspective(2000px) rotateY(-90deg);
  593. opacity: 0;
  594. }
  595. 100% {
  596. -webkit-transform: perspective(2000px) rotateY(0deg);
  597. transform: perspective(2000px) rotateY(0deg);
  598. opacity: 1;
  599. }
  600. }
  601. @keyframes horizontalFlipIn {
  602. 0% {
  603. -webkit-transform: perspective(2000px) rotateY(-90deg);
  604. transform: perspective(2000px) rotateY(-90deg);
  605. opacity: 0;
  606. }
  607. 100% {
  608. -webkit-transform: perspective(2000px) rotateY(0deg);
  609. transform: perspective(2000px) rotateY(0deg);
  610. opacity: 1;
  611. }
  612. }
  613. @-webkit-keyframes verticalFlipIn {
  614. 0% {
  615. -webkit-transform: perspective(2000px) rotateX(-90deg);
  616. transform: perspective(2000px) rotateX(-90deg);
  617. opacity: 0;
  618. }
  619. 100% {
  620. -webkit-transform: perspective(2000px) rotateX(0deg);
  621. transform: perspective(2000px) rotateX(0deg);
  622. opacity: 1;
  623. }
  624. }
  625. @keyframes verticalFlipIn {
  626. 0% {
  627. -webkit-transform: perspective(2000px) rotateX(-90deg);
  628. transform: perspective(2000px) rotateX(-90deg);
  629. opacity: 0;
  630. }
  631. 100% {
  632. -webkit-transform: perspective(2000px) rotateX(0deg);
  633. transform: perspective(2000px) rotateX(0deg);
  634. opacity: 1;
  635. }
  636. }
  637. /* Out */
  638. @-webkit-keyframes horizontalFlipOut {
  639. 0% {
  640. -webkit-transform: perspective(2000px) rotateY(0deg);
  641. transform: perspective(2000px) rotateY(0deg);
  642. opacity: 1;
  643. }
  644. 100% {
  645. -webkit-transform: perspective(2000px) rotateY(90deg);
  646. transform: perspective(2000px) rotateY(90deg);
  647. opacity: 0;
  648. }
  649. }
  650. @keyframes horizontalFlipOut {
  651. 0% {
  652. -webkit-transform: perspective(2000px) rotateY(0deg);
  653. transform: perspective(2000px) rotateY(0deg);
  654. opacity: 1;
  655. }
  656. 100% {
  657. -webkit-transform: perspective(2000px) rotateY(90deg);
  658. transform: perspective(2000px) rotateY(90deg);
  659. opacity: 0;
  660. }
  661. }
  662. @-webkit-keyframes verticalFlipOut {
  663. 0% {
  664. -webkit-transform: perspective(2000px) rotateX(0deg);
  665. transform: perspective(2000px) rotateX(0deg);
  666. opacity: 1;
  667. }
  668. 100% {
  669. -webkit-transform: perspective(2000px) rotateX(-90deg);
  670. transform: perspective(2000px) rotateX(-90deg);
  671. opacity: 0;
  672. }
  673. }
  674. @keyframes verticalFlipOut {
  675. 0% {
  676. -webkit-transform: perspective(2000px) rotateX(0deg);
  677. transform: perspective(2000px) rotateX(0deg);
  678. opacity: 1;
  679. }
  680. 100% {
  681. -webkit-transform: perspective(2000px) rotateX(-90deg);
  682. transform: perspective(2000px) rotateX(-90deg);
  683. opacity: 0;
  684. }
  685. }
  686. /*--------------
  687. Scale
  688. ---------------*/
  689. .scale.transition.in {
  690. -webkit-animation-name: scaleIn;
  691. animation-name: scaleIn;
  692. }
  693. .scale.transition.out {
  694. -webkit-animation-name: scaleOut;
  695. animation-name: scaleOut;
  696. }
  697. @-webkit-keyframes scaleIn {
  698. 0% {
  699. opacity: 0;
  700. -webkit-transform: scale(0.8);
  701. transform: scale(0.8);
  702. }
  703. 100% {
  704. opacity: 1;
  705. -webkit-transform: scale(1);
  706. transform: scale(1);
  707. }
  708. }
  709. @keyframes scaleIn {
  710. 0% {
  711. opacity: 0;
  712. -webkit-transform: scale(0.8);
  713. transform: scale(0.8);
  714. }
  715. 100% {
  716. opacity: 1;
  717. -webkit-transform: scale(1);
  718. transform: scale(1);
  719. }
  720. }
  721. /* Out */
  722. @-webkit-keyframes scaleOut {
  723. 0% {
  724. opacity: 1;
  725. -webkit-transform: scale(1);
  726. transform: scale(1);
  727. }
  728. 100% {
  729. opacity: 0;
  730. -webkit-transform: scale(0.9);
  731. transform: scale(0.9);
  732. }
  733. }
  734. @keyframes scaleOut {
  735. 0% {
  736. opacity: 1;
  737. -webkit-transform: scale(1);
  738. transform: scale(1);
  739. }
  740. 100% {
  741. opacity: 0;
  742. -webkit-transform: scale(0.9);
  743. transform: scale(0.9);
  744. }
  745. }
  746. /*--------------
  747. Fly
  748. ---------------*/
  749. /* Inward */
  750. .transition.fly {
  751. -webkit-animation-duration: 0.6s;
  752. animation-duration: 0.6s;
  753. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  754. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  755. }
  756. .transition.fly.in {
  757. -webkit-animation-name: flyIn;
  758. animation-name: flyIn;
  759. }
  760. .transition[class*="fly up"].in {
  761. -webkit-animation-name: flyInUp;
  762. animation-name: flyInUp;
  763. }
  764. .transition[class*="fly down"].in {
  765. -webkit-animation-name: flyInDown;
  766. animation-name: flyInDown;
  767. }
  768. .transition[class*="fly left"].in {
  769. -webkit-animation-name: flyInLeft;
  770. animation-name: flyInLeft;
  771. }
  772. .transition[class*="fly right"].in {
  773. -webkit-animation-name: flyInRight;
  774. animation-name: flyInRight;
  775. }
  776. /* Outward */
  777. .transition.fly.out {
  778. -webkit-animation-name: flyOut;
  779. animation-name: flyOut;
  780. }
  781. .transition[class*="fly up"].out {
  782. -webkit-animation-name: flyOutUp;
  783. animation-name: flyOutUp;
  784. }
  785. .transition[class*="fly down"].out {
  786. -webkit-animation-name: flyOutDown;
  787. animation-name: flyOutDown;
  788. }
  789. .transition[class*="fly left"].out {
  790. -webkit-animation-name: flyOutLeft;
  791. animation-name: flyOutLeft;
  792. }
  793. .transition[class*="fly right"].out {
  794. -webkit-animation-name: flyOutRight;
  795. animation-name: flyOutRight;
  796. }
  797. /* In */
  798. @-webkit-keyframes flyIn {
  799. 0% {
  800. opacity: 0;
  801. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  802. transform: scale3d(0.3, 0.3, 0.3);
  803. }
  804. 20% {
  805. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  806. transform: scale3d(1.1, 1.1, 1.1);
  807. }
  808. 40% {
  809. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  810. transform: scale3d(0.9, 0.9, 0.9);
  811. }
  812. 60% {
  813. opacity: 1;
  814. -webkit-transform: scale3d(1.03, 1.03, 1.03);
  815. transform: scale3d(1.03, 1.03, 1.03);
  816. }
  817. 80% {
  818. -webkit-transform: scale3d(0.97, 0.97, 0.97);
  819. transform: scale3d(0.97, 0.97, 0.97);
  820. }
  821. 100% {
  822. opacity: 1;
  823. -webkit-transform: scale3d(1, 1, 1);
  824. transform: scale3d(1, 1, 1);
  825. }
  826. }
  827. @keyframes flyIn {
  828. 0% {
  829. opacity: 0;
  830. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  831. transform: scale3d(0.3, 0.3, 0.3);
  832. }
  833. 20% {
  834. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  835. transform: scale3d(1.1, 1.1, 1.1);
  836. }
  837. 40% {
  838. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  839. transform: scale3d(0.9, 0.9, 0.9);
  840. }
  841. 60% {
  842. opacity: 1;
  843. -webkit-transform: scale3d(1.03, 1.03, 1.03);
  844. transform: scale3d(1.03, 1.03, 1.03);
  845. }
  846. 80% {
  847. -webkit-transform: scale3d(0.97, 0.97, 0.97);
  848. transform: scale3d(0.97, 0.97, 0.97);
  849. }
  850. 100% {
  851. opacity: 1;
  852. -webkit-transform: scale3d(1, 1, 1);
  853. transform: scale3d(1, 1, 1);
  854. }
  855. }
  856. @-webkit-keyframes flyInUp {
  857. 0% {
  858. opacity: 0;
  859. -webkit-transform: translate3d(0, 1500px, 0);
  860. transform: translate3d(0, 1500px, 0);
  861. }
  862. 60% {
  863. opacity: 1;
  864. -webkit-transform: translate3d(0, -20px, 0);
  865. transform: translate3d(0, -20px, 0);
  866. }
  867. 75% {
  868. -webkit-transform: translate3d(0, 10px, 0);
  869. transform: translate3d(0, 10px, 0);
  870. }
  871. 90% {
  872. -webkit-transform: translate3d(0, -5px, 0);
  873. transform: translate3d(0, -5px, 0);
  874. }
  875. 100% {
  876. -webkit-transform: translate3d(0, 0, 0);
  877. transform: translate3d(0, 0, 0);
  878. }
  879. }
  880. @keyframes flyInUp {
  881. 0% {
  882. opacity: 0;
  883. -webkit-transform: translate3d(0, 1500px, 0);
  884. transform: translate3d(0, 1500px, 0);
  885. }
  886. 60% {
  887. opacity: 1;
  888. -webkit-transform: translate3d(0, -20px, 0);
  889. transform: translate3d(0, -20px, 0);
  890. }
  891. 75% {
  892. -webkit-transform: translate3d(0, 10px, 0);
  893. transform: translate3d(0, 10px, 0);
  894. }
  895. 90% {
  896. -webkit-transform: translate3d(0, -5px, 0);
  897. transform: translate3d(0, -5px, 0);
  898. }
  899. 100% {
  900. -webkit-transform: translate3d(0, 0, 0);
  901. transform: translate3d(0, 0, 0);
  902. }
  903. }
  904. @-webkit-keyframes flyInDown {
  905. 0% {
  906. opacity: 0;
  907. -webkit-transform: translate3d(0, -1500px, 0);
  908. transform: translate3d(0, -1500px, 0);
  909. }
  910. 60% {
  911. opacity: 1;
  912. -webkit-transform: translate3d(0, 25px, 0);
  913. transform: translate3d(0, 25px, 0);
  914. }
  915. 75% {
  916. -webkit-transform: translate3d(0, -10px, 0);
  917. transform: translate3d(0, -10px, 0);
  918. }
  919. 90% {
  920. -webkit-transform: translate3d(0, 5px, 0);
  921. transform: translate3d(0, 5px, 0);
  922. }
  923. 100% {
  924. -webkit-transform: none;
  925. transform: none;
  926. }
  927. }
  928. @keyframes flyInDown {
  929. 0% {
  930. opacity: 0;
  931. -webkit-transform: translate3d(0, -1500px, 0);
  932. transform: translate3d(0, -1500px, 0);
  933. }
  934. 60% {
  935. opacity: 1;
  936. -webkit-transform: translate3d(0, 25px, 0);
  937. transform: translate3d(0, 25px, 0);
  938. }
  939. 75% {
  940. -webkit-transform: translate3d(0, -10px, 0);
  941. transform: translate3d(0, -10px, 0);
  942. }
  943. 90% {
  944. -webkit-transform: translate3d(0, 5px, 0);
  945. transform: translate3d(0, 5px, 0);
  946. }
  947. 100% {
  948. -webkit-transform: none;
  949. transform: none;
  950. }
  951. }
  952. @-webkit-keyframes flyInLeft {
  953. 0% {
  954. opacity: 0;
  955. -webkit-transform: translate3d(1500px, 0, 0);
  956. transform: translate3d(1500px, 0, 0);
  957. }
  958. 60% {
  959. opacity: 1;
  960. -webkit-transform: translate3d(-25px, 0, 0);
  961. transform: translate3d(-25px, 0, 0);
  962. }
  963. 75% {
  964. -webkit-transform: translate3d(10px, 0, 0);
  965. transform: translate3d(10px, 0, 0);
  966. }
  967. 90% {
  968. -webkit-transform: translate3d(-5px, 0, 0);
  969. transform: translate3d(-5px, 0, 0);
  970. }
  971. 100% {
  972. -webkit-transform: none;
  973. transform: none;
  974. }
  975. }
  976. @keyframes flyInLeft {
  977. 0% {
  978. opacity: 0;
  979. -webkit-transform: translate3d(1500px, 0, 0);
  980. transform: translate3d(1500px, 0, 0);
  981. }
  982. 60% {
  983. opacity: 1;
  984. -webkit-transform: translate3d(-25px, 0, 0);
  985. transform: translate3d(-25px, 0, 0);
  986. }
  987. 75% {
  988. -webkit-transform: translate3d(10px, 0, 0);
  989. transform: translate3d(10px, 0, 0);
  990. }
  991. 90% {
  992. -webkit-transform: translate3d(-5px, 0, 0);
  993. transform: translate3d(-5px, 0, 0);
  994. }
  995. 100% {
  996. -webkit-transform: none;
  997. transform: none;
  998. }
  999. }
  1000. @-webkit-keyframes flyInRight {
  1001. 0% {
  1002. opacity: 0;
  1003. -webkit-transform: translate3d(-1500px, 0, 0);
  1004. transform: translate3d(-1500px, 0, 0);
  1005. }
  1006. 60% {
  1007. opacity: 1;
  1008. -webkit-transform: translate3d(25px, 0, 0);
  1009. transform: translate3d(25px, 0, 0);
  1010. }
  1011. 75% {
  1012. -webkit-transform: translate3d(-10px, 0, 0);
  1013. transform: translate3d(-10px, 0, 0);
  1014. }
  1015. 90% {
  1016. -webkit-transform: translate3d(5px, 0, 0);
  1017. transform: translate3d(5px, 0, 0);
  1018. }
  1019. 100% {
  1020. -webkit-transform: none;
  1021. transform: none;
  1022. }
  1023. }
  1024. @keyframes flyInRight {
  1025. 0% {
  1026. opacity: 0;
  1027. -webkit-transform: translate3d(-1500px, 0, 0);
  1028. transform: translate3d(-1500px, 0, 0);
  1029. }
  1030. 60% {
  1031. opacity: 1;
  1032. -webkit-transform: translate3d(25px, 0, 0);
  1033. transform: translate3d(25px, 0, 0);
  1034. }
  1035. 75% {
  1036. -webkit-transform: translate3d(-10px, 0, 0);
  1037. transform: translate3d(-10px, 0, 0);
  1038. }
  1039. 90% {
  1040. -webkit-transform: translate3d(5px, 0, 0);
  1041. transform: translate3d(5px, 0, 0);
  1042. }
  1043. 100% {
  1044. -webkit-transform: none;
  1045. transform: none;
  1046. }
  1047. }
  1048. /* Out */
  1049. @-webkit-keyframes flyOut {
  1050. 20% {
  1051. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  1052. transform: scale3d(0.9, 0.9, 0.9);
  1053. }
  1054. 50%,
  1055. 55% {
  1056. opacity: 1;
  1057. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  1058. transform: scale3d(1.1, 1.1, 1.1);
  1059. }
  1060. 100% {
  1061. opacity: 0;
  1062. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  1063. transform: scale3d(0.3, 0.3, 0.3);
  1064. }
  1065. }
  1066. @keyframes flyOut {
  1067. 20% {
  1068. -webkit-transform: scale3d(0.9, 0.9, 0.9);
  1069. transform: scale3d(0.9, 0.9, 0.9);
  1070. }
  1071. 50%,
  1072. 55% {
  1073. opacity: 1;
  1074. -webkit-transform: scale3d(1.1, 1.1, 1.1);
  1075. transform: scale3d(1.1, 1.1, 1.1);
  1076. }
  1077. 100% {
  1078. opacity: 0;
  1079. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  1080. transform: scale3d(0.3, 0.3, 0.3);
  1081. }
  1082. }
  1083. @-webkit-keyframes flyOutUp {
  1084. 20% {
  1085. -webkit-transform: translate3d(0, 10px, 0);
  1086. transform: translate3d(0, 10px, 0);
  1087. }
  1088. 40%,
  1089. 45% {
  1090. opacity: 1;
  1091. -webkit-transform: translate3d(0, -20px, 0);
  1092. transform: translate3d(0, -20px, 0);
  1093. }
  1094. 100% {
  1095. opacity: 0;
  1096. -webkit-transform: translate3d(0, 2000px, 0);
  1097. transform: translate3d(0, 2000px, 0);
  1098. }
  1099. }
  1100. @keyframes flyOutUp {
  1101. 20% {
  1102. -webkit-transform: translate3d(0, 10px, 0);
  1103. transform: translate3d(0, 10px, 0);
  1104. }
  1105. 40%,
  1106. 45% {
  1107. opacity: 1;
  1108. -webkit-transform: translate3d(0, -20px, 0);
  1109. transform: translate3d(0, -20px, 0);
  1110. }
  1111. 100% {
  1112. opacity: 0;
  1113. -webkit-transform: translate3d(0, 2000px, 0);
  1114. transform: translate3d(0, 2000px, 0);
  1115. }
  1116. }
  1117. @-webkit-keyframes flyOutDown {
  1118. 20% {
  1119. -webkit-transform: translate3d(0, -10px, 0);
  1120. transform: translate3d(0, -10px, 0);
  1121. }
  1122. 40%,
  1123. 45% {
  1124. opacity: 1;
  1125. -webkit-transform: translate3d(0, 20px, 0);
  1126. transform: translate3d(0, 20px, 0);
  1127. }
  1128. 100% {
  1129. opacity: 0;
  1130. -webkit-transform: translate3d(0, -2000px, 0);
  1131. transform: translate3d(0, -2000px, 0);
  1132. }
  1133. }
  1134. @keyframes flyOutDown {
  1135. 20% {
  1136. -webkit-transform: translate3d(0, -10px, 0);
  1137. transform: translate3d(0, -10px, 0);
  1138. }
  1139. 40%,
  1140. 45% {
  1141. opacity: 1;
  1142. -webkit-transform: translate3d(0, 20px, 0);
  1143. transform: translate3d(0, 20px, 0);
  1144. }
  1145. 100% {
  1146. opacity: 0;
  1147. -webkit-transform: translate3d(0, -2000px, 0);
  1148. transform: translate3d(0, -2000px, 0);
  1149. }
  1150. }
  1151. @-webkit-keyframes flyOutRight {
  1152. 20% {
  1153. opacity: 1;
  1154. -webkit-transform: translate3d(20px, 0, 0);
  1155. transform: translate3d(20px, 0, 0);
  1156. }
  1157. 100% {
  1158. opacity: 0;
  1159. -webkit-transform: translate3d(-2000px, 0, 0);
  1160. transform: translate3d(-2000px, 0, 0);
  1161. }
  1162. }
  1163. @keyframes flyOutRight {
  1164. 20% {
  1165. opacity: 1;
  1166. -webkit-transform: translate3d(20px, 0, 0);
  1167. transform: translate3d(20px, 0, 0);
  1168. }
  1169. 100% {
  1170. opacity: 0;
  1171. -webkit-transform: translate3d(-2000px, 0, 0);
  1172. transform: translate3d(-2000px, 0, 0);
  1173. }
  1174. }
  1175. @-webkit-keyframes flyOutLeft {
  1176. 20% {
  1177. opacity: 1;
  1178. -webkit-transform: translate3d(-20px, 0, 0);
  1179. transform: translate3d(-20px, 0, 0);
  1180. }
  1181. 100% {
  1182. opacity: 0;
  1183. -webkit-transform: translate3d(2000px, 0, 0);
  1184. transform: translate3d(2000px, 0, 0);
  1185. }
  1186. }
  1187. @keyframes flyOutLeft {
  1188. 20% {
  1189. opacity: 1;
  1190. -webkit-transform: translate3d(-20px, 0, 0);
  1191. transform: translate3d(-20px, 0, 0);
  1192. }
  1193. 100% {
  1194. opacity: 0;
  1195. -webkit-transform: translate3d(2000px, 0, 0);
  1196. transform: translate3d(2000px, 0, 0);
  1197. }
  1198. }
  1199. /*--------------
  1200. Slide
  1201. ---------------*/
  1202. .transition.slide.in,
  1203. .transition[class*="slide down"].in {
  1204. -webkit-animation-name: slideInY;
  1205. animation-name: slideInY;
  1206. -webkit-transform-origin: top center;
  1207. -ms-transform-origin: top center;
  1208. transform-origin: top center;
  1209. }
  1210. .transition[class*="slide up"].in {
  1211. -webkit-animation-name: slideInY;
  1212. animation-name: slideInY;
  1213. -webkit-transform-origin: bottom center;
  1214. -ms-transform-origin: bottom center;
  1215. transform-origin: bottom center;
  1216. }
  1217. .transition[class*="slide left"].in {
  1218. -webkit-animation-name: slideInX;
  1219. animation-name: slideInX;
  1220. -webkit-transform-origin: center right;
  1221. -ms-transform-origin: center right;
  1222. transform-origin: center right;
  1223. }
  1224. .transition[class*="slide right"].in {
  1225. -webkit-animation-name: slideInX;
  1226. animation-name: slideInX;
  1227. -webkit-transform-origin: center left;
  1228. -ms-transform-origin: center left;
  1229. transform-origin: center left;
  1230. }
  1231. .transition.slide.out,
  1232. .transition[class*="slide down"].out {
  1233. -webkit-animation-name: slideOutY;
  1234. animation-name: slideOutY;
  1235. -webkit-transform-origin: top center;
  1236. -ms-transform-origin: top center;
  1237. transform-origin: top center;
  1238. }
  1239. .transition[class*="slide up"].out {
  1240. -webkit-animation-name: slideOutY;
  1241. animation-name: slideOutY;
  1242. -webkit-transform-origin: bottom center;
  1243. -ms-transform-origin: bottom center;
  1244. transform-origin: bottom center;
  1245. }
  1246. .transition[class*="slide left"].out {
  1247. -webkit-animation-name: slideOutX;
  1248. animation-name: slideOutX;
  1249. -webkit-transform-origin: center right;
  1250. -ms-transform-origin: center right;
  1251. transform-origin: center right;
  1252. }
  1253. .transition[class*="slide right"].out {
  1254. -webkit-animation-name: slideOutX;
  1255. animation-name: slideOutX;
  1256. -webkit-transform-origin: center left;
  1257. -ms-transform-origin: center left;
  1258. transform-origin: center left;
  1259. }
  1260. /* In */
  1261. @-webkit-keyframes slideInY {
  1262. 0% {
  1263. opacity: 0;
  1264. -webkit-transform: scaleY(0);
  1265. transform: scaleY(0);
  1266. }
  1267. 100% {
  1268. opacity: 1;
  1269. -webkit-transform: scaleY(1);
  1270. transform: scaleY(1);
  1271. }
  1272. }
  1273. @keyframes slideInY {
  1274. 0% {
  1275. opacity: 0;
  1276. -webkit-transform: scaleY(0);
  1277. transform: scaleY(0);
  1278. }
  1279. 100% {
  1280. opacity: 1;
  1281. -webkit-transform: scaleY(1);
  1282. transform: scaleY(1);
  1283. }
  1284. }
  1285. @-webkit-keyframes slideInX {
  1286. 0% {
  1287. opacity: 0;
  1288. -webkit-transform: scaleX(0);
  1289. transform: scaleX(0);
  1290. }
  1291. 100% {
  1292. opacity: 1;
  1293. -webkit-transform: scaleX(1);
  1294. transform: scaleX(1);
  1295. }
  1296. }
  1297. @keyframes slideInX {
  1298. 0% {
  1299. opacity: 0;
  1300. -webkit-transform: scaleX(0);
  1301. transform: scaleX(0);
  1302. }
  1303. 100% {
  1304. opacity: 1;
  1305. -webkit-transform: scaleX(1);
  1306. transform: scaleX(1);
  1307. }
  1308. }
  1309. /* Out */
  1310. @-webkit-keyframes slideOutY {
  1311. 0% {
  1312. opacity: 1;
  1313. -webkit-transform: scaleY(1);
  1314. transform: scaleY(1);
  1315. }
  1316. 100% {
  1317. opacity: 0;
  1318. -webkit-transform: scaleY(0);
  1319. transform: scaleY(0);
  1320. }
  1321. }
  1322. @keyframes slideOutY {
  1323. 0% {
  1324. opacity: 1;
  1325. -webkit-transform: scaleY(1);
  1326. transform: scaleY(1);
  1327. }
  1328. 100% {
  1329. opacity: 0;
  1330. -webkit-transform: scaleY(0);
  1331. transform: scaleY(0);
  1332. }
  1333. }
  1334. @-webkit-keyframes slideOutX {
  1335. 0% {
  1336. opacity: 1;
  1337. -webkit-transform: scaleX(1);
  1338. transform: scaleX(1);
  1339. }
  1340. 100% {
  1341. opacity: 0;
  1342. -webkit-transform: scaleX(0);
  1343. transform: scaleX(0);
  1344. }
  1345. }
  1346. @keyframes slideOutX {
  1347. 0% {
  1348. opacity: 1;
  1349. -webkit-transform: scaleX(1);
  1350. transform: scaleX(1);
  1351. }
  1352. 100% {
  1353. opacity: 0;
  1354. -webkit-transform: scaleX(0);
  1355. transform: scaleX(0);
  1356. }
  1357. }
  1358. /*--------------
  1359. Swing
  1360. ---------------*/
  1361. .transition.swing {
  1362. -webkit-animation-duration: 800ms;
  1363. animation-duration: 800ms;
  1364. }
  1365. .transition[class*="swing down"].in {
  1366. -webkit-animation-name: swingInX;
  1367. animation-name: swingInX;
  1368. -webkit-transform-origin: top center;
  1369. -ms-transform-origin: top center;
  1370. transform-origin: top center;
  1371. }
  1372. .transition[class*="swing up"].in {
  1373. -webkit-animation-name: swingInX;
  1374. animation-name: swingInX;
  1375. -webkit-transform-origin: bottom center;
  1376. -ms-transform-origin: bottom center;
  1377. transform-origin: bottom center;
  1378. }
  1379. .transition[class*="swing left"].in {
  1380. -webkit-animation-name: swingInY;
  1381. animation-name: swingInY;
  1382. -webkit-transform-origin: center right;
  1383. -ms-transform-origin: center right;
  1384. transform-origin: center right;
  1385. }
  1386. .transition[class*="swing right"].in {
  1387. -webkit-animation-name: swingInY;
  1388. animation-name: swingInY;
  1389. -webkit-transform-origin: center left;
  1390. -ms-transform-origin: center left;
  1391. transform-origin: center left;
  1392. }
  1393. .transition.swing.out,
  1394. .transition[class*="swing down"].out {
  1395. -webkit-animation-name: swingOutX;
  1396. animation-name: swingOutX;
  1397. -webkit-transform-origin: top center;
  1398. -ms-transform-origin: top center;
  1399. transform-origin: top center;
  1400. }
  1401. .transition[class*="swing up"].out {
  1402. -webkit-animation-name: swingOutX;
  1403. animation-name: swingOutX;
  1404. -webkit-transform-origin: bottom center;
  1405. -ms-transform-origin: bottom center;
  1406. transform-origin: bottom center;
  1407. }
  1408. .transition[class*="swing left"].out {
  1409. -webkit-animation-name: swingOutY;
  1410. animation-name: swingOutY;
  1411. -webkit-transform-origin: center right;
  1412. -ms-transform-origin: center right;
  1413. transform-origin: center right;
  1414. }
  1415. .transition[class*="swing right"].out {
  1416. -webkit-animation-name: swingOutY;
  1417. animation-name: swingOutY;
  1418. -webkit-transform-origin: center left;
  1419. -ms-transform-origin: center left;
  1420. transform-origin: center left;
  1421. }
  1422. /* In */
  1423. @-webkit-keyframes swingInX {
  1424. 0% {
  1425. -webkit-transform: perspective(1000px) rotateX(90deg);
  1426. transform: perspective(1000px) rotateX(90deg);
  1427. opacity: 0;
  1428. }
  1429. 40% {
  1430. -webkit-transform: perspective(1000px) rotateX(-30deg);
  1431. transform: perspective(1000px) rotateX(-30deg);
  1432. opacity: 1;
  1433. }
  1434. 60% {
  1435. -webkit-transform: perspective(1000px) rotateX(15deg);
  1436. transform: perspective(1000px) rotateX(15deg);
  1437. }
  1438. 80% {
  1439. -webkit-transform: perspective(1000px) rotateX(-7.5deg);
  1440. transform: perspective(1000px) rotateX(-7.5deg);
  1441. }
  1442. 100% {
  1443. -webkit-transform: perspective(1000px) rotateX(0deg);
  1444. transform: perspective(1000px) rotateX(0deg);
  1445. }
  1446. }
  1447. @keyframes swingInX {
  1448. 0% {
  1449. -webkit-transform: perspective(1000px) rotateX(90deg);
  1450. transform: perspective(1000px) rotateX(90deg);
  1451. opacity: 0;
  1452. }
  1453. 40% {
  1454. -webkit-transform: perspective(1000px) rotateX(-30deg);
  1455. transform: perspective(1000px) rotateX(-30deg);
  1456. opacity: 1;
  1457. }
  1458. 60% {
  1459. -webkit-transform: perspective(1000px) rotateX(15deg);
  1460. transform: perspective(1000px) rotateX(15deg);
  1461. }
  1462. 80% {
  1463. -webkit-transform: perspective(1000px) rotateX(-7.5deg);
  1464. transform: perspective(1000px) rotateX(-7.5deg);
  1465. }
  1466. 100% {
  1467. -webkit-transform: perspective(1000px) rotateX(0deg);
  1468. transform: perspective(1000px) rotateX(0deg);
  1469. }
  1470. }
  1471. @-webkit-keyframes swingInY {
  1472. 0% {
  1473. -webkit-transform: perspective(1000px) rotateY(-90deg);
  1474. transform: perspective(1000px) rotateY(-90deg);
  1475. opacity: 0;
  1476. }
  1477. 40% {
  1478. -webkit-transform: perspective(1000px) rotateY(30deg);
  1479. transform: perspective(1000px) rotateY(30deg);
  1480. opacity: 1;
  1481. }
  1482. 60% {
  1483. -webkit-transform: perspective(1000px) rotateY(-17.5deg);
  1484. transform: perspective(1000px) rotateY(-17.5deg);
  1485. }
  1486. 80% {
  1487. -webkit-transform: perspective(1000px) rotateY(7.5deg);
  1488. transform: perspective(1000px) rotateY(7.5deg);
  1489. }
  1490. 100% {
  1491. -webkit-transform: perspective(1000px) rotateY(0deg);
  1492. transform: perspective(1000px) rotateY(0deg);
  1493. }
  1494. }
  1495. @keyframes swingInY {
  1496. 0% {
  1497. -webkit-transform: perspective(1000px) rotateY(-90deg);
  1498. transform: perspective(1000px) rotateY(-90deg);
  1499. opacity: 0;
  1500. }
  1501. 40% {
  1502. -webkit-transform: perspective(1000px) rotateY(30deg);
  1503. transform: perspective(1000px) rotateY(30deg);
  1504. opacity: 1;
  1505. }
  1506. 60% {
  1507. -webkit-transform: perspective(1000px) rotateY(-17.5deg);
  1508. transform: perspective(1000px) rotateY(-17.5deg);
  1509. }
  1510. 80% {
  1511. -webkit-transform: perspective(1000px) rotateY(7.5deg);
  1512. transform: perspective(1000px) rotateY(7.5deg);
  1513. }
  1514. 100% {
  1515. -webkit-transform: perspective(1000px) rotateY(0deg);
  1516. transform: perspective(1000px) rotateY(0deg);
  1517. }
  1518. }
  1519. /* Out */
  1520. @-webkit-keyframes swingOutX {
  1521. 0% {
  1522. -webkit-transform: perspective(1000px) rotateX(0deg);
  1523. transform: perspective(1000px) rotateX(0deg);
  1524. }
  1525. 40% {
  1526. -webkit-transform: perspective(1000px) rotateX(-7.5deg);
  1527. transform: perspective(1000px) rotateX(-7.5deg);
  1528. }
  1529. 60% {
  1530. -webkit-transform: perspective(1000px) rotateX(17.5deg);
  1531. transform: perspective(1000px) rotateX(17.5deg);
  1532. }
  1533. 80% {
  1534. -webkit-transform: perspective(1000px) rotateX(-30deg);
  1535. transform: perspective(1000px) rotateX(-30deg);
  1536. opacity: 1;
  1537. }
  1538. 100% {
  1539. -webkit-transform: perspective(1000px) rotateX(90deg);
  1540. transform: perspective(1000px) rotateX(90deg);
  1541. opacity: 0;
  1542. }
  1543. }
  1544. @keyframes swingOutX {
  1545. 0% {
  1546. -webkit-transform: perspective(1000px) rotateX(0deg);
  1547. transform: perspective(1000px) rotateX(0deg);
  1548. }
  1549. 40% {
  1550. -webkit-transform: perspective(1000px) rotateX(-7.5deg);
  1551. transform: perspective(1000px) rotateX(-7.5deg);
  1552. }
  1553. 60% {
  1554. -webkit-transform: perspective(1000px) rotateX(17.5deg);
  1555. transform: perspective(1000px) rotateX(17.5deg);
  1556. }
  1557. 80% {
  1558. -webkit-transform: perspective(1000px) rotateX(-30deg);
  1559. transform: perspective(1000px) rotateX(-30deg);
  1560. opacity: 1;
  1561. }
  1562. 100% {
  1563. -webkit-transform: perspective(1000px) rotateX(90deg);
  1564. transform: perspective(1000px) rotateX(90deg);
  1565. opacity: 0;
  1566. }
  1567. }
  1568. @-webkit-keyframes swingOutY {
  1569. 0% {
  1570. -webkit-transform: perspective(1000px) rotateY(0deg);
  1571. transform: perspective(1000px) rotateY(0deg);
  1572. }
  1573. 40% {
  1574. -webkit-transform: perspective(1000px) rotateY(7.5deg);
  1575. transform: perspective(1000px) rotateY(7.5deg);
  1576. }
  1577. 60% {
  1578. -webkit-transform: perspective(1000px) rotateY(-10deg);
  1579. transform: perspective(1000px) rotateY(-10deg);
  1580. }
  1581. 80% {
  1582. -webkit-transform: perspective(1000px) rotateY(30deg);
  1583. transform: perspective(1000px) rotateY(30deg);
  1584. opacity: 1;
  1585. }
  1586. 100% {
  1587. -webkit-transform: perspective(1000px) rotateY(-90deg);
  1588. transform: perspective(1000px) rotateY(-90deg);
  1589. opacity: 0;
  1590. }
  1591. }
  1592. @keyframes swingOutY {
  1593. 0% {
  1594. -webkit-transform: perspective(1000px) rotateY(0deg);
  1595. transform: perspective(1000px) rotateY(0deg);
  1596. }
  1597. 40% {
  1598. -webkit-transform: perspective(1000px) rotateY(7.5deg);
  1599. transform: perspective(1000px) rotateY(7.5deg);
  1600. }
  1601. 60% {
  1602. -webkit-transform: perspective(1000px) rotateY(-10deg);
  1603. transform: perspective(1000px) rotateY(-10deg);
  1604. }
  1605. 80% {
  1606. -webkit-transform: perspective(1000px) rotateY(30deg);
  1607. transform: perspective(1000px) rotateY(30deg);
  1608. opacity: 1;
  1609. }
  1610. 100% {
  1611. -webkit-transform: perspective(1000px) rotateY(-90deg);
  1612. transform: perspective(1000px) rotateY(-90deg);
  1613. opacity: 0;
  1614. }
  1615. }
  1616. /*******************************
  1617. Static Animations
  1618. *******************************/
  1619. /*--------------
  1620. Emphasis
  1621. ---------------*/
  1622. .flash.transition {
  1623. -webkit-animation-duration: 750ms;
  1624. animation-duration: 750ms;
  1625. -webkit-animation-name: flash;
  1626. animation-name: flash;
  1627. }
  1628. .shake.transition {
  1629. -webkit-animation-duration: 750ms;
  1630. animation-duration: 750ms;
  1631. -webkit-animation-name: shake;
  1632. animation-name: shake;
  1633. }
  1634. .bounce.transition {
  1635. -webkit-animation-duration: 750ms;
  1636. animation-duration: 750ms;
  1637. -webkit-animation-name: bounce;
  1638. animation-name: bounce;
  1639. }
  1640. .tada.transition {
  1641. -webkit-animation-duration: 750ms;
  1642. animation-duration: 750ms;
  1643. -webkit-animation-name: tada;
  1644. animation-name: tada;
  1645. }
  1646. .pulse.transition {
  1647. -webkit-animation-duration: 500ms;
  1648. animation-duration: 500ms;
  1649. -webkit-animation-name: pulse;
  1650. animation-name: pulse;
  1651. }
  1652. .jiggle.transition {
  1653. -webkit-animation-duration: 750ms;
  1654. animation-duration: 750ms;
  1655. -webkit-animation-name: jiggle;
  1656. animation-name: jiggle;
  1657. }
  1658. /* Flash */
  1659. @-webkit-keyframes flash {
  1660. 0%,
  1661. 50%,
  1662. 100% {
  1663. opacity: 1;
  1664. }
  1665. 25%,
  1666. 75% {
  1667. opacity: 0;
  1668. }
  1669. }
  1670. @keyframes flash {
  1671. 0%,
  1672. 50%,
  1673. 100% {
  1674. opacity: 1;
  1675. }
  1676. 25%,
  1677. 75% {
  1678. opacity: 0;
  1679. }
  1680. }
  1681. /* Shake */
  1682. @-webkit-keyframes shake {
  1683. 0%,
  1684. 100% {
  1685. -webkit-transform: translateX(0);
  1686. transform: translateX(0);
  1687. }
  1688. 10%,
  1689. 30%,
  1690. 50%,
  1691. 70%,
  1692. 90% {
  1693. -webkit-transform: translateX(-10px);
  1694. transform: translateX(-10px);
  1695. }
  1696. 20%,
  1697. 40%,
  1698. 60%,
  1699. 80% {
  1700. -webkit-transform: translateX(10px);
  1701. transform: translateX(10px);
  1702. }
  1703. }
  1704. @keyframes shake {
  1705. 0%,
  1706. 100% {
  1707. -webkit-transform: translateX(0);
  1708. transform: translateX(0);
  1709. }
  1710. 10%,
  1711. 30%,
  1712. 50%,
  1713. 70%,
  1714. 90% {
  1715. -webkit-transform: translateX(-10px);
  1716. transform: translateX(-10px);
  1717. }
  1718. 20%,
  1719. 40%,
  1720. 60%,
  1721. 80% {
  1722. -webkit-transform: translateX(10px);
  1723. transform: translateX(10px);
  1724. }
  1725. }
  1726. /* Bounce */
  1727. @-webkit-keyframes bounce {
  1728. 0%,
  1729. 20%,
  1730. 50%,
  1731. 80%,
  1732. 100% {
  1733. -webkit-transform: translateY(0);
  1734. transform: translateY(0);
  1735. }
  1736. 40% {
  1737. -webkit-transform: translateY(-30px);
  1738. transform: translateY(-30px);
  1739. }
  1740. 60% {
  1741. -webkit-transform: translateY(-15px);
  1742. transform: translateY(-15px);
  1743. }
  1744. }
  1745. @keyframes bounce {
  1746. 0%,
  1747. 20%,
  1748. 50%,
  1749. 80%,
  1750. 100% {
  1751. -webkit-transform: translateY(0);
  1752. transform: translateY(0);
  1753. }
  1754. 40% {
  1755. -webkit-transform: translateY(-30px);
  1756. transform: translateY(-30px);
  1757. }
  1758. 60% {
  1759. -webkit-transform: translateY(-15px);
  1760. transform: translateY(-15px);
  1761. }
  1762. }
  1763. /* Tada */
  1764. @-webkit-keyframes tada {
  1765. 0% {
  1766. -webkit-transform: scale(1);
  1767. transform: scale(1);
  1768. }
  1769. 10%,
  1770. 20% {
  1771. -webkit-transform: scale(0.9) rotate(-3deg);
  1772. transform: scale(0.9) rotate(-3deg);
  1773. }
  1774. 30%,
  1775. 50%,
  1776. 70%,
  1777. 90% {
  1778. -webkit-transform: scale(1.1) rotate(3deg);
  1779. transform: scale(1.1) rotate(3deg);
  1780. }
  1781. 40%,
  1782. 60%,
  1783. 80% {
  1784. -webkit-transform: scale(1.1) rotate(-3deg);
  1785. transform: scale(1.1) rotate(-3deg);
  1786. }
  1787. 100% {
  1788. -webkit-transform: scale(1) rotate(0);
  1789. transform: scale(1) rotate(0);
  1790. }
  1791. }
  1792. @keyframes tada {
  1793. 0% {
  1794. -webkit-transform: scale(1);
  1795. transform: scale(1);
  1796. }
  1797. 10%,
  1798. 20% {
  1799. -webkit-transform: scale(0.9) rotate(-3deg);
  1800. transform: scale(0.9) rotate(-3deg);
  1801. }
  1802. 30%,
  1803. 50%,
  1804. 70%,
  1805. 90% {
  1806. -webkit-transform: scale(1.1) rotate(3deg);
  1807. transform: scale(1.1) rotate(3deg);
  1808. }
  1809. 40%,
  1810. 60%,
  1811. 80% {
  1812. -webkit-transform: scale(1.1) rotate(-3deg);
  1813. transform: scale(1.1) rotate(-3deg);
  1814. }
  1815. 100% {
  1816. -webkit-transform: scale(1) rotate(0);
  1817. transform: scale(1) rotate(0);
  1818. }
  1819. }
  1820. /* Pulse */
  1821. @-webkit-keyframes pulse {
  1822. 0% {
  1823. -webkit-transform: scale(1);
  1824. transform: scale(1);
  1825. opacity: 1;
  1826. }
  1827. 50% {
  1828. -webkit-transform: scale(0.9);
  1829. transform: scale(0.9);
  1830. opacity: 0.7;
  1831. }
  1832. 100% {
  1833. -webkit-transform: scale(1);
  1834. transform: scale(1);
  1835. opacity: 1;
  1836. }
  1837. }
  1838. @keyframes pulse {
  1839. 0% {
  1840. -webkit-transform: scale(1);
  1841. transform: scale(1);
  1842. opacity: 1;
  1843. }
  1844. 50% {
  1845. -webkit-transform: scale(0.9);
  1846. transform: scale(0.9);
  1847. opacity: 0.7;
  1848. }
  1849. 100% {
  1850. -webkit-transform: scale(1);
  1851. transform: scale(1);
  1852. opacity: 1;
  1853. }
  1854. }
  1855. /* Rubberband */
  1856. @-webkit-keyframes jiggle {
  1857. 0% {
  1858. -webkit-transform: scale3d(1, 1, 1);
  1859. transform: scale3d(1, 1, 1);
  1860. }
  1861. 30% {
  1862. -webkit-transform: scale3d(1.25, 0.75, 1);
  1863. transform: scale3d(1.25, 0.75, 1);
  1864. }
  1865. 40% {
  1866. -webkit-transform: scale3d(0.75, 1.25, 1);
  1867. transform: scale3d(0.75, 1.25, 1);
  1868. }
  1869. 50% {
  1870. -webkit-transform: scale3d(1.15, 0.85, 1);
  1871. transform: scale3d(1.15, 0.85, 1);
  1872. }
  1873. 65% {
  1874. -webkit-transform: scale3d(0.95, 1.05, 1);
  1875. transform: scale3d(0.95, 1.05, 1);
  1876. }
  1877. 75% {
  1878. -webkit-transform: scale3d(1.05, 0.95, 1);
  1879. transform: scale3d(1.05, 0.95, 1);
  1880. }
  1881. 100% {
  1882. -webkit-transform: scale3d(1, 1, 1);
  1883. transform: scale3d(1, 1, 1);
  1884. }
  1885. }
  1886. @keyframes jiggle {
  1887. 0% {
  1888. -webkit-transform: scale3d(1, 1, 1);
  1889. transform: scale3d(1, 1, 1);
  1890. }
  1891. 30% {
  1892. -webkit-transform: scale3d(1.25, 0.75, 1);
  1893. transform: scale3d(1.25, 0.75, 1);
  1894. }
  1895. 40% {
  1896. -webkit-transform: scale3d(0.75, 1.25, 1);
  1897. transform: scale3d(0.75, 1.25, 1);
  1898. }
  1899. 50% {
  1900. -webkit-transform: scale3d(1.15, 0.85, 1);
  1901. transform: scale3d(1.15, 0.85, 1);
  1902. }
  1903. 65% {
  1904. -webkit-transform: scale3d(0.95, 1.05, 1);
  1905. transform: scale3d(0.95, 1.05, 1);
  1906. }
  1907. 75% {
  1908. -webkit-transform: scale3d(1.05, 0.95, 1);
  1909. transform: scale3d(1.05, 0.95, 1);
  1910. }
  1911. 100% {
  1912. -webkit-transform: scale3d(1, 1, 1);
  1913. transform: scale3d(1, 1, 1);
  1914. }
  1915. }
  1916. /*******************************
  1917. Site Overrides
  1918. *******************************/