.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; right: -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); } }