9 lines
No EOL
14 KiB
CSS
9 lines
No EOL
14 KiB
CSS
/*!
|
|
* # Fomantic-UI 2.9.2 - Transition
|
|
* https://github.com/fomantic/Fomantic-UI/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* https://opensource.org/licenses/MIT
|
|
*
|
|
*/.transition{animation-iteration-count:1;animation-duration:.3s;animation-timing-function:ease;animation-fill-mode:both}.animating.transition{-webkit-backface-visibility:hidden;backface-visibility:hidden;visibility:visible!important}.loading.transition{position:absolute;top:-99999px;left:-99999px}.hidden.transition{display:none;visibility:hidden}.visible.transition{display:block!important;visibility:visible!important}.disabled.transition{animation-play-state:paused}.looping.transition{animation-iteration-count:infinite}.pulsating.transition{animation-name:pulsating;animation-duration:2s;box-shadow:0 0 0 0 rgba(128,128,128,.5)}.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(255,255,255,.7)}@keyframes pulsating{100%{box-shadow:0 0 0 .8rem rgba(255,255,255,0)}}.primary.pulsating.transition{box-shadow:0 0 0 0 rgba(100,53,201,.5)}.primary.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(162,145,251,.7)}.secondary.pulsating.transition{box-shadow:0 0 0 0 rgba(27,28,29,.5)}.secondary.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(84,84,84,.7)}.red.pulsating.transition{box-shadow:0 0 0 0 rgba(219,40,40,.5)}.red.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(255,105,94,.7)}.orange.pulsating.transition{box-shadow:0 0 0 0 rgba(242,113,28,.5)}.orange.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(255,133,27,.7)}.yellow.pulsating.transition{box-shadow:0 0 0 0 rgba(251,189,8,.5)}.yellow.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(255,226,31,.7)}.olive.pulsating.transition{box-shadow:0 0 0 0 rgba(181,204,24,.5)}.olive.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(217,231,120,.7)}.green.pulsating.transition{box-shadow:0 0 0 0 rgba(33,186,69,.5)}.green.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(46,204,64,.7)}.teal.pulsating.transition{box-shadow:0 0 0 0 rgba(0,181,173,.5)}.teal.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(109,255,255,.7)}.blue.pulsating.transition{box-shadow:0 0 0 0 rgba(33,133,208,.5)}.blue.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(84,200,255,.7)}.violet.pulsating.transition{box-shadow:0 0 0 0 rgba(100,53,201,.5)}.violet.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(162,145,251,.7)}.purple.pulsating.transition{box-shadow:0 0 0 0 rgba(163,51,200,.5)}.purple.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(220,115,255,.7)}.pink.pulsating.transition{box-shadow:0 0 0 0 rgba(224,57,151,.5)}.pink.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(255,142,223,.7)}.brown.pulsating.transition{box-shadow:0 0 0 0 rgba(165,103,63,.5)}.brown.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(214,124,28,.7)}.grey.pulsating.transition{box-shadow:0 0 0 0 rgba(118,118,118,.5)}.grey.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(220,221,222,.7)}.black.pulsating.transition{box-shadow:0 0 0 0 rgba(27,28,29,.5)}.black.inverted.pulsating.transition{box-shadow:0 0 0 0 rgba(84,84,84,.7)}.transition.browse{animation-duration:.5s}.transition.browse.in{animation-name:browseIn}.transition.browse.left.out,.transition.browse.out{animation-name:browseOutLeft}.transition.browse.right.out{animation-name:browseOutRight}@keyframes browseIn{0%{transform:scale(.8) translateZ(0);z-index:-1}10%{transform:scale(.8) translateZ(0);z-index:-1;opacity:.7}80%{transform:scale(1.05) translateZ(0);opacity:1;z-index:999}100%{transform:scale(1) translateZ(0);z-index:999}}@keyframes browseOutLeft{0%{z-index:999;transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:-1;transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:-1;transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@keyframes browseOutRight{0%{z-index:999;transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:1;transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:1;transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}.drop.transition{transform-origin:top center;animation-duration:.4s;animation-timing-function:cubic-bezier(.34,1.61,.7,1)}.drop.transition.in{animation-name:dropIn}.drop.transition.out{animation-name:dropOut}@keyframes dropIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}@keyframes dropOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}.transition.fade.in{animation-name:fadeIn}.transition[class*="fade up"].in{animation-name:fadeInUp}.transition[class*="fade down"].in{animation-name:fadeInDown}.transition[class*="fade left"].in{animation-name:fadeInLeft}.transition[class*="fade right"].in{animation-name:fadeInRight}.transition.fade.out{animation-name:fadeOut}.transition[class*="fade up"].out{animation-name:fadeOutUp}.transition[class*="fade down"].out{animation-name:fadeOutDown}.transition[class*="fade left"].out{animation-name:fadeOutLeft}.transition[class*="fade right"].out{animation-name:fadeOutRight}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10%)}100%{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(10%)}100%{opacity:1;transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(-10%)}100%{opacity:1;transform:translateX(0)}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(5%)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-5%)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(5%)}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-5%)}}.flip.transition.in,.flip.transition.out{animation-duration:.6s}.horizontal.flip.transition.in{animation-name:horizontalFlipIn}.horizontal.flip.transition.out{animation-name:horizontalFlipOut}.vertical.flip.transition.in{animation-name:verticalFlipIn}.vertical.flip.transition.out{animation-name:verticalFlipOut}@keyframes horizontalFlipIn{0%{transform:perspective(2000px) rotateY(-90deg);opacity:0}100%{transform:perspective(2000px) rotateY(0);opacity:1}}@keyframes verticalFlipIn{0%{transform:perspective(2000px) rotateX(-90deg);opacity:0}100%{transform:perspective(2000px) rotateX(0);opacity:1}}@keyframes horizontalFlipOut{0%{transform:perspective(2000px) rotateY(0);opacity:1}100%{transform:perspective(2000px) rotateY(90deg);opacity:0}}@keyframes verticalFlipOut{0%{transform:perspective(2000px) rotateX(0);opacity:1}100%{transform:perspective(2000px) rotateX(-90deg);opacity:0}}.scale.transition.in{animation-name:scaleIn}.scale.transition.out{animation-name:scaleOut}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}.transition.fly{animation-duration:.6s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.transition.fly.in{animation-name:flyIn}.transition[class*="fly up"].in{animation-name:flyInUp}.transition[class*="fly down"].in{animation-name:flyInDown}.transition[class*="fly left"].in{animation-name:flyInLeft}.transition[class*="fly right"].in{animation-name:flyInRight}.transition.fly.out{animation-name:flyOut}.transition[class*="fly up"].out{animation-name:flyOutUp}.transition[class*="fly down"].out{animation-name:flyOutDown}.transition[class*="fly left"].out{animation-name:flyOutLeft}.transition[class*="fly right"].out{animation-name:flyOutRight}@keyframes flyIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes flyInUp{0%{opacity:0;transform:translate3d(0,1500px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}100%{transform:translate3d(0,0,0)}}@keyframes flyInDown{0%{opacity:0;transform:translate3d(0,-1500px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}100%{transform:none}}@keyframes flyInLeft{0%{opacity:0;transform:translate3d(1500px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}100%{transform:none}}@keyframes flyInRight{0%{opacity:0;transform:translate3d(-1500px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}100%{transform:none}}@keyframes flyOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes flyOutUp{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}100%{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes flyOutDown{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}100%{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes flyOutRight{20%{opacity:1;transform:translate3d(20px,0,0)}100%{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes flyOutLeft{20%{opacity:1;transform:translate3d(-20px,0,0)}100%{opacity:0;transform:translate3d(2000px,0,0)}}.transition.slide.in,.transition[class*="slide down"].in{animation-name:slideInY;transform-origin:top center}.transition[class*="slide up"].in{animation-name:slideInY;transform-origin:bottom center}.transition[class*="slide left"].in{animation-name:slideInX;transform-origin:right center}.transition[class*="slide right"].in{animation-name:slideInX;transform-origin:left center}.transition.slide.out,.transition[class*="slide down"].out{animation-name:slideOutY;transform-origin:top center}.transition[class*="slide up"].out{animation-name:slideOutY;transform-origin:bottom center}.transition[class*="slide left"].out{animation-name:slideOutX;transform-origin:right center}.transition[class*="slide right"].out{animation-name:slideOutX;transform-origin:left center}@keyframes slideInY{0%{opacity:0;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}@keyframes slideInX{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}@keyframes slideOutY{0%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0)}}@keyframes slideOutX{0%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(0)}}.transition.swing{animation-duration:.8s}.transition[class*="swing down"].in{animation-name:swingInX;transform-origin:top center}.transition[class*="swing up"].in{animation-name:swingInX;transform-origin:bottom center}.transition[class*="swing left"].in{animation-name:swingInY;transform-origin:right center}.transition[class*="swing right"].in{animation-name:swingInY;transform-origin:left center}.transition.swing.out,.transition[class*="swing down"].out{animation-name:swingOutX;transform-origin:top center}.transition[class*="swing up"].out{animation-name:swingOutX;transform-origin:bottom center}.transition[class*="swing left"].out{animation-name:swingOutY;transform-origin:right center}.transition[class*="swing right"].out{animation-name:swingOutY;transform-origin:left center}@keyframes swingInX{0%{transform:perspective(1000px) rotateX(90deg);opacity:0}40%{transform:perspective(1000px) rotateX(-30deg);opacity:1}60%{transform:perspective(1000px) rotateX(15deg)}80%{transform:perspective(1000px) rotateX(-7.5deg)}100%{transform:perspective(1000px) rotateX(0)}}@keyframes swingInY{0%{transform:perspective(1000px) rotateY(-90deg);opacity:0}40%{transform:perspective(1000px) rotateY(30deg);opacity:1}60%{transform:perspective(1000px) rotateY(-17.5deg)}80%{transform:perspective(1000px) rotateY(7.5deg)}100%{transform:perspective(1000px) rotateY(0)}}@keyframes swingOutX{0%{transform:perspective(1000px) rotateX(0)}40%{transform:perspective(1000px) rotateX(-7.5deg)}60%{transform:perspective(1000px) rotateX(17.5deg)}80%{transform:perspective(1000px) rotateX(-30deg);opacity:1}100%{transform:perspective(1000px) rotateX(90deg);opacity:0}}@keyframes swingOutY{0%{transform:perspective(1000px) rotateY(0)}40%{transform:perspective(1000px) rotateY(7.5deg)}60%{transform:perspective(1000px) rotateY(-10deg)}80%{transform:perspective(1000px) rotateY(30deg);opacity:1}100%{transform:perspective(1000px) rotateY(-90deg);opacity:0}}.transition.zoom.in{animation-name:zoomIn}.transition.zoom.out{animation-name:zoomOut}@keyframes zoomIn{0%{opacity:1;transform:scale(0)}100%{opacity:1;transform:scale(1)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(0)}}.flash.transition{animation-duration:750ms;animation-name:flash}.shake.transition{animation-duration:750ms;animation-name:shake}.bounce.transition{animation-duration:750ms;animation-name:bounce}.tada.transition{animation-duration:750ms;animation-name:tada}.pulse.transition{animation-duration:.5s;animation-name:pulse}.jiggle.transition{animation-duration:750ms;animation-name:jiggle}.transition.glow{animation-duration:2s;animation-timing-function:cubic-bezier(.19,1,.22,1)}.transition.glow{animation-name:glow}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}@keyframes bounce{0%,100%,20%,50%,80%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.7}100%{transform:scale(1);opacity:1}}@keyframes jiggle{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}@keyframes glow{0%{background-color:#fcfcfd}30%{background-color:#fff6cd}100%{background-color:#fcfcfd}} |