From 85bacce8a85a27beff9dc319bb87408ac9c870fa Mon Sep 17 00:00:00 2001 From: Patrick Hennessy Date: Tue, 13 Jan 2015 20:36:02 -0600 Subject: [PATCH 1/6] Added bouncing apperance transitions for all directions. Animations from Animate.css --- .../default/modules/transition.overrides | 263 +++++++++++++++++- 1 file changed, 262 insertions(+), 1 deletion(-) diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index d280e7f2c..ec84cd500 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -442,4 +442,265 @@ transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } -} \ No newline at end of file +} + +/*-------------- + 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, 3000px, 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, -3000px, 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 bounceInRight { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: translate3d(3000px, 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 bounceInLeft { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: translate3d(-3000px, 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 bounceOutLeft { + 20% { + opacity: 1; + transform: translate3d(20px, 0, 0); + } + + 100% { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } +} +@keyframes bounceOutRight { + 20% { + opacity: 1; + transform: translate3d(-20px, 0, 0); + } + + 100% { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } +} + + + + + + + + + + + + + + + + From 15d005a37f744f3191175d7ff171ee242b48c91f Mon Sep 17 00:00:00 2001 From: Patrick Hennessy Date: Tue, 13 Jan 2015 23:47:42 -0600 Subject: [PATCH 2/6] Added direction to Slide transitions --- .../default/modules/transition.overrides | 135 +++++++++++------- 1 file changed, 83 insertions(+), 52 deletions(-) diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index ec84cd500..282d0d067 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -95,54 +95,6 @@ } - -/*-------------- - Slide ----------------*/ - -.slide.down.transition.in { - animation-name: slideIn; - transform-origin: 50% 0%; - -ms-transform-origin: 50% 0%; - -webkit-transform-origin: 50% 0%; -} -.slide.down.transition.out { - animation-name: slideOut; - transform-origin: 50% 0%; -} - -.slide.up.transition.in { - animation-name: slideIn; - transform-origin: 50% 100%; -} -.slide.up.transition.out { - animation-name: slideOut; - transform-origin: 50% 100%; -} - -@keyframes slideIn { - 0% { - opacity: 0; - transform: scaleY(0); - } - 100% { - opacity: 1; - transform: scaleY(1); - } -} -@keyframes slideOut { - 0% { - opacity: 1; - transform: scaleY(1); - } - 100% { - opacity: 0; - transform: scaleY(0); - } -} - - - /*-------------- Flips ---------------*/ @@ -566,7 +518,7 @@ transform: none; } } -@keyframes bounceInRight { +@keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } @@ -593,7 +545,7 @@ transform: none; } } -@keyframes bounceInLeft { +@keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } @@ -666,7 +618,7 @@ transform: translate3d(0, 2000px, 0); } } -@keyframes bounceOutLeft { +@keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(20px, 0, 0); @@ -677,7 +629,7 @@ transform: translate3d(-2000px, 0, 0); } } -@keyframes bounceOutRight { +@keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); @@ -689,6 +641,85 @@ } } +/*-------------- + Slide +---------------*/ +.transition.slide.in, +.transition.slide.in.down { + animation-name: slideInY; + transform-origin: top center; +} +.transition.slide.in.up { + animation-name: slideInY; + transform-origin: bottom center; +} +.transition.slide.in.left { + animation-name: slideInX; + transform-origin: center right; +} +.transition.slide.in.right { + animation-name: slideInX; + transform-origin: center left; +} +.transition.slide.out, +.transition.slide.out.down { + animation-name: slideOutY; + transform-origin: top center; +} +.transition.slide.out.up { + animation-name: slideOutY; + transform-origin: bottom center; +} +.transition.slide.out.left { + animation-name: slideOutX; + transform-origin: center right; +} +.transition.slide.out.right { + animation-name: slideOutX; + transform-origin: center left; +} + +@keyframes slideInY { + 0% { + opacity: 0; + transform: scaleY(0); + } + 100% { + opacity: 1; + transform: scaleY(1); + } +} +@keyframes slideInX { + 0% { + opacity: 0; + transform: scaleX(0); + } + 100% { + opacity: 1; + transform: scaleX(1); + } +} +@keyframes slideOutY { + 0% { + opacity: 1; + transform: scaleY(1); + } + 100% { + opacity: 0; + transform: scaleY(0); + } +} +@keyframes slideOutX { + 0% { + opacity: 1; + transform: scaleX(1); + } + 100% { + opacity: 0; + transform: scaleX(0); + } +} + From be51cea045cd5a7c19c772ce231ccdd58c94ff34 Mon Sep 17 00:00:00 2001 From: Patrick Hennessy Date: Tue, 13 Jan 2015 23:57:03 -0600 Subject: [PATCH 3/6] Added rubberband attention grabber from Animate.css --- .../default/modules/transition.overrides | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index 282d0d067..2c3e9fd76 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -22,6 +22,9 @@ .pulse.transition { animation-name: pulse; } +.rubberband.transition { + animation-name: rubberband; +} /* Flash */ @keyframes flash { @@ -95,6 +98,37 @@ } +/* Rubberband */ +@keyframes rubberband { + 0% { + transform: scale3d(1, 1, 1); + } + + 30% { + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + transform: scale3d(.95, 1.05, 1); + } + + 75% { + transform: scale3d(1.05, .95, 1); + } + + 100% { + transform: scale3d(1, 1, 1); + } +} + /*-------------- Flips ---------------*/ From cfe1617bc485eeeaae6cdb278c6806d94ed3732d Mon Sep 17 00:00:00 2001 From: Patrick Hennessy Date: Wed, 14 Jan 2015 00:17:44 -0600 Subject: [PATCH 4/6] Added fades for all directions --- .../default/modules/transition.overrides | 223 +++++++++++------- 1 file changed, 133 insertions(+), 90 deletions(-) diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index 2c3e9fd76..588db2e87 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -195,96 +195,6 @@ } } -/*-------------- - Fades ----------------*/ - -.fade.transition.in { - animation-name: fadeIn; -} -.fade.transition.out { - animation-name: fadeOut; -} - -.fade.up.transition.in { - animation-name: fadeUpIn; -} -.fade.up.transition.out { - animation-name: fadeUpOut; -} - -.fade.down.transition.in { - animation-name: fadeDownIn; -} -.fade.down.transition.out { - animation-name: fadeDownOut; -} - - -/* Fade */ -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -/* Fade Up */ -@keyframes fadeUpIn { - 0% { - opacity: 0; - transform: translateY(10%); - } - 100% { - opacity: 1; - transform: translateY(0%); - } -} - -@keyframes fadeUpOut { - 0% { - opacity: 1; - transform: translateY(0%); - } - 100% { - opacity: 0; - transform: translateY(10%); - } -} - -/* Fade Down */ -@keyframes fadeDownIn { - 0% { - opacity: 0; - transform: translateY(-10%); - } - 100% { - opacity: 1; - transform: translateY(0%); - } -} -@keyframes fadeDownOut { - 0% { - opacity: 1; - transform: translateY(0%); - } - 100% { - opacity: 0; - transform: translateY(-10%); - } -} - /*-------------- Scale ---------------*/ @@ -755,6 +665,139 @@ } +/*-------------- + Fades +---------------*/ + +.transition.fade.in { + animation-name: fadeIn; +} +.transition.fade.in.up { + animation-name: fadeInUp; +} +.transition.fade.in.down { + animation-name: fadeInDown; +} +.transition.fade.in.left { + animation-name: fadeInLeft; +} +.transition.fade.in.right { + animation-name: fadeInRight; +} + +.transition.fade.out { + animation-name: fadeOut; +} +.transition.fade.out.up { + animation-name: fadeOutUp; +} +.transition.fade.out.down { + animation-name: fadeOutDown; +} +.transition.fade.out.left { + animation-name: fadeOutLeft; +} +.transition.fade.out.right { + animation-name: fadeOutRight; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(10%); + } + 100% { + opacity: 1; + transform: translateY(0%); + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-10%); + } + 100% { + opacity: 1; + transform: translateY(0%); + } +} +@keyframes fadeInLeft { + 0% { + opacity: 0; + transform: translateX(10%); + } + 100% { + opacity: 1; + transform: translateX(0%); + } +} +@keyframes fadeInRight { + 0% { + opacity: 0; + transform: translateX(-10%); + } + 100% { + opacity: 1; + transform: translateX(0%); + } +} + +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeOutUp { + 0% { + opacity: 1; + transform: translateY(0%); + } + 100% { + opacity: 0; + transform: translateY(10%); + } +} +@keyframes fadeOutDown { + 0% { + opacity: 1; + transform: translateY(0%); + } + 100% { + opacity: 0; + transform: translateY(-10%); + } +} +@keyframes fadeOutLeft { + 0% { + opacity: 1; + transform: translateX(0%); + } + 100% { + opacity: 0; + transform: translateX(-10%); + } +} +@keyframes fadeOutRight { + 0% { + opacity: 1; + transform: translateX(0%); + } + 100% { + opacity: 0; + transform: translateX(10%); + } +} From 6d4a7df3b6b1fa31676b92fa59d55963bdf7dc40 Mon Sep 17 00:00:00 2001 From: Patrick Hennessy Date: Thu, 15 Jan 2015 16:28:25 -0600 Subject: [PATCH 5/6] Added 'swing' in and out transition --- .../default/modules/transition.overrides | 126 ++++++++++++++++++ 1 file changed, 126 insertions(+) diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index 588db2e87..6197b9886 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -799,14 +799,140 @@ } } +/*-------------- + Swing +---------------*/ + +@keyframes swingInX { + 0% { + transform: perspective(1000px) rotateX(-90deg); + opacity: 0; + } + + 40% { + transform: perspective(1000px) rotateX(20deg); + } + + 60% { + transform: perspective(1000px) rotateX(-10deg); + } + + 80% { + transform: perspective(1000px) rotateX(5deg); + opacity: 1; + } + + 100% { + transform: perspective(1000px) rotateX(0deg); + } +} +@keyframes swingInY { + 0% { + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } + + 40% { + transform: perspective(1000px) rotateY(20deg); + } + + 60% { + transform: perspective(1000px) rotateY(-10deg); + } + + 80% { + transform: perspective(1000px) rotateY(5deg); + opacity: 1; + } + 100% { + transform: perspective(1000px) rotateY(0deg); + } +} +@keyframes swingOutX { + 0% { + transform: perspective(1000px) rotateX(0deg); + } + 30% { + transform: perspective(1000px) rotateX(20deg); + opacity:1; + } + 100% { + transform: perspective(1000px) rotateX(-90deg); + opacity: 0; + } +} +@keyframes swingOutY { + 0% { + transform: perspective(1000px) rotateY(0deg); + } + 30% { + transform: perspective(1000px) rotateY(20deg); + opacity:1; + } + 100% { + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } +} +.transition.swing, +.transition.swing.in, +.transition.swing.in.down{ + backface-visibility: visible !important; + transform-origin:top center; + transition-timing-function: ease-in; + animation-name: swingInX; +} +.transition.swing.in.up{ + backface-visibility: visible !important; + transform-origin:bottom center; + transition-timing-function: ease-in; + animation-name: swingInX; +} +.transition.swing.in.left{ + backface-visibility: visible !important; + transform-origin:center right; + transition-timing-function: ease-in; + animation-name: swingInY; +} +.transition.swing.in.right{ + backface-visibility: visible !important; + transform-origin:center left; + transition-timing-function: ease-in; + animation-name: swingInY; +} +.transition.swing.out.down, +.transition.swing.out{ + backface-visibility: visible !important; + transform-origin:top center; + transition-timing-function: ease-in; + animation-name: swingOutX; +} +.transition.swing.out.up{ + backface-visibility: visible !important; + transform-origin:bottom center; + transition-timing-function: ease-in; + animation-name: swingOutX; +} +.transition.swing.out.left{ + backface-visibility: visible !important; + transform-origin:center right; + transition-timing-function: ease-in; + animation-name: swingOutY; +} +.transition.swing.out.right{ + backface-visibility: visible !important; + transform-origin:center left; + transition-timing-function: ease-in; + animation-name: swingOutY; +} From 22097b96069bbf3db684fe5b4531c8cf0c39ce66 Mon Sep 17 00:00:00 2001 From: Patrick Hennessy Date: Thu, 15 Jan 2015 16:35:28 -0600 Subject: [PATCH 6/6] Renamed 'rubberband' transition to 'jiggle' --- src/themes/default/modules/transition.overrides | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index 6197b9886..2dae30e51 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -22,8 +22,8 @@ .pulse.transition { animation-name: pulse; } -.rubberband.transition { - animation-name: rubberband; +.jiggle.transition { + animation-name: jiggle; } /* Flash */ @@ -99,7 +99,7 @@ } /* Rubberband */ -@keyframes rubberband { +@keyframes jiggle { 0% { transform: scale3d(1, 1, 1); } @@ -914,7 +914,6 @@ transition-timing-function: ease-in; animation-name: swingOutX; } - .transition.swing.out.up{ backface-visibility: visible !important; transform-origin:bottom center;