|
|
/* * # 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 - https://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*******************************/
|
