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.

765 lines
13 KiB

  1. .ui.transition {
  2. -webkit-animation-iteration-count: 1;
  3. animation-iteration-count: 1;
  4. -webkit-animation-duration: 1s;
  5. animation-duration: 1s;
  6. -webkit-animation-timing-function: ease;
  7. animation-timing-function: ease;
  8. -webkit-animation-fill-mode: both;
  9. animation-fill-mode: both;
  10. }
  11. .ui.animating.transition {
  12. -webkit-backface-visibility: hidden;
  13. -ms-backface-visibility: hidden;
  14. backface-visibility: hidden;
  15. -webkit-transform: translateZ(0);
  16. -ms-transform: translateZ(0);
  17. transform: translateZ(0);
  18. }
  19. .ui.loading.transition {
  20. position: absolute;
  21. top: -999999px;
  22. left: -99999px;
  23. }
  24. .ui.hidden.transition {
  25. display: none;
  26. }
  27. .ui.visible.transition {
  28. display: block;
  29. visibility: visible;
  30. }
  31. .ui.disabled.transition {
  32. -webkit-animation-play-state: paused;
  33. animation-play-state: paused;
  34. }
  35. .ui.looping.transition {
  36. -webkit-animation-iteration-count: infinite;
  37. animation-iteration-count: infinite;
  38. }
  39. .ui.flash.transition {
  40. -webkit-animation-name: flash;
  41. animation-name: flash;
  42. }
  43. .ui.shake.transition {
  44. -webkit-animation-name: shake;
  45. animation-name: shake;
  46. }
  47. .ui.bounce.transition {
  48. -webkit-animation-name: bounce;
  49. animation-name: bounce;
  50. }
  51. .ui.tada.transition {
  52. -webkit-animation-name: tada;
  53. animation-name: tada;
  54. }
  55. .ui.pulse.transition {
  56. -webkit-animation-name: pulse;
  57. animation-name: pulse;
  58. }
  59. .ui.flip.transition.in,
  60. .ui.flip.transition.out {
  61. -webkit-perspective: 2000px;
  62. -ms-perspective: 2000px;
  63. perspective: 2000px;
  64. }
  65. .ui.horizontal.flip.transition.in,
  66. .ui.horizontal.flip.transition.out {
  67. -webkit-animation-name: horizontalFlip;
  68. animation-name: horizontalFlip;
  69. }
  70. .ui.horizontal.flip.transition.out {
  71. -webkit-animation-name: horizontalFlipOut;
  72. animation-name: horizontalFlipOut;
  73. }
  74. .ui.vertical.flip.transition.in,
  75. .ui.vertical.flip.transition.out {
  76. -webkit-animation-name: verticalFlip;
  77. animation-name: verticalFlip;
  78. }
  79. .ui.vertical.flip.transition.out {
  80. -webkit-animation-name: verticalFlipOut;
  81. animation-name: verticalFlipOut;
  82. }
  83. .ui.fade.transition.in {
  84. -webkit-animation-name: fade;
  85. animation-name: fade;
  86. }
  87. .ui.fade.transition.out {
  88. -webkit-animation-name: fadeOut;
  89. animation-name: fadeOut;
  90. }
  91. .ui.fade.up.transition.in {
  92. -webkit-animation-name: fadeUp;
  93. animation-name: fadeUp;
  94. }
  95. .ui.fade.up.transition.out {
  96. -webkit-animation-name: fadeUpOut;
  97. animation-name: fadeUpOut;
  98. }
  99. .ui.fade.down.transition.in {
  100. -webkit-animation-name: fadeDown;
  101. animation-name: fadeDown;
  102. }
  103. .ui.fade.down.transition.out {
  104. -webkit-animation-name: fadeDownOut;
  105. animation-name: fadeDownOut;
  106. }
  107. .ui.scale.transition.in {
  108. -webkit-animation-name: scale;
  109. animation-name: scale;
  110. }
  111. .ui.scale.transition.out {
  112. -webkit-animation-name: scaleOut;
  113. animation-name: scaleOut;
  114. }
  115. .ui.slide.down.transition.in {
  116. -webkit-animation-name: slide;
  117. animation-name: slide;
  118. transform-origin: 50% 0;
  119. -ms-transform-origin: 50% 0;
  120. -webkit-transform-origin: 50% 0;
  121. }
  122. .ui.slide.down.transition.out {
  123. -webkit-animation-name: slideOut;
  124. animation-name: slideOut;
  125. transform-origin: 50% 0;
  126. -ms-transform-origin: 50% 0;
  127. -webkit-transform-origin: 50% 0;
  128. }
  129. .ui.slide.up.transition.in {
  130. -webkit-animation-name: slide;
  131. animation-name: slide;
  132. transform-origin: 50% 100%;
  133. -ms-transform-origin: 50% 100%;
  134. -webkit-transform-origin: 50% 100%;
  135. }
  136. .ui.slide.up.transition.out {
  137. -webkit-animation-name: slideOut;
  138. animation-name: slideOut;
  139. transform-origin: 50% 100%;
  140. -ms-transform-origin: 50% 100%;
  141. -webkit-transform-origin: 50% 100%;
  142. }
  143. @-webkit-keyframes slide {
  144. 0% {
  145. opacity: 0;
  146. -webkit-transform: scaleY(0);
  147. transform: scaleY(0);
  148. }
  149. 100% {
  150. opacity: 1;
  151. -webkit-transform: scaleY(1);
  152. transform: scaleY(1);
  153. }
  154. }
  155. @keyframes slide {
  156. 0% {
  157. opacity: 0;
  158. -webkit-transform: scaleY(0);
  159. -ms-transform: scaleY(0);
  160. transform: scaleY(0);
  161. }
  162. 100% {
  163. opacity: 1;
  164. -webkit-transform: scaleY(1);
  165. -ms-transform: scaleY(1);
  166. transform: scaleY(1);
  167. }
  168. }
  169. @-webkit-keyframes slideOut {
  170. 0% {
  171. opacity: 1;
  172. -webkit-transform: scaleY(1);
  173. transform: scaleY(1);
  174. }
  175. 100% {
  176. opacity: 0;
  177. -webkit-transform: scaleY(0);
  178. transform: scaleY(0);
  179. }
  180. }
  181. @keyframes slideOut {
  182. 0% {
  183. opacity: 1;
  184. -webkit-transform: scaleY(1);
  185. -ms-transform: scaleY(1);
  186. transform: scaleY(1);
  187. }
  188. 100% {
  189. opacity: 0;
  190. -webkit-transform: scaleY(0);
  191. -ms-transform: scaleY(0);
  192. transform: scaleY(0);
  193. }
  194. }
  195. @-webkit-keyframes flash {
  196. 0%, 50%, 100% {
  197. opacity: 1;
  198. }
  199. 25%, 75% {
  200. opacity: 0;
  201. }
  202. }
  203. @keyframes flash {
  204. 0%, 50%, 100% {
  205. opacity: 1;
  206. }
  207. 25%, 75% {
  208. opacity: 0;
  209. }
  210. }
  211. @-webkit-keyframes shake {
  212. 0%, 100% {
  213. -webkit-transform: translateX(0);
  214. transform: translateX(0);
  215. }
  216. 10%, 30%, 50%, 70%, 90% {
  217. -webkit-transform: translateX(-10px);
  218. transform: translateX(-10px);
  219. }
  220. 20%, 40%, 60%, 80% {
  221. -webkit-transform: translateX(10px);
  222. transform: translateX(10px);
  223. }
  224. }
  225. @keyframes shake {
  226. 0%, 100% {
  227. -webkit-transform: translateX(0);
  228. -ms-transform: translateX(0);
  229. transform: translateX(0);
  230. }
  231. 10%, 30%, 50%, 70%, 90% {
  232. -webkit-transform: translateX(-10px);
  233. -ms-transform: translateX(-10px);
  234. transform: translateX(-10px);
  235. }
  236. 20%, 40%, 60%, 80% {
  237. -webkit-transform: translateX(10px);
  238. -ms-transform: translateX(10px);
  239. transform: translateX(10px);
  240. }
  241. }
  242. @-webkit-keyframes bounce {
  243. 0%, 20%, 50%, 80%, 100% {
  244. -webkit-transform: translateY(0);
  245. transform: translateY(0);
  246. }
  247. 40% {
  248. -webkit-transform: translateY(-30px);
  249. transform: translateY(-30px);
  250. }
  251. 60% {
  252. -webkit-transform: translateY(-15px);
  253. transform: translateY(-15px);
  254. }
  255. }
  256. @keyframes bounce {
  257. 0%, 20%, 50%, 80%, 100% {
  258. -webkit-transform: translateY(0);
  259. -ms-transform: translateY(0);
  260. transform: translateY(0);
  261. }
  262. 40% {
  263. -webkit-transform: translateY(-30px);
  264. -ms-transform: translateY(-30px);
  265. transform: translateY(-30px);
  266. }
  267. 60% {
  268. -webkit-transform: translateY(-15px);
  269. -ms-transform: translateY(-15px);
  270. transform: translateY(-15px);
  271. }
  272. }
  273. @-webkit-keyframes tada {
  274. 0% {
  275. -webkit-transform: scale(1);
  276. transform: scale(1);
  277. }
  278. 10%, 20% {
  279. -webkit-transform: scale(0.9) rotate(-3deg);
  280. transform: scale(0.9) rotate(-3deg);
  281. }
  282. 30%, 50%, 70%, 90% {
  283. -webkit-transform: scale(1.1) rotate(3deg);
  284. transform: scale(1.1) rotate(3deg);
  285. }
  286. 40%, 60%, 80% {
  287. -webkit-transform: scale(1.1) rotate(-3deg);
  288. transform: scale(1.1) rotate(-3deg);
  289. }
  290. 100% {
  291. -webkit-transform: scale(1) rotate(0);
  292. transform: scale(1) rotate(0);
  293. }
  294. }
  295. @keyframes tada {
  296. 0% {
  297. -webkit-transform: scale(1);
  298. -ms-transform: scale(1);
  299. transform: scale(1);
  300. }
  301. 10%, 20% {
  302. -webkit-transform: scale(0.9) rotate(-3deg);
  303. -ms-transform: scale(0.9) rotate(-3deg);
  304. transform: scale(0.9) rotate(-3deg);
  305. }
  306. 30%, 50%, 70%, 90% {
  307. -webkit-transform: scale(1.1) rotate(3deg);
  308. -ms-transform: scale(1.1) rotate(3deg);
  309. transform: scale(1.1) rotate(3deg);
  310. }
  311. 40%, 60%, 80% {
  312. -webkit-transform: scale(1.1) rotate(-3deg);
  313. -ms-transform: scale(1.1) rotate(-3deg);
  314. transform: scale(1.1) rotate(-3deg);
  315. }
  316. 100% {
  317. -webkit-transform: scale(1) rotate(0);
  318. -ms-transform: scale(1) rotate(0);
  319. transform: scale(1) rotate(0);
  320. }
  321. }
  322. @-webkit-keyframes pulse {
  323. 0% {
  324. -webkit-transform: scale(1);
  325. transform: scale(1);
  326. opacity: 1;
  327. }
  328. 50% {
  329. -webkit-transform: scale(0.9);
  330. transform: scale(0.9);
  331. opacity: .7;
  332. }
  333. 100% {
  334. -webkit-transform: scale(1);
  335. transform: scale(1);
  336. opacity: 1;
  337. }
  338. }
  339. @keyframes pulse {
  340. 0% {
  341. -webkit-transform: scale(1);
  342. -ms-transform: scale(1);
  343. transform: scale(1);
  344. opacity: 1;
  345. }
  346. 50% {
  347. -webkit-transform: scale(0.9);
  348. -ms-transform: scale(0.9);
  349. transform: scale(0.9);
  350. opacity: .7;
  351. }
  352. 100% {
  353. -webkit-transform: scale(1);
  354. -ms-transform: scale(1);
  355. transform: scale(1);
  356. opacity: 1;
  357. }
  358. }
  359. @-webkit-keyframes horizontalFlip {
  360. 0% {
  361. -webkit-transform: rotateY(-90deg);
  362. transform: rotateY(-90deg);
  363. opacity: 0;
  364. }
  365. 100% {
  366. -webkit-transform: rotateY(0deg);
  367. transform: rotateY(0deg);
  368. opacity: 1;
  369. }
  370. }
  371. @keyframes horizontalFlip {
  372. 0% {
  373. -webkit-transform: rotateY(-90deg);
  374. -ms-transform: rotateY(-90deg);
  375. transform: rotateY(-90deg);
  376. opacity: 0;
  377. }
  378. 100% {
  379. -webkit-transform: rotateY(0deg);
  380. -ms-transform: rotateY(0deg);
  381. transform: rotateY(0deg);
  382. opacity: 1;
  383. }
  384. }
  385. @-webkit-keyframes horizontalFlipOut {
  386. 0% {
  387. -webkit-transform: rotateY(0deg);
  388. transform: rotateY(0deg);
  389. opacity: 0;
  390. }
  391. 100% {
  392. -webkit-transform: rotateY(90deg);
  393. transform: rotateY(90deg);
  394. opacity: 1;
  395. }
  396. }
  397. @keyframes horizontalFlipOut {
  398. 0% {
  399. -webkit-transform: rotateY(0deg);
  400. -ms-transform: rotateY(0deg);
  401. transform: rotateY(0deg);
  402. opacity: 0;
  403. }
  404. 100% {
  405. -webkit-transform: rotateY(90deg);
  406. -ms-transform: rotateY(90deg);
  407. transform: rotateY(90deg);
  408. opacity: 1;
  409. }
  410. }
  411. @-webkit-keyframes verticalFlip {
  412. 0% {
  413. -webkit-transform: rotateX(-90deg);
  414. transform: rotateX(-90deg);
  415. opacity: 0;
  416. }
  417. 100% {
  418. -webkit-transform: rotateX(0deg);
  419. transform: rotateX(0deg);
  420. opacity: 1;
  421. }
  422. }
  423. @keyframes verticalFlip {
  424. 0% {
  425. -webkit-transform: rotateX(-90deg);
  426. -ms-transform: rotateX(-90deg);
  427. transform: rotateX(-90deg);
  428. opacity: 0;
  429. }
  430. 100% {
  431. -webkit-transform: rotateX(0deg);
  432. -ms-transform: rotateX(0deg);
  433. transform: rotateX(0deg);
  434. opacity: 1;
  435. }
  436. }
  437. @-webkit-keyframes verticalFlipOut {
  438. 0% {
  439. -webkit-transform: rotateX(0deg);
  440. transform: rotateX(0deg);
  441. opacity: 1;
  442. }
  443. 100% {
  444. -webkit-transform: rotateX(-90deg);
  445. transform: rotateX(-90deg);
  446. opacity: 0;
  447. }
  448. }
  449. @keyframes verticalFlipOut {
  450. 0% {
  451. -webkit-transform: rotateX(0deg);
  452. -ms-transform: rotateX(0deg);
  453. transform: rotateX(0deg);
  454. opacity: 1;
  455. }
  456. 100% {
  457. -webkit-transform: rotateX(-90deg);
  458. -ms-transform: rotateX(-90deg);
  459. transform: rotateX(-90deg);
  460. opacity: 0;
  461. }
  462. }
  463. @-webkit-keyframes fade {
  464. 0% {
  465. opacity: 0;
  466. }
  467. 100% {
  468. opacity: 1;
  469. }
  470. }
  471. @keyframes fade {
  472. 0% {
  473. opacity: 0;
  474. }
  475. 100% {
  476. opacity: 1;
  477. }
  478. }
  479. @-webkit-keyframes fadeOut {
  480. 0% {
  481. opacity: 1;
  482. }
  483. 100% {
  484. opacity: 0;
  485. }
  486. }
  487. @keyframes fadeOut {
  488. 0% {
  489. opacity: 1;
  490. }
  491. 100% {
  492. opacity: 0;
  493. }
  494. }
  495. @-webkit-keyframes fadeUp {
  496. 0% {
  497. opacity: 0;
  498. -webkit-transform: translateY(20px);
  499. transform: translateY(20px);
  500. }
  501. 100% {
  502. opacity: 1;
  503. -webkit-transform: translateY(0);
  504. transform: translateY(0);
  505. }
  506. }
  507. @keyframes fadeUp {
  508. 0% {
  509. opacity: 0;
  510. -webkit-transform: translateY(20px);
  511. -ms-transform: translateY(20px);
  512. transform: translateY(20px);
  513. }
  514. 100% {
  515. opacity: 1;
  516. -webkit-transform: translateY(0);
  517. -ms-transform: translateY(0);
  518. transform: translateY(0);
  519. }
  520. }
  521. @-webkit-keyframes fadeUpOut {
  522. 0% {
  523. opacity: 1;
  524. -webkit-transform: translateY(0);
  525. transform: translateY(0);
  526. }
  527. 100% {
  528. opacity: 0;
  529. -webkit-transform: translateY(20px);
  530. transform: translateY(20px);
  531. }
  532. }
  533. @keyframes fadeUpOut {
  534. 0% {
  535. opacity: 1;
  536. -webkit-transform: translateY(0);
  537. -ms-transform: translateY(0);
  538. transform: translateY(0);
  539. }
  540. 100% {
  541. opacity: 0;
  542. -webkit-transform: translateY(20px);
  543. -ms-transform: translateY(20px);
  544. transform: translateY(20px);
  545. }
  546. }
  547. @-webkit-keyframes fadeDown {
  548. 0% {
  549. opacity: 0;
  550. -webkit-transform: translateY(-20px);
  551. transform: translateY(-20px);
  552. }
  553. 100% {
  554. opacity: 1;
  555. -webkit-transform: translateY(0);
  556. transform: translateY(0);
  557. }
  558. }
  559. @keyframes fadeDown {
  560. 0% {
  561. opacity: 0;
  562. -webkit-transform: translateY(-20px);
  563. -ms-transform: translateY(-20px);
  564. transform: translateY(-20px);
  565. }
  566. 100% {
  567. opacity: 1;
  568. -webkit-transform: translateY(0);
  569. -ms-transform: translateY(0);
  570. transform: translateY(0);
  571. }
  572. }
  573. @-webkit-keyframes fadeDownOut {
  574. 0% {
  575. opacity: 1;
  576. -webkit-transform: translateY(0);
  577. transform: translateY(0);
  578. }
  579. 100% {
  580. opacity: 0;
  581. -webkit-transform: translateY(-20px);
  582. transform: translateY(-20px);
  583. }
  584. }
  585. @keyframes fadeDownOut {
  586. 0% {
  587. opacity: 1;
  588. -webkit-transform: translateY(0);
  589. -ms-transform: translateY(0);
  590. transform: translateY(0);
  591. }
  592. 100% {
  593. opacity: 0;
  594. -webkit-transform: translateY(-20px);
  595. -ms-transform: translateY(-20px);
  596. transform: translateY(-20px);
  597. }
  598. }
  599. @-webkit-keyframes scale {
  600. 0% {
  601. opacity: 0;
  602. -webkit-transform: scale(0.7);
  603. transform: scale(0.7);
  604. }
  605. 100% {
  606. opacity: 1;
  607. -webkit-transform: scale(1);
  608. transform: scale(1);
  609. }
  610. }
  611. @keyframes scale {
  612. 0% {
  613. opacity: 0;
  614. -webkit-transform: scale(0.7);
  615. -ms-transform: scale(0.7);
  616. transform: scale(0.7);
  617. }
  618. 100% {
  619. opacity: 1;
  620. -webkit-transform: scale(1);
  621. -ms-transform: scale(1);
  622. transform: scale(1);
  623. }
  624. }
  625. @-webkit-keyframes scaleOut {
  626. 0% {
  627. opacity: 1;
  628. -webkit-transform: scale(1);
  629. transform: scale(1);
  630. }
  631. 100% {
  632. opacity: 0;
  633. -webkit-transform: scale(0.7);
  634. transform: scale(0.7);
  635. }
  636. }
  637. @keyframes scaleOut {
  638. 0% {
  639. opacity: 1;
  640. -webkit-transform: scale(1);
  641. -ms-transform: scale(1);
  642. transform: scale(1);
  643. }
  644. 100% {
  645. opacity: 0;
  646. -webkit-transform: scale(0.7);
  647. -ms-transform: scale(0.7);
  648. transform: scale(0.7);
  649. }
  650. }