diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index 27a685ef6..90c67f46e 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -129,218 +129,6 @@ Transitions *******************************/ -/*-------------- - Bounce ----------------*/ - -.transition.bounce.in { - animation-name: bounceIn; - animation-timing-function: ease; -} -.transition.bounce.in.up { - animation-name: bounceInUp; -} -.transition.bounce.in.down { - animation-name: bounceInDown; -} -.transition.bounce.in.right { - animation-name: bounceInRight; -} -.transition.bounce.in.left { - animation-name: bounceInLeft; -} -.transition.bounce.out { - animation-name: bounceOut; - animation-timing-function: ease; -} -.transition.bounce.out.up { - animation-name: bounceOutUp; -} -.transition.bounce.out.down { - animation-name: bounceOutDown; -} -.transition.bounce.out.right { - animation-name: bounceOutRight; -} -.transition.bounce.out.left { - animation-name: bounceOutLeft; -} - -@keyframes bounceIn { - 0%, 20%, 40%, 60%, 80%, 100% { - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% { - opacity: 0; - transform: scale3d(.3, .3, .3); - } - 20% { - transform: scale3d(1.1, 1.1, 1.1); - } - 40% { - transform: scale3d(.9, .9, .9); - } - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - } - 80% { - transform: scale3d(.97, .97, .97); - } - 100% { - opacity: 1; - transform: scale3d(1, 1, 1); - } -} -@keyframes bounceInUp { - 0%, 60%, 75%, 90%, 100% { - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% { - opacity: 0; - transform: translate3d(0, 1500px, 0); - } - 60% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } - 75% { - transform: translate3d(0, 10px, 0); - } - 90% { - transform: translate3d(0, -5px, 0); - } - 100% { - transform: translate3d(0, 0, 0); - } -} -@keyframes bounceInDown { - 0%, 60%, 75%, 90%, 100% { - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% { - opacity: 0; - transform: translate3d(0, -1500px, 0); - } - 60% { - opacity: 1; - transform: translate3d(0, 25px, 0); - } - 75% { - transform: translate3d(0, -10px, 0); - } - 90% { - transform: translate3d(0, 5px, 0); - } - 100% { - transform: none; - } -} -@keyframes bounceInLeft { - 0%, 60%, 75%, 90%, 100% { - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% { - opacity: 0; - transform: translate3d(1500px, 0, 0); - } - 60% { - opacity: 1; - transform: translate3d(-25px, 0, 0); - } - 75% { - transform: translate3d(10px, 0, 0); - } - 90% { - transform: translate3d(-5px, 0, 0); - } - 100% { - transform: none; - } -} -@keyframes bounceInRight { - 0%, 60%, 75%, 90%, 100% { - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% { - opacity: 0; - transform: translate3d(-1500px, 0, 0); - } - 60% { - opacity: 1; - transform: translate3d(25px, 0, 0); - } - 75% { - transform: translate3d(-10px, 0, 0); - } - 90% { - transform: translate3d(5px, 0, 0); - } - 100% { - transform: none; - } -} - -@keyframes bounceOut { - 20% { - transform: scale3d(.9, .9, .9); - } - 50%, 55% { - opacity: 1; - transform: scale3d(1.1, 1.1, 1.1); - } - 100% { - opacity: 0; - transform: scale3d(.3, .3, .3); - } -} -@keyframes bounceOutUp { - 20% { - transform: translate3d(0, -10px, 0); - } - 40%, 45% { - opacity: 1; - transform: translate3d(0, 20px, 0); - } - 100% { - opacity: 0; - transform: translate3d(0, -2000px, 0); - } -} -@keyframes bounceOutDown { - 20% { - transform: translate3d(0, 10px, 0); - } - 40%, 45% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } - 100% { - opacity: 0; - transform: translate3d(0, 2000px, 0); - } -} -@keyframes bounceOutRight { - 20% { - opacity: 1; - transform: translate3d(20px, 0, 0); - } - 100% { - opacity: 0; - transform: translate3d(-2000px, 0, 0); - } -} -@keyframes bounceOutLeft { - 20% { - opacity: 1; - transform: translate3d(-20px, 0, 0); - } - 100% { - opacity: 0; - transform: translate3d(2000px, 0, 0); - } -} - /*-------------- Browse ---------------*/ @@ -455,7 +243,7 @@ } /*-------------- - Fades + Fade ---------------*/ .transition.fade.in { @@ -687,6 +475,218 @@ } } +/*-------------- + Fly +---------------*/ + +.transition.fly.in { + animation-name: flyIn; + animation-timing-function: ease; +} +.transition.fly.in.up { + animation-name: flyInUp; +} +.transition.fly.in.down { + animation-name: flyInDown; +} +.transition.fly.in.right { + animation-name: flyInRight; +} +.transition.fly.in.left { + animation-name: flyInLeft; +} +.transition.fly.out { + animation-name: flyOut; + animation-timing-function: ease; +} +.transition.fly.out.up { + animation-name: flyOutUp; +} +.transition.fly.out.down { + animation-name: flyOutDown; +} +.transition.fly.out.right { + animation-name: flyOutRight; +} +.transition.fly.out.left { + animation-name: flyOutLeft; +} + +@keyframes flyIn { + 0%, 20%, 40%, 60%, 80%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + 20% { + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + transform: scale3d(.9, .9, .9); + } + 60% { + opacity: 1; + transform: scale3d(1.03, 1.03, 1.03); + } + 80% { + transform: scale3d(.97, .97, .97); + } + 100% { + opacity: 1; + transform: scale3d(1, 1, 1); + } +} +@keyframes flyInUp { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { + opacity: 0; + transform: translate3d(0, 1500px, 0); + } + 60% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } + 75% { + transform: translate3d(0, 10px, 0); + } + 90% { + transform: translate3d(0, -5px, 0); + } + 100% { + transform: translate3d(0, 0, 0); + } +} +@keyframes flyInDown { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { + opacity: 0; + transform: translate3d(0, -1500px, 0); + } + 60% { + opacity: 1; + transform: translate3d(0, 25px, 0); + } + 75% { + transform: translate3d(0, -10px, 0); + } + 90% { + transform: translate3d(0, 5px, 0); + } + 100% { + transform: none; + } +} +@keyframes flyInLeft { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { + opacity: 0; + transform: translate3d(1500px, 0, 0); + } + 60% { + opacity: 1; + transform: translate3d(-25px, 0, 0); + } + 75% { + transform: translate3d(10px, 0, 0); + } + 90% { + transform: translate3d(-5px, 0, 0); + } + 100% { + transform: none; + } +} +@keyframes flyInRight { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { + opacity: 0; + transform: translate3d(-1500px, 0, 0); + } + 60% { + opacity: 1; + transform: translate3d(25px, 0, 0); + } + 75% { + transform: translate3d(-10px, 0, 0); + } + 90% { + transform: translate3d(5px, 0, 0); + } + 100% { + transform: none; + } +} + +@keyframes flyOut { + 20% { + transform: scale3d(.9, .9, .9); + } + 50%, 55% { + opacity: 1; + transform: scale3d(1.1, 1.1, 1.1); + } + 100% { + opacity: 0; + transform: scale3d(.3, .3, .3); + } +} +@keyframes flyOutUp { + 20% { + transform: translate3d(0, -10px, 0); + } + 40%, 45% { + opacity: 1; + transform: translate3d(0, 20px, 0); + } + 100% { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } +} +@keyframes flyOutDown { + 20% { + transform: translate3d(0, 10px, 0); + } + 40%, 45% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } + 100% { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } +} +@keyframes flyOutRight { + 20% { + opacity: 1; + transform: translate3d(20px, 0, 0); + } + 100% { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } +} +@keyframes flyOutLeft { + 20% { + opacity: 1; + transform: translate3d(-20px, 0, 0); + } + 100% { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } +} + /*-------------- Slide ---------------*/