|
|
.ui.transition { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.ui.animating.transition { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }
.ui.loading.transition { position: absolute; top: -999999px; left: -99999px; }
.ui.hidden.transition { display: none; }
.ui.visible.transition { display: block; visibility: visible; }
.ui.disabled.transition { -webkit-animation-play-state: paused; animation-play-state: paused; }
.ui.looping.transition { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.ui.flash.transition { -webkit-animation-name: flash; animation-name: flash; }
.ui.shake.transition { -webkit-animation-name: shake; animation-name: shake; }
.ui.bounce.transition { -webkit-animation-name: bounce; animation-name: bounce; }
.ui.tada.transition { -webkit-animation-name: tada; animation-name: tada; }
.ui.pulse.transition { -webkit-animation-name: pulse; animation-name: pulse; }
.ui.flip.transition.in, .ui.flip.transition.out { -webkit-perspective: 2000px; -ms-perspective: 2000px; perspective: 2000px; }
.ui.horizontal.flip.transition.in, .ui.horizontal.flip.transition.out { -webkit-animation-name: horizontalFlip; animation-name: horizontalFlip; }
.ui.horizontal.flip.transition.out { -webkit-animation-name: horizontalFlipOut; animation-name: horizontalFlipOut; }
.ui.vertical.flip.transition.in, .ui.vertical.flip.transition.out { -webkit-animation-name: verticalFlip; animation-name: verticalFlip; }
.ui.vertical.flip.transition.out { -webkit-animation-name: verticalFlipOut; animation-name: verticalFlipOut; }
.ui.fade.transition.in { -webkit-animation-name: fade; animation-name: fade; }
.ui.fade.transition.out { -webkit-animation-name: fadeOut; animation-name: fadeOut; }
.ui.fade.up.transition.in { -webkit-animation-name: fadeUp; animation-name: fadeUp; }
.ui.fade.up.transition.out { -webkit-animation-name: fadeUpOut; animation-name: fadeUpOut; }
.ui.fade.down.transition.in { -webkit-animation-name: fadeDown; animation-name: fadeDown; }
.ui.fade.down.transition.out { -webkit-animation-name: fadeDownOut; animation-name: fadeDownOut; }
.ui.scale.transition.in { -webkit-animation-name: scale; animation-name: scale; }
.ui.scale.transition.out { -webkit-animation-name: scaleOut; animation-name: scaleOut; }
.ui.slide.down.transition.in { -webkit-animation-name: slide; animation-name: slide; transform-origin: 50% 0; -ms-transform-origin: 50% 0; -webkit-transform-origin: 50% 0; }
.ui.slide.down.transition.out { -webkit-animation-name: slideOut; animation-name: slideOut; transform-origin: 50% 0; -ms-transform-origin: 50% 0; -webkit-transform-origin: 50% 0; }
.ui.slide.up.transition.in { -webkit-animation-name: slide; animation-name: slide; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; }
.ui.slide.up.transition.out { -webkit-animation-name: slideOut; animation-name: slideOut; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; }
@-webkit-keyframes slide { 0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); }
100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } }
@keyframes slide { 0% { opacity: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); }
100% { opacity: 1; -webkit-transform: scaleY(1); -ms-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); -ms-transform: scaleY(1); transform: scaleY(1); }
100% { opacity: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } }
@-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; } }
@keyframes flash { 0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; } }
@-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); -ms-transform: translateX(0); transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); }
20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } }
@-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); -ms-transform: translateY(0); transform: translateY(0); }
40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); }
60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } }
@-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); -ms-transform: scale(1); transform: scale(1); }
10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); }
100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } }
@-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: .7; }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }
50% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); opacity: .7; }
100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } }
@-webkit-keyframes horizontalFlip { 0% { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); opacity: 0; }
100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } }
@keyframes horizontalFlip { 0% { -webkit-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); opacity: 0; }
100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } }
@-webkit-keyframes horizontalFlipOut { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 0; }
100% { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 1; } }
@keyframes horizontalFlipOut { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 0; }
100% { -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 1; } }
@-webkit-keyframes verticalFlip { 0% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; }
100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } }
@keyframes verticalFlip { 0% { -webkit-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; }
100% { -webkit-transform: rotateX(0deg); -ms-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); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
100% { -webkit-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; } }
@-webkit-keyframes fade { 0% { opacity: 0; }
100% { opacity: 1; } }
@keyframes fade { 0% { opacity: 0; }
100% { opacity: 1; } }
@-webkit-keyframes fadeOut { 0% { opacity: 1; }
100% { opacity: 0; } }
@keyframes fadeOut { 0% { opacity: 1; }
100% { opacity: 0; } }
@-webkit-keyframes fadeUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-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(20px); transform: translateY(20px); } }
@keyframes fadeUpOut { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } }
@-webkit-keyframes fadeDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-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(-20px); transform: translateY(-20px); } }
@keyframes fadeDownOut { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } }
@-webkit-keyframes scale { 0% { opacity: 0; -webkit-transform: scale(0.7); transform: scale(0.7); }
100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } }
@keyframes scale { 0% { opacity: 0; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }
100% { opacity: 1; -webkit-transform: scale(1); -ms-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); -ms-transform: scale(1); transform: scale(1); }
100% { opacity: 0; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } }
|