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.

995 lines
20 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic UI
  3. * https://github.com/Semantic-Org/Semantic-UI
  4. * http://beta.semantic-ui.com/
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Transitions
  13. *******************************/
  14. /*
  15. Some transitions adapted from Animate CSS
  16. https://github.com/daneden/animate.css
  17. */
  18. .transition {
  19. -webkit-animation-iteration-count: 1;
  20. animation-iteration-count: 1;
  21. -webkit-animation-duration: 500ms;
  22. animation-duration: 500ms;
  23. -webkit-animation-timing-function: ease;
  24. animation-timing-function: ease;
  25. -webkit-animation-fill-mode: both;
  26. animation-fill-mode: both;
  27. }
  28. /*******************************
  29. States
  30. *******************************/
  31. /* Animating */
  32. .animating.transition {
  33. -webkit-backface-visibility: hidden;
  34. backface-visibility: hidden;
  35. -webkit-transform: translateZ(0);
  36. transform: translateZ(0);
  37. visibility: visible !important;
  38. }
  39. /* Loading */
  40. .loading.transition {
  41. position: absolute;
  42. top: -999999px;
  43. left: -99999px;
  44. }
  45. /* Hidden */
  46. .hidden.transition {
  47. display: none;
  48. visibility: hidden;
  49. }
  50. /* Visible */
  51. .visible.transition {
  52. display: block !important;
  53. visibility: visible !important;
  54. -webkit-backface-visibility: hidden;
  55. backface-visibility: hidden;
  56. -webkit-transform: translateZ(0);
  57. transform: translateZ(0);
  58. }
  59. /* Disabled */
  60. .disabled.transition {
  61. -webkit-animation-play-state: paused;
  62. animation-play-state: paused;
  63. }
  64. /*******************************
  65. Variations
  66. *******************************/
  67. .looping.transition {
  68. -webkit-animation-iteration-count: infinite;
  69. animation-iteration-count: infinite;
  70. }
  71. /*******************************
  72. Types
  73. *******************************/
  74. /*******************************
  75. Animations
  76. *******************************/
  77. /*--------------
  78. Emphasis
  79. ---------------*/
  80. .flash.transition {
  81. -webkit-animation-name: flash;
  82. animation-name: flash;
  83. }
  84. .shake.transition {
  85. -webkit-animation-name: shake;
  86. animation-name: shake;
  87. }
  88. .bounce.transition {
  89. -webkit-animation-name: bounce;
  90. animation-name: bounce;
  91. }
  92. .tada.transition {
  93. -webkit-animation-name: tada;
  94. animation-name: tada;
  95. }
  96. /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  97. .pulse.transition {
  98. -webkit-animation-name: pulse;
  99. animation-name: pulse;
  100. }
  101. /* Flash */
  102. @-webkit-keyframes flash {
  103. 0%,
  104. 50%,
  105. 100% {
  106. opacity: 1;
  107. }
  108. 25%,
  109. 75% {
  110. opacity: 0;
  111. }
  112. }
  113. @keyframes flash {
  114. 0%,
  115. 50%,
  116. 100% {
  117. opacity: 1;
  118. }
  119. 25%,
  120. 75% {
  121. opacity: 0;
  122. }
  123. }
  124. /* Shake */
  125. @-webkit-keyframes shake {
  126. 0%,
  127. 100% {
  128. -webkit-transform: translateX(0);
  129. transform: translateX(0);
  130. }
  131. 10%,
  132. 30%,
  133. 50%,
  134. 70%,
  135. 90% {
  136. -webkit-transform: translateX(-10px);
  137. transform: translateX(-10px);
  138. }
  139. 20%,
  140. 40%,
  141. 60%,
  142. 80% {
  143. -webkit-transform: translateX(10px);
  144. transform: translateX(10px);
  145. }
  146. }
  147. @keyframes shake {
  148. 0%,
  149. 100% {
  150. -webkit-transform: translateX(0);
  151. transform: translateX(0);
  152. }
  153. 10%,
  154. 30%,
  155. 50%,
  156. 70%,
  157. 90% {
  158. -webkit-transform: translateX(-10px);
  159. transform: translateX(-10px);
  160. }
  161. 20%,
  162. 40%,
  163. 60%,
  164. 80% {
  165. -webkit-transform: translateX(10px);
  166. transform: translateX(10px);
  167. }
  168. }
  169. /* Bounce */
  170. @-webkit-keyframes bounce {
  171. 0%,
  172. 20%,
  173. 50%,
  174. 80%,
  175. 100% {
  176. -webkit-transform: translateY(0);
  177. transform: translateY(0);
  178. }
  179. 40% {
  180. -webkit-transform: translateY(-30px);
  181. transform: translateY(-30px);
  182. }
  183. 60% {
  184. -webkit-transform: translateY(-15px);
  185. transform: translateY(-15px);
  186. }
  187. }
  188. @keyframes bounce {
  189. 0%,
  190. 20%,
  191. 50%,
  192. 80%,
  193. 100% {
  194. -webkit-transform: translateY(0);
  195. transform: translateY(0);
  196. }
  197. 40% {
  198. -webkit-transform: translateY(-30px);
  199. transform: translateY(-30px);
  200. }
  201. 60% {
  202. -webkit-transform: translateY(-15px);
  203. transform: translateY(-15px);
  204. }
  205. }
  206. /* Tada */
  207. @-webkit-keyframes tada {
  208. 0% {
  209. -webkit-transform: scale(1);
  210. transform: scale(1);
  211. }
  212. 10%,
  213. 20% {
  214. -webkit-transform: scale(0.9) rotate(-3deg);
  215. transform: scale(0.9) rotate(-3deg);
  216. }
  217. 30%,
  218. 50%,
  219. 70%,
  220. 90% {
  221. -webkit-transform: scale(1.1) rotate(3deg);
  222. transform: scale(1.1) rotate(3deg);
  223. }
  224. 40%,
  225. 60%,
  226. 80% {
  227. -webkit-transform: scale(1.1) rotate(-3deg);
  228. transform: scale(1.1) rotate(-3deg);
  229. }
  230. 100% {
  231. -webkit-transform: scale(1) rotate(0);
  232. transform: scale(1) rotate(0);
  233. }
  234. }
  235. @keyframes tada {
  236. 0% {
  237. -webkit-transform: scale(1);
  238. transform: scale(1);
  239. }
  240. 10%,
  241. 20% {
  242. -webkit-transform: scale(0.9) rotate(-3deg);
  243. transform: scale(0.9) rotate(-3deg);
  244. }
  245. 30%,
  246. 50%,
  247. 70%,
  248. 90% {
  249. -webkit-transform: scale(1.1) rotate(3deg);
  250. transform: scale(1.1) rotate(3deg);
  251. }
  252. 40%,
  253. 60%,
  254. 80% {
  255. -webkit-transform: scale(1.1) rotate(-3deg);
  256. transform: scale(1.1) rotate(-3deg);
  257. }
  258. 100% {
  259. -webkit-transform: scale(1) rotate(0);
  260. transform: scale(1) rotate(0);
  261. }
  262. }
  263. /* Pulse */
  264. @-webkit-keyframes pulse {
  265. 0% {
  266. -webkit-transform: scale(1);
  267. transform: scale(1);
  268. opacity: 1;
  269. }
  270. 50% {
  271. -webkit-transform: scale(0.9);
  272. transform: scale(0.9);
  273. opacity: 0.7;
  274. }
  275. 100% {
  276. -webkit-transform: scale(1);
  277. transform: scale(1);
  278. opacity: 1;
  279. }
  280. }
  281. @keyframes pulse {
  282. 0% {
  283. -webkit-transform: scale(1);
  284. transform: scale(1);
  285. opacity: 1;
  286. }
  287. 50% {
  288. -webkit-transform: scale(0.9);
  289. transform: scale(0.9);
  290. opacity: 0.7;
  291. }
  292. 100% {
  293. -webkit-transform: scale(1);
  294. transform: scale(1);
  295. opacity: 1;
  296. }
  297. }
  298. /*--------------
  299. Slide
  300. ---------------*/
  301. .slide.down.transition.in {
  302. -webkit-animation-name: slideIn;
  303. animation-name: slideIn;
  304. transform-origin: 50% 0%;
  305. -ms-transform-origin: 50% 0%;
  306. -webkit-transform-origin: 50% 0%;
  307. }
  308. .slide.down.transition.out {
  309. -webkit-animation-name: slideOut;
  310. animation-name: slideOut;
  311. -webkit-transform-origin: 50% 0%;
  312. -ms-transform-origin: 50% 0%;
  313. transform-origin: 50% 0%;
  314. }
  315. .slide.up.transition.in {
  316. -webkit-animation-name: slideIn;
  317. animation-name: slideIn;
  318. -webkit-transform-origin: 50% 100%;
  319. -ms-transform-origin: 50% 100%;
  320. transform-origin: 50% 100%;
  321. }
  322. .slide.up.transition.out {
  323. -webkit-animation-name: slideOut;
  324. animation-name: slideOut;
  325. -webkit-transform-origin: 50% 100%;
  326. -ms-transform-origin: 50% 100%;
  327. transform-origin: 50% 100%;
  328. }
  329. @-webkit-keyframes slideIn {
  330. 0% {
  331. opacity: 0;
  332. -webkit-transform: scaleY(0);
  333. transform: scaleY(0);
  334. }
  335. 100% {
  336. opacity: 1;
  337. -webkit-transform: scaleY(1);
  338. transform: scaleY(1);
  339. }
  340. }
  341. @keyframes slideIn {
  342. 0% {
  343. opacity: 0;
  344. -webkit-transform: scaleY(0);
  345. transform: scaleY(0);
  346. }
  347. 100% {
  348. opacity: 1;
  349. -webkit-transform: scaleY(1);
  350. transform: scaleY(1);
  351. }
  352. }
  353. @-webkit-keyframes slideOut {
  354. 0% {
  355. opacity: 1;
  356. -webkit-transform: scaleY(1);
  357. transform: scaleY(1);
  358. }
  359. 100% {
  360. opacity: 0;
  361. -webkit-transform: scaleY(0);
  362. transform: scaleY(0);
  363. }
  364. }
  365. @keyframes slideOut {
  366. 0% {
  367. opacity: 1;
  368. -webkit-transform: scaleY(1);
  369. transform: scaleY(1);
  370. }
  371. 100% {
  372. opacity: 0;
  373. -webkit-transform: scaleY(0);
  374. transform: scaleY(0);
  375. }
  376. }
  377. /*--------------
  378. Flips
  379. ---------------*/
  380. .flip.transition.in,
  381. .flip.transition.out {
  382. -webkit-perspective: 2000px;
  383. perspective: 2000px;
  384. }
  385. .horizontal.flip.transition.in,
  386. .horizontal.flip.transition.out {
  387. -webkit-animation-name: horizontalFlipIn;
  388. animation-name: horizontalFlipIn;
  389. }
  390. .horizontal.flip.transition.out {
  391. -webkit-animation-name: horizontalFlipOut;
  392. animation-name: horizontalFlipOut;
  393. }
  394. .vertical.flip.transition.in,
  395. .vertical.flip.transition.out {
  396. -webkit-animation-name: verticalFlipIn;
  397. animation-name: verticalFlipIn;
  398. }
  399. .vertical.flip.transition.out {
  400. -webkit-animation-name: verticalFlipOut;
  401. animation-name: verticalFlipOut;
  402. }
  403. /* Horizontal */
  404. @-webkit-keyframes horizontalFlipIn {
  405. 0% {
  406. -webkit-transform: rotateY(-90deg);
  407. transform: rotateY(-90deg);
  408. opacity: 0;
  409. }
  410. 100% {
  411. -webkit-transform: rotateY(0deg);
  412. transform: rotateY(0deg);
  413. opacity: 1;
  414. }
  415. }
  416. @keyframes horizontalFlipIn {
  417. 0% {
  418. -webkit-transform: rotateY(-90deg);
  419. transform: rotateY(-90deg);
  420. opacity: 0;
  421. }
  422. 100% {
  423. -webkit-transform: rotateY(0deg);
  424. transform: rotateY(0deg);
  425. opacity: 1;
  426. }
  427. }
  428. /* Horizontal */
  429. @-webkit-keyframes horizontalFlipOut {
  430. 0% {
  431. -webkit-transform: rotateY(0deg);
  432. transform: rotateY(0deg);
  433. opacity: 1;
  434. }
  435. 100% {
  436. -webkit-transform: rotateY(90deg);
  437. transform: rotateY(90deg);
  438. opacity: 0;
  439. }
  440. }
  441. @keyframes horizontalFlipOut {
  442. 0% {
  443. -webkit-transform: rotateY(0deg);
  444. transform: rotateY(0deg);
  445. opacity: 1;
  446. }
  447. 100% {
  448. -webkit-transform: rotateY(90deg);
  449. transform: rotateY(90deg);
  450. opacity: 0;
  451. }
  452. }
  453. /* Vertical */
  454. @-webkit-keyframes verticalFlipIn {
  455. 0% {
  456. -webkit-transform: rotateX(-90deg);
  457. transform: rotateX(-90deg);
  458. opacity: 0;
  459. }
  460. 100% {
  461. -webkit-transform: rotateX(0deg);
  462. transform: rotateX(0deg);
  463. opacity: 1;
  464. }
  465. }
  466. @keyframes verticalFlipIn {
  467. 0% {
  468. -webkit-transform: rotateX(-90deg);
  469. transform: rotateX(-90deg);
  470. opacity: 0;
  471. }
  472. 100% {
  473. -webkit-transform: rotateX(0deg);
  474. transform: rotateX(0deg);
  475. opacity: 1;
  476. }
  477. }
  478. @-webkit-keyframes verticalFlipOut {
  479. 0% {
  480. -webkit-transform: rotateX(0deg);
  481. transform: rotateX(0deg);
  482. opacity: 1;
  483. }
  484. 100% {
  485. -webkit-transform: rotateX(-90deg);
  486. transform: rotateX(-90deg);
  487. opacity: 0;
  488. }
  489. }
  490. @keyframes verticalFlipOut {
  491. 0% {
  492. -webkit-transform: rotateX(0deg);
  493. transform: rotateX(0deg);
  494. opacity: 1;
  495. }
  496. 100% {
  497. -webkit-transform: rotateX(-90deg);
  498. transform: rotateX(-90deg);
  499. opacity: 0;
  500. }
  501. }
  502. /*--------------
  503. Fades
  504. ---------------*/
  505. .fade.transition.in {
  506. -webkit-animation-name: fadeIn;
  507. animation-name: fadeIn;
  508. }
  509. .fade.transition.out {
  510. -webkit-animation-name: fadeOut;
  511. animation-name: fadeOut;
  512. }
  513. .fade.up.transition.in {
  514. -webkit-animation-name: fadeUpIn;
  515. animation-name: fadeUpIn;
  516. }
  517. .fade.up.transition.out {
  518. -webkit-animation-name: fadeUpOut;
  519. animation-name: fadeUpOut;
  520. }
  521. .fade.down.transition.in {
  522. -webkit-animation-name: fadeDownIn;
  523. animation-name: fadeDownIn;
  524. }
  525. .fade.down.transition.out {
  526. -webkit-animation-name: fadeDownOut;
  527. animation-name: fadeDownOut;
  528. }
  529. /* Fade */
  530. @-webkit-keyframes fadeIn {
  531. 0% {
  532. opacity: 0;
  533. }
  534. 100% {
  535. opacity: 1;
  536. }
  537. }
  538. @keyframes fadeIn {
  539. 0% {
  540. opacity: 0;
  541. }
  542. 100% {
  543. opacity: 1;
  544. }
  545. }
  546. @-webkit-keyframes fadeOut {
  547. 0% {
  548. opacity: 1;
  549. }
  550. 100% {
  551. opacity: 0;
  552. }
  553. }
  554. @keyframes fadeOut {
  555. 0% {
  556. opacity: 1;
  557. }
  558. 100% {
  559. opacity: 0;
  560. }
  561. }
  562. /* Fade Up */
  563. @-webkit-keyframes fadeUpIn {
  564. 0% {
  565. opacity: 0;
  566. -webkit-transform: translateY(10%);
  567. transform: translateY(10%);
  568. }
  569. 100% {
  570. opacity: 1;
  571. -webkit-transform: translateY(0%);
  572. transform: translateY(0%);
  573. }
  574. }
  575. @keyframes fadeUpIn {
  576. 0% {
  577. opacity: 0;
  578. -webkit-transform: translateY(10%);
  579. transform: translateY(10%);
  580. }
  581. 100% {
  582. opacity: 1;
  583. -webkit-transform: translateY(0%);
  584. transform: translateY(0%);
  585. }
  586. }
  587. @-webkit-keyframes fadeUpOut {
  588. 0% {
  589. opacity: 1;
  590. -webkit-transform: translateY(0%);
  591. transform: translateY(0%);
  592. }
  593. 100% {
  594. opacity: 0;
  595. -webkit-transform: translateY(10%);
  596. transform: translateY(10%);
  597. }
  598. }
  599. @keyframes fadeUpOut {
  600. 0% {
  601. opacity: 1;
  602. -webkit-transform: translateY(0%);
  603. transform: translateY(0%);
  604. }
  605. 100% {
  606. opacity: 0;
  607. -webkit-transform: translateY(10%);
  608. transform: translateY(10%);
  609. }
  610. }
  611. /* Fade Down */
  612. @-webkit-keyframes fadeDownIn {
  613. 0% {
  614. opacity: 0;
  615. -webkit-transform: translateY(-10%);
  616. transform: translateY(-10%);
  617. }
  618. 100% {
  619. opacity: 1;
  620. -webkit-transform: translateY(0%);
  621. transform: translateY(0%);
  622. }
  623. }
  624. @keyframes fadeDownIn {
  625. 0% {
  626. opacity: 0;
  627. -webkit-transform: translateY(-10%);
  628. transform: translateY(-10%);
  629. }
  630. 100% {
  631. opacity: 1;
  632. -webkit-transform: translateY(0%);
  633. transform: translateY(0%);
  634. }
  635. }
  636. @-webkit-keyframes fadeDownOut {
  637. 0% {
  638. opacity: 1;
  639. -webkit-transform: translateY(0%);
  640. transform: translateY(0%);
  641. }
  642. 100% {
  643. opacity: 0;
  644. -webkit-transform: translateY(-10%);
  645. transform: translateY(-10%);
  646. }
  647. }
  648. @keyframes fadeDownOut {
  649. 0% {
  650. opacity: 1;
  651. -webkit-transform: translateY(0%);
  652. transform: translateY(0%);
  653. }
  654. 100% {
  655. opacity: 0;
  656. -webkit-transform: translateY(-10%);
  657. transform: translateY(-10%);
  658. }
  659. }
  660. /*--------------
  661. Scale
  662. ---------------*/
  663. .scale.transition.in {
  664. -webkit-animation-name: scaleIn;
  665. animation-name: scaleIn;
  666. }
  667. .scale.transition.out {
  668. -webkit-animation-name: scaleOut;
  669. animation-name: scaleOut;
  670. }
  671. /* Scale */
  672. @-webkit-keyframes scaleIn {
  673. 0% {
  674. opacity: 0;
  675. -webkit-transform: scale(0.7);
  676. transform: scale(0.7);
  677. }
  678. 100% {
  679. opacity: 1;
  680. -webkit-transform: scale(1);
  681. transform: scale(1);
  682. }
  683. }
  684. @keyframes scaleIn {
  685. 0% {
  686. opacity: 0;
  687. -webkit-transform: scale(0.7);
  688. transform: scale(0.7);
  689. }
  690. 100% {
  691. opacity: 1;
  692. -webkit-transform: scale(1);
  693. transform: scale(1);
  694. }
  695. }
  696. @-webkit-keyframes scaleOut {
  697. 0% {
  698. opacity: 1;
  699. -webkit-transform: scale(1);
  700. transform: scale(1);
  701. }
  702. 100% {
  703. opacity: 0;
  704. -webkit-transform: scale(0.7);
  705. transform: scale(0.7);
  706. }
  707. }
  708. @keyframes scaleOut {
  709. 0% {
  710. opacity: 1;
  711. -webkit-transform: scale(1);
  712. transform: scale(1);
  713. }
  714. 100% {
  715. opacity: 0;
  716. -webkit-transform: scale(0.7);
  717. transform: scale(0.7);
  718. }
  719. }
  720. /*--------------
  721. Drop
  722. ---------------*/
  723. .drop.transition {
  724. -webkit-transform-origin: top center;
  725. -ms-transform-origin: top center;
  726. transform-origin: top center;
  727. -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
  728. animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
  729. }
  730. .drop.transition.in {
  731. -webkit-animation-name: dropIn;
  732. animation-name: dropIn;
  733. }
  734. .drop.transition.out {
  735. -webkit-animation-name: dropOut;
  736. animation-name: dropOut;
  737. }
  738. /* Scale */
  739. @-webkit-keyframes dropIn {
  740. 0% {
  741. opacity: 0;
  742. -webkit-transform: scale(0);
  743. transform: scale(0);
  744. }
  745. 100% {
  746. opacity: 1;
  747. -webkit-transform: scale(1);
  748. transform: scale(1);
  749. }
  750. }
  751. @keyframes dropIn {
  752. 0% {
  753. opacity: 0;
  754. -webkit-transform: scale(0);
  755. transform: scale(0);
  756. }
  757. 100% {
  758. opacity: 1;
  759. -webkit-transform: scale(1);
  760. transform: scale(1);
  761. }
  762. }
  763. @-webkit-keyframes dropOut {
  764. 0% {
  765. opacity: 1;
  766. -webkit-transform: scale(1);
  767. transform: scale(1);
  768. }
  769. 100% {
  770. opacity: 0;
  771. -webkit-transform: scale(0);
  772. transform: scale(0);
  773. }
  774. }
  775. @keyframes dropOut {
  776. 0% {
  777. opacity: 1;
  778. -webkit-transform: scale(1);
  779. transform: scale(1);
  780. }
  781. 100% {
  782. opacity: 0;
  783. -webkit-transform: scale(0);
  784. transform: scale(0);
  785. }
  786. }
  787. /*--------------
  788. Browse
  789. ---------------*/
  790. .browse.transition.in {
  791. -webkit-animation-name: browseIn;
  792. animation-name: browseIn;
  793. -webkit-animation-timing-function: ease;
  794. animation-timing-function: ease;
  795. }
  796. .browse.transition.out,
  797. .browse.transition.out.left {
  798. -webkit-animation-name: browseOutLeft;
  799. animation-name: browseOutLeft;
  800. -webkit-animation-timing-function: ease;
  801. animation-timing-function: ease;
  802. }
  803. .browse.transition.out.right {
  804. -webkit-animation-name: browseOutRight;
  805. animation-name: browseOutRight;
  806. -webkit-animation-timing-function: ease;
  807. animation-timing-function: ease;
  808. }
  809. @-webkit-keyframes browseIn {
  810. 0% {
  811. -webkit-transform: scale(0.8) translateZ(0px);
  812. transform: scale(0.8) translateZ(0px);
  813. z-index: -1;
  814. }
  815. 10% {
  816. -webkit-transform: scale(0.8) translateZ(0px);
  817. transform: scale(0.8) translateZ(0px);
  818. z-index: -1;
  819. opacity: 0.7;
  820. }
  821. 80% {
  822. -webkit-transform: scale(1.05) translateZ(0px);
  823. transform: scale(1.05) translateZ(0px);
  824. opacity: 1;
  825. z-index: 999;
  826. }
  827. 100% {
  828. -webkit-transform: scale(1) translateZ(0px);
  829. transform: scale(1) translateZ(0px);
  830. z-index: 999;
  831. }
  832. }
  833. @keyframes browseIn {
  834. 0% {
  835. -webkit-transform: scale(0.8) translateZ(0px);
  836. transform: scale(0.8) translateZ(0px);
  837. z-index: -1;
  838. }
  839. 10% {
  840. -webkit-transform: scale(0.8) translateZ(0px);
  841. transform: scale(0.8) translateZ(0px);
  842. z-index: -1;
  843. opacity: 0.7;
  844. }
  845. 80% {
  846. -webkit-transform: scale(1.05) translateZ(0px);
  847. transform: scale(1.05) translateZ(0px);
  848. opacity: 1;
  849. z-index: 999;
  850. }
  851. 100% {
  852. -webkit-transform: scale(1) translateZ(0px);
  853. transform: scale(1) translateZ(0px);
  854. z-index: 999;
  855. }
  856. }
  857. @-webkit-keyframes browseOutLeft {
  858. 0% {
  859. z-index: 999;
  860. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  861. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  862. }
  863. 50% {
  864. z-index: -1;
  865. -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  866. transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  867. }
  868. 80% {
  869. opacity: 1;
  870. }
  871. 100% {
  872. z-index: -1;
  873. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  874. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  875. opacity: 0;
  876. }
  877. }
  878. @keyframes browseOutLeft {
  879. 0% {
  880. z-index: 999;
  881. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  882. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  883. }
  884. 50% {
  885. z-index: -1;
  886. -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  887. transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  888. }
  889. 80% {
  890. opacity: 1;
  891. }
  892. 100% {
  893. z-index: -1;
  894. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  895. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  896. opacity: 0;
  897. }
  898. }
  899. @-webkit-keyframes browseOutRight {
  900. 0% {
  901. z-index: 999;
  902. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  903. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  904. }
  905. 50% {
  906. z-index: 1;
  907. -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  908. transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  909. }
  910. 80% {
  911. opacity: 1;
  912. }
  913. 100% {
  914. z-index: 1;
  915. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  916. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  917. opacity: 0;
  918. }
  919. }
  920. @keyframes browseOutRight {
  921. 0% {
  922. z-index: 999;
  923. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  924. transform: translateX(0%) rotateY(0deg) rotateX(0deg);
  925. }
  926. 50% {
  927. z-index: 1;
  928. -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  929. transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
  930. }
  931. 80% {
  932. opacity: 1;
  933. }
  934. 100% {
  935. z-index: 1;
  936. -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  937. transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
  938. opacity: 0;
  939. }
  940. }
  941. /*******************************
  942. Site Overrides
  943. *******************************/