/* * # Semantic UI * https://github.com/Semantic-Org/Semantic-UI * http://www.semantic-ui.com/ * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Transitions
*******************************/
/*
Some transitions adapted from Animate CSS https://github.com/daneden/animate.css
*/ .transition {
-webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
/*******************************
States
*******************************/
/* Animating */ .animating.transition {
-webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); visibility: visible !important;
}
/* Loading */ .loading.transition {
position: absolute; top: -99999px; left: -99999px;
}
/* Hidden */ .hidden.transition {
display: none; visibility: hidden;
}
/* Visible */ .visible.transition {
display: block !important; visibility: visible !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0);
}
/* Disabled */ .disabled.transition {
-webkit-animation-play-state: paused; animation-play-state: paused;
}
/*******************************
Variations
*******************************/
.looping.transition {
-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
/*******************************
Types
*******************************/
/*******************************
Animations
*******************************/
/*————–
Emphasis
—————*/
.flash.transition {
-webkit-animation-name: flash; animation-name: flash;
} .shake.transition {
-webkit-animation-name: shake; animation-name: shake;
} .bounce.transition {
-webkit-animation-name: bounce; animation-name: bounce;
} .tada.transition {
-webkit-animation-name: tada; animation-name: tada;
}
/* originally authored by Nick Pettit - github.com/nickpettit/glide */ .pulse.transition {
-webkit-animation-name: pulse; animation-name: pulse;
}
/* Flash */ @-webkit-keyframes flash {
0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; }
} @keyframes flash {
0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; }
}
/* Shake */ @-webkit-keyframes shake {
0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); }
} @keyframes shake {
0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); }
}
/* Bounce */ @-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); }
} @keyframes bounce {
0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); }
}
/* Tada */ @-webkit-keyframes tada {
0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); }
} @keyframes tada {
0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); }
}
/* Pulse */ @-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
} @keyframes pulse {
0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
/*————–
Slide
—————*/
.slide.down.transition.in {
-webkit-animation-name: slideIn; animation-name: slideIn; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%;
} .slide.down.transition.out {
-webkit-animation-name: slideOut; animation-name: slideOut; -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%;
} .slide.up.transition.in {
-webkit-animation-name: slideIn; animation-name: slideIn; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%;
} .slide.up.transition.out {
-webkit-animation-name: slideOut; animation-name: slideOut; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%;
} @-webkit-keyframes slideIn {
0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); }
} @keyframes slideIn {
0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); }
} @-webkit-keyframes slideOut {
0% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); }
} @keyframes slideOut {
0% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); }
}
/*————–
Flips
—————*/
.flip.transition.in, .flip.transition.out {
-webkit-perspective: 2000px; perspective: 2000px;
} .horizontal.flip.transition.in {
-webkit-animation-name: horizontalFlipIn; animation-name: horizontalFlipIn;
} .horizontal.flip.transition.out {
-webkit-animation-name: horizontalFlipOut; animation-name: horizontalFlipOut;
} .vertical.flip.transition.in {
-webkit-animation-name: verticalFlipIn; animation-name: verticalFlipIn;
} .vertical.flip.transition.out {
-webkit-animation-name: verticalFlipOut; animation-name: verticalFlipOut;
}
/* Horizontal */ @-webkit-keyframes horizontalFlipIn {
0% { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); opacity: 0; } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
} @keyframes horizontalFlipIn {
0% { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); opacity: 0; } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
}
/* Horizontal */ @-webkit-keyframes horizontalFlipOut {
0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } 100% { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 0; }
} @keyframes horizontalFlipOut {
0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } 100% { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 0; }
}
/* Vertical */ @-webkit-keyframes verticalFlipIn {
0% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
} @keyframes verticalFlipIn {
0% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
} @-webkit-keyframes verticalFlipOut {
0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } 100% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; }
} @keyframes verticalFlipOut {
0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } 100% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; }
}
/*————–
Fades
—————*/
.fade.transition.in {
-webkit-animation-name: fadeIn; animation-name: fadeIn;
} .fade.transition.out {
-webkit-animation-name: fadeOut; animation-name: fadeOut;
} .fade.up.transition.in {
-webkit-animation-name: fadeUpIn; animation-name: fadeUpIn;
} .fade.up.transition.out {
-webkit-animation-name: fadeUpOut; animation-name: fadeUpOut;
} .fade.down.transition.in {
-webkit-animation-name: fadeDownIn; animation-name: fadeDownIn;
} .fade.down.transition.out {
-webkit-animation-name: fadeDownOut; animation-name: fadeDownOut;
}
/* Fade */ @-webkit-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 1; }
} @keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 1; }
} @-webkit-keyframes fadeOut {
0% { opacity: 1; } 100% { opacity: 0; }
} @keyframes fadeOut {
0% { opacity: 1; } 100% { opacity: 0; }
}
/* Fade Up */ @-webkit-keyframes fadeUpIn {
0% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); }
} @keyframes fadeUpIn {
0% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); }
} @-webkit-keyframes fadeUpOut {
0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); }
} @keyframes fadeUpOut {
0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); }
}
/* Fade Down */ @-webkit-keyframes fadeDownIn {
0% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); }
} @keyframes fadeDownIn {
0% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); }
} @-webkit-keyframes fadeDownOut {
0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); }
} @keyframes fadeDownOut {
0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); }
}
/*————–
Scale
—————*/
.scale.transition.in {
-webkit-animation-name: scaleIn; animation-name: scaleIn;
} .scale.transition.out {
-webkit-animation-name: scaleOut; animation-name: scaleOut;
}
/* Scale */ @-webkit-keyframes scaleIn {
0% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
} @keyframes scaleIn {
0% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
} @-webkit-keyframes scaleOut {
0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); }
} @keyframes scaleOut {
0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); }
}
/*————–
Drop
—————*/
.drop.transition {
-webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
} .drop.transition.in {
-webkit-animation-name: dropIn; animation-name: dropIn;
} .drop.transition.out {
-webkit-animation-name: dropOut; animation-name: dropOut;
}
/* Scale */ @-webkit-keyframes dropIn {
0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
} @keyframes dropIn {
0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
} @-webkit-keyframes dropOut {
0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
} @keyframes dropOut {
0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
}
/*————–
Browse
—————*/
.browse.transition.in {
-webkit-animation-name: browseIn; animation-name: browseIn; -webkit-animation-timing-function: ease; animation-timing-function: ease;
} .browse.transition.out, .browse.transition.out.left {
-webkit-animation-name: browseOutLeft; animation-name: browseOutLeft; -webkit-animation-timing-function: ease; animation-timing-function: ease;
} .browse.transition.out.right {
-webkit-animation-name: browseOutRight; animation-name: browseOutRight; -webkit-animation-timing-function: ease; animation-timing-function: ease;
} @-webkit-keyframes browseIn {
0% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { -webkit-transform: scale(1.05) translateZ(0px); transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { -webkit-transform: scale(1) translateZ(0px); transform: scale(1) translateZ(0px); z-index: 999; }
} @keyframes browseIn {
0% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { -webkit-transform: scale(1.05) translateZ(0px); transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { -webkit-transform: scale(1) translateZ(0px); transform: scale(1) translateZ(0px); z-index: 999; }
} @-webkit-keyframes browseOutLeft {
0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; }
} @keyframes browseOutLeft {
0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; }
} @-webkit-keyframes browseOutRight {
0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; }
} @keyframes browseOutRight {
0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; }
}
/*******************************
Site Overrides
*******************************/