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.

1196 lines
21 KiB

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