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.

865 lines
15 KiB

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