diff --git a/src/modules/transition.less b/src/modules/transition.less index 92ec51e31..5b55bb184 100755 --- a/src/modules/transition.less +++ b/src/modules/transition.less @@ -14,25 +14,10 @@ .ui.transition { - -webkit-animation-iteration-count: 1; - -moz-animation-iteration-count: 1; - -ms-animation-iteration-count: 1; - -o-animation-iteration-count: 1; animation-iteration-count: 1; - - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -ms-animation-duration: 1s; - -o-animation-duration: 1s; animation-duration: 1s; animation-timing-function: ease; - -webkit-animation-timing-function: ease; - - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - -ms-animation-fill-mode: both; - -o-animation-fill-mode: both; animation-fill-mode: both; } @@ -41,16 +26,7 @@ *******************************/ .ui.animating.transition { - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - -o-backface-visibility: hidden; backface-visibility: hidden; - - -webkit-transform: translateZ(0); - -moz-transform: translateZ(0); - -ms-transform: translateZ(0); - -o-transform: translateZ(0); transform: translateZ(0); } @@ -74,10 +50,6 @@ /* Disabled */ .ui.disabled.transition { - -webkit-animation-play-state: paused; - -moz-animation-play-state: paused; - -ms-animation-play-state: paused; - -o-animation-play-state: paused; animation-play-state: paused; } @@ -86,10 +58,6 @@ *******************************/ .ui.looping.transition { - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - -ms-animation-iteration-count: infinite; - -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } @@ -103,34 +71,19 @@ ---------------*/ .ui.flash.transition { - -webkit-animation-name: flash; - -moz-animation-name: flash; - -o-animation-name: flash; animation-name: flash; } .ui.shake.transition { - -webkit-animation-name: shake; - -moz-animation-name: shake; - -o-animation-name: shake; animation-name: shake; } .ui.bounce.transition { - -webkit-animation-name: bounce; - -moz-animation-name: bounce; - -o-animation-name: bounce; animation-name: bounce; } .ui.tada.transition { - -webkit-animation-name: tada; - -moz-animation-name: tada; - -o-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ .ui.pulse.transition { - -webkit-animation-name: pulse; - -moz-animation-name: pulse; - -o-animation-name: pulse; animation-name: pulse; } /*-------------- @@ -144,28 +97,16 @@ } .ui.horizontal.flip.transition.in, .ui.horizontal.flip.transition.out { - -webkit-animation-name: horizontalFlip; - -moz-animation-name: horizontalFlip; - -o-animation-name: horizontalFlip; animation-name: horizontalFlip; } .ui.horizontal.flip.transition.out { - -webkit-animation-name: horizontalFlipOut; - -moz-animation-name: horizontalFlipOut; - -o-animation-name: horizontalFlipOut; animation-name: horizontalFlipOut; } .ui.vertical.flip.transition.in, .ui.vertical.flip.transition.out { - -webkit-animation-name: verticalFlip; - -moz-animation-name: verticalFlip; - -o-animation-name: verticalFlip; animation-name: verticalFlip; } .ui.vertical.flip.transition.out { - -webkit-animation-name: verticalFlipOut; - -moz-animation-name: verticalFlipOut; - -o-animation-name: verticalFlipOut; animation-name: verticalFlipOut; } @@ -174,41 +115,23 @@ ---------------*/ .ui.fade.transition.in { - -webkit-animation-name: fade; - -moz-animation-name: fade; - -o-animation-name: fade; animation-name: fade; } .ui.fade.transition.out { - -webkit-animation-name: fadeOut; - -moz-animation-name: fadeOut; - -o-animation-name: fadeOut; animation-name: fadeOut; } .ui.fade.up.transition.in { - -webkit-animation-name: fadeUp; - -moz-animation-name: fadeUp; - -o-animation-name: fadeUp; animation-name: fadeUp; } .ui.fade.up.transition.out { - -webkit-animation-name: fadeUpOut; - -moz-animation-name: fadeUpOut; - -o-animation-name: fadeUpOut; animation-name: fadeUpOut; } .ui.fade.down.transition.in { - -webkit-animation-name: fadeDown; - -moz-animation-name: fadeDown; - -o-animation-name: fadeDown; animation-name: fadeDown; } .ui.fade.down.transition.out { - -webkit-animation-name: fadeDownOut; - -moz-animation-name: fadeDownOut; - -o-animation-name: fadeDownOut; animation-name: fadeDownOut; } @@ -217,15 +140,9 @@ ---------------*/ .ui.scale.transition.in { - -webkit-animation-name: scale; - -moz-animation-name: scale; - -o-animation-name: scale; animation-name: scale; } .ui.scale.transition.out { - -webkit-animation-name: scaleOut; - -moz-animation-name: scaleOut; - -o-animation-name: scaleOut; animation-name: scaleOut; } @@ -236,18 +153,12 @@ ---------------*/ .ui.slide.down.transition.in { - -webkit-animation-name: slide; - -moz-animation-name: slide; - -o-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; - -moz-animation-name: slideOut; - -o-animation-name: slideOut; animation-name: slideOut; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; @@ -255,45 +166,18 @@ } .ui.slide.up.transition.in { - -webkit-animation-name: slide; - -moz-animation-name: slide; - -o-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; - -moz-animation-name: slideOut; - -o-animation-name: slideOut; animation-name: slideOut; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } - -@-moz-keyframes slide { - 0% { - opacity: 0; - -moz-transform: scaleY(0); - } - 100% { - opacity: 1; - -moz-transform: scaleY(1); - } -} -@-webkit-keyframes slide { - 0% { - opacity: 0; - -webkit-transform: scaleY(0); - } - 100% { - opacity: 1; - -webkit-transform: scaleY(1); - } -} @keyframes slide { 0% { opacity: 0; @@ -304,27 +188,6 @@ transform: scaleY(1); } } - -@-moz-keyframes slideOut { - 0% { - opacity: 1; - -moz-transform: scaleY(1); - } - 100% { - opacity: 0; - -moz-transform: scaleY(0); - } -} -@-webkit-keyframes slideOut { - 0% { - opacity: 1; - -webkit-transform: scaleY(1); - } - 100% { - opacity: 0; - -webkit-transform: scaleY(0); - } -} @keyframes slideOut { 0% { opacity: 1; @@ -345,30 +208,6 @@ ---------------*/ /* Flash */ -@-webkit-keyframes flash { - 0%, 50%, 100% { - opacity: 1; - } - 25%, 75% { - opacity: 0; - } -} -@-moz-keyframes flash { - 0%, 50%, 100% { - opacity: 1; - } - 25%, 75% { - opacity: 0; - } -} -@-o-keyframes flash { - 0%, 50%, 100% { - opacity: 1; - } - 25%, 75% { - opacity: 0; - } -} @keyframes flash { 0%, 50%, 100% { opacity: 1; @@ -379,39 +218,6 @@ } /* Shake */ -@-webkit-keyframes shake { - 0%, 100% { - -webkit-transform: translateX(0); - } - 10%, 30%, 50%, 70%, 90% { - -webkit-transform: translateX(-10px); - } - 20%, 40%, 60%, 80% { - -webkit-transform: translateX(10px); - } -} -@-moz-keyframes shake { - 0%, 100% { - -moz-transform: translateX(0); - } - 10%, 30%, 50%, 70%, 90% { - -moz-transform: translateX(-10px); - } - 20%, 40%, 60%, 80% { - -moz-transform: translateX(10px); - } -} -@-o-keyframes shake { - 0%, 100% { - -o-transform: translateX(0); - } - 10%, 30%, 50%, 70%, 90% { - -o-transform: translateX(-10px); - } - 20%, 40%, 60%, 80% { - -o-transform: translateX(10px); - } -} @keyframes shake { 0%, 100% { transform: translateX(0); @@ -425,39 +231,6 @@ } /* Bounce */ -@-webkit-keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - -webkit-transform: translateY(0); - } - 40% { - -webkit-transform: translateY(-30px); - } - 60% { - -webkit-transform: translateY(-15px); - } -} -@-moz-keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - -moz-transform: translateY(0); - } - 40% { - -moz-transform: translateY(-30px); - } - 60% { - -moz-transform: translateY(-15px); - } -} -@-o-keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - -o-transform: translateY(0); - } - 40% { - -o-transform: translateY(-30px); - } - 60% { - -o-transform: translateY(-15px); - } -} @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); @@ -471,58 +244,6 @@ } /* Tada */ -@-webkit-keyframes tada { - 0% { - -webkit-transform: scale(1); - } - 10%, 20% { - -webkit-transform: scale(0.9) rotate(-3deg); - } - 30%, 50%, 70%, 90% { - -webkit-transform: scale(1.1) rotate(3deg); - } - 40%, 60%, 80% { - -webkit-transform: scale(1.1) rotate(-3deg); - } - 100% { - -webkit-transform: scale(1) rotate(0); - } -} -@-moz-keyframes tada { - 0% { - -moz-transform: scale(1); - } - 10%, 20% { - -moz-transform: scale(0.9) rotate(-3deg); - } - 30%, 50%, 70%, 90% { - -moz-transform: scale(1.1) rotate(3deg); - } - 40%, 60%, 80% { - -moz-transform: scale(1.1) rotate(-3deg); - } - 100% { - -moz-transform: scale(1) rotate(0); - } -} -@-o-keyframes tada { - 0% { - -o-transform: scale(1); - } - 10%, 20% { - -o-transform: scale(0.9) rotate(-3deg); - } - 30%, 50%, 70%, 90% { - -o-transform: scale(1.1) rotate(3deg); - } - 40%, 60%, 80% { - -o-transform: scale(1.1) rotate(-3deg); - } - 100% { - -o-transform: scale(1) rotate(0); - } -} - @keyframes tada { 0% { transform: scale(1); @@ -541,51 +262,7 @@ } } -@-webkit-keyframes pulse { - 0% { - -webkit-transform: scale(1); - opacity: 1; - } - 50% { - -webkit-transform: scale(0.9); - opacity: 0.7; - } - 100% { - -webkit-transform: scale(1); - opacity: 1; - } -} - -@-o-keyframes pulse { - 0% { - -o-transform: scale(1); - opacity: 1; - } - 50% { - -o-transform: scale(0.9); - opacity: 0.7; - } - 100% { - -o-transform: scale(1); - opacity: 1; - } -} - -@-moz-keyframes pulse { - 0% { - -moz-transform: scale(1); - opacity: 1; - } - 50% { - -moz-transform: scale(0.9); - opacity: 0.7; - } - 100% { - -moz-transform: scale(1); - opacity: 1; - } -} - +/* Pulse */ @keyframes pulse { 0% { transform: scale(1); @@ -608,36 +285,6 @@ ---------------*/ /* Horizontal */ -@-webkit-keyframes horizontalFlip { - 0% { - -webkit-transform: rotateY(-90deg); - opacity: 0; - } - 100% { - -webkit-transform: rotateY(0deg); - opacity: 1; - } -} -@-moz-keyframes horizontalFlip { - 0% { - -moz-transform: rotateY(-90deg); - opacity: 0; - } - 100% { - -moz-transform: rotateY(0deg); - opacity: 1; - } -} -@-o-keyframes horizontalFlip { - 0% { - -o-transform: rotateY(-90deg); - opacity: 0; - } - 100% { - -o-transform: rotateY(0deg); - opacity: 1; - } -} @keyframes horizontalFlip { 0% { transform: rotateY(-90deg); @@ -649,36 +296,6 @@ } } /* Horizontal */ -@-webkit-keyframes horizontalFlipOut { - 0% { - -webkit-transform: rotateY(0deg); - opacity: 0; - } - 100% { - -webkit-transform: rotateY(90deg); - opacity: 1; - } -} -@-moz-keyframes horizontalFlipOut { - 0% { - -moz-transform: rotateY(0deg); - opacity: 0; - } - 100% { - -moz-transform: rotateY(90deg); - opacity: 1; - } -} -@-o-keyframes horizontalFlipOut { - 0% { - -o-transform: rotateY(0deg); - opacity: 0; - } - 100% { - -o-transform: rotateY(90deg); - opacity: 1; - } -} @keyframes horizontalFlipOut { 0% { transform: rotateY(0deg); @@ -691,36 +308,6 @@ } /* Vertical */ -@-webkit-keyframes verticalFlip { - 0% { - -webkit-transform: rotateX(-90deg); - opacity: 0; - } - 100% { - -webkit-transform: rotateX(0deg); - opacity: 1; - } -} -@-moz-keyframes verticalFlip { - 0% { - -moz-transform: rotateX(-90deg); - opacity: 0; - } - 100% { - -moz-transform: rotateX(0deg); - opacity: 1; - } -} -@-o-keyframes verticalFlip { - 0% { - -o-transform: rotateX(-90deg); - opacity: 0; - } - 100% { - -o-transform: rotateX(0deg); - opacity: 1; - } -} @keyframes verticalFlip { 0% { transform: rotateX(-90deg); @@ -731,36 +318,6 @@ opacity: 1; } } -@-webkit-keyframes verticalFlipOut { - 0% { - -webkit-transform: rotateX(0deg); - opacity: 1; - } - 100% { - -webkit-transform: rotateX(-90deg); - opacity: 0; - } -} -@-moz-keyframes verticalFlipOut { - 0% { - -moz-transform: rotateX(0deg); - opacity: 1; - } - 100% { - -moz-transform: rotateX(-90deg); - opacity: 0; - } -} -@-o-keyframes verticalFlipOut { - 0% { - -o-transform: rotateX(0deg); - opacity: 1; - } - 100% { - -o-transform: rotateX(-90deg); - opacity: 0; - } -} @keyframes verticalFlipOut { 0% { transform: rotateX(0deg); @@ -777,30 +334,6 @@ ---------------*/ /* Fade */ -@-webkit-keyframes fade { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-moz-keyframes fade { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@-o-keyframes fade { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} @keyframes fade { 0% { opacity: 0; @@ -810,30 +343,6 @@ } } -@-webkit-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-moz-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-o-keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} @keyframes fadeOut { 0% { opacity: 1; @@ -844,36 +353,6 @@ } /* Fade Up */ -@-webkit-keyframes fadeUp { - 0% { - opacity: 0; - -webkit-transform: translateY(20px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} -@-moz-keyframes fadeUp { - 0% { - opacity: 0; - -moz-transform: translateY(20px); - } - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} -@-o-keyframes fadeUp { - 0% { - opacity: 0; - -o-transform: translateY(20px); - } - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} @keyframes fadeUp { 0% { opacity: 0; @@ -885,36 +364,6 @@ } } -@-webkit-keyframes fadeUpOut { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - 100% { - opacity: 0; - -webkit-transform: translateY(20px); - } -} -@-moz-keyframes fadeUpOut { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - 100% { - opacity: 0; - -moz-transform: translateY(20px); - } -} -@-o-keyframes fadeUpOut { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - 100% { - opacity: 0; - -o-transform: translateY(20px); - } -} @keyframes fadeUpOut { 0% { opacity: 1; @@ -927,36 +376,6 @@ } /* Fade Down */ -@-webkit-keyframes fadeDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-20px); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} -@-moz-keyframes fadeDown { - 0% { - opacity: 0; - -moz-transform: translateY(-20px); - } - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} -@-o-keyframes fadeDown { - 0% { - opacity: 0; - -o-transform: translateY(-20px); - } - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} @keyframes fadeDown { 0% { opacity: 0; @@ -967,38 +386,6 @@ transform: translateY(0); } } - - -@-webkit-keyframes fadeDownOut { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - 100% { - opacity: 0; - -webkit-transform: translateY(-20px); - } -} -@-moz-keyframes fadeDownOut { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - 100% { - opacity: 0; - -moz-transform: translateY(-20px); - } -} -@-o-keyframes fadeDownOut { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - 100% { - opacity: 0; - -o-transform: translateY(-20px); - } -} @keyframes fadeDownOut { 0% { opacity: 1; @@ -1015,36 +402,6 @@ ---------------*/ /* Scale */ -@-webkit-keyframes scale { - 0% { - opacity: 0; - -webkit-transform: scale(0.7); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - } -} -@-moz-keyframes scale { - 0% { - opacity: 0; - -moz-transform: scale(0.7); - } - 100% { - opacity: 1; - -moz-transform: scale(1); - } -} -@-o-keyframes scale { - 0% { - opacity: 0; - -o-transform: scale(0.7); - } - 100% { - opacity: 1; - -o-transform: scale(1); - } -} @keyframes scale { 0% { opacity: 0; @@ -1055,37 +412,6 @@ transform: scale(1); } } - -@-webkit-keyframes scaleOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(0.7); - } -} -@-moz-keyframes scaleOut { - 0% { - opacity: 1; - -moz-transform: scale(1); - } - 100% { - opacity: 0; - -moz-transform: scale(0.7); - } -} -@-o-keyframes scaleOut { - 0% { - opacity: 1; - -o-transform: scale(1); - } - 100% { - opacity: 0; - -o-transform: scale(0.7); - } -} @keyframes scaleOut { 0% { opacity: 1;