From d63e0224858149abb4e7b5d1b11815e9533c7ba7 Mon Sep 17 00:00:00 2001 From: Daniel Eden Date: Sun, 6 Jul 2014 13:32:34 -0700 Subject: [PATCH] More rewrites Optimising for hardware acceleration, removing duplicate animations (slides), bumping tag --- animate-config.json | 13 +- animate.css | 2282 +++++++---------- animate.min.css | 2 +- package.json | 2 +- source/attention_seekers/bounce.css | 20 +- source/attention_seekers/pulse.css | 6 +- source/attention_seekers/rubberBand.css | 20 +- source/attention_seekers/shake.css | 6 +- source/attention_seekers/swing.css | 10 +- source/attention_seekers/tada.css | 10 +- source/attention_seekers/wobble.css | 14 +- source/bouncing_entrances/bounceIn.css | 16 +- source/bouncing_entrances/bounceInDown.css | 14 +- source/bouncing_entrances/bounceInLeft.css | 14 +- source/bouncing_entrances/bounceInRight.css | 14 +- source/bouncing_entrances/bounceInUp.css | 14 +- source/bouncing_exits/bounceOut.css | 14 +- source/bouncing_exits/bounceOutDown.css | 10 +- source/bouncing_exits/bounceOutLeft.css | 8 +- source/bouncing_exits/bounceOutRight.css | 8 +- source/bouncing_exits/bounceOutUp.css | 10 +- source/fading_entrances/fadeInDown.css | 4 +- source/fading_entrances/fadeInDownBig.css | 4 +- source/fading_entrances/fadeInLeft.css | 4 +- source/fading_entrances/fadeInLeftBig.css | 4 +- source/fading_entrances/fadeInRight.css | 4 +- source/fading_entrances/fadeInRightBig.css | 4 +- source/fading_entrances/fadeInUp.css | 4 +- source/fading_entrances/fadeInUpBig.css | 4 +- source/fading_exits/fadeOutDown.css | 3 +- source/fading_exits/fadeOutDownBig.css | 3 +- source/fading_exits/fadeOutLeft.css | 3 +- source/fading_exits/fadeOutLeftBig.css | 3 +- source/fading_exits/fadeOutRight.css | 3 +- source/fading_exits/fadeOutRightBig.css | 3 +- source/fading_exits/fadeOutUp.css | 3 +- source/fading_exits/fadeOutUpBig.css | 3 +- source/flippers/flip.css | 10 +- source/flippers/flipInX.css | 10 +- source/flippers/flipInY.css | 10 +- source/flippers/flipOutX.css | 6 +- source/flippers/flipOutY.css | 6 +- source/lightspeed/lightSpeedIn.css | 8 +- source/lightspeed/lightSpeedOut.css | 3 +- source/rotating_entrances/rotateIn.css | 8 +- .../rotating_entrances/rotateInDownLeft.css | 4 +- .../rotating_entrances/rotateInDownRight.css | 4 +- source/rotating_entrances/rotateInUpLeft.css | 4 +- source/rotating_entrances/rotateInUpRight.css | 4 +- source/rotating_exits/rotateOut.css | 7 +- source/rotating_exits/rotateOutDownLeft.css | 3 +- source/rotating_exits/rotateOutDownRight.css | 3 +- source/rotating_exits/rotateOutUpLeft.css | 3 +- source/rotating_exits/rotateOutUpRight.css | 3 +- source/sliders/slideInDown.css | 14 - source/sliders/slideInLeft.css | 14 - source/sliders/slideInRight.css | 14 - source/sliders/slideInUp.css | 15 - source/sliders/slideOutDown.css | 14 - source/sliders/slideOutLeft.css | 14 - source/sliders/slideOutRight.css | 14 - source/sliders/slideOutUp.css | 14 - source/specials/hinge.css | 15 +- source/specials/rollIn.css | 4 +- source/specials/rollOut.css | 3 +- source/zooming_entrances/zoomIn.css | 6 +- source/zooming_entrances/zoomInDown.css | 12 +- source/zooming_entrances/zoomInLeft.css | 12 +- source/zooming_entrances/zoomInRight.css | 12 +- source/zooming_entrances/zoomInUp.css | 12 +- source/zooming_exits/zoomOut.css | 9 +- source/zooming_exits/zoomOutDown.css | 11 +- source/zooming_exits/zoomOutLeft.css | 9 +- source/zooming_exits/zoomOutRight.css | 9 +- source/zooming_exits/zoomOutUp.css | 13 +- 75 files changed, 1235 insertions(+), 1664 deletions(-) delete mode 100644 source/sliders/slideInDown.css delete mode 100644 source/sliders/slideInLeft.css delete mode 100644 source/sliders/slideInRight.css delete mode 100644 source/sliders/slideInUp.css delete mode 100644 source/sliders/slideOutDown.css delete mode 100644 source/sliders/slideOutLeft.css delete mode 100644 source/sliders/slideOutRight.css delete mode 100644 source/sliders/slideOutUp.css diff --git a/animate-config.json b/animate-config.json index 365bada..21e473d 100644 --- a/animate-config.json +++ b/animate-config.json @@ -80,17 +80,6 @@ "rotateOutUpRight": true }, - "sliders": { - "slideInDown": true, - "slideInLeft": true, - "slideInRight": true, - "slideOutLeft": true, - "slideOutRight": true, - "slideOutUp": true, - "slideInUp": true, - "slideOutDown": true - }, - "specials": { "hinge": true, "rollIn": true, @@ -104,7 +93,7 @@ "zoomInRight": true, "zoomInUp": true }, - + "zooming_exits": { "zoomOut": true, "zoomOutDown": true, diff --git a/animate.css b/animate.css index 191d103..19f4395 100755 --- a/animate.css +++ b/animate.css @@ -25,45 +25,71 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - -webkit-transform: translateY(0); - transform: translateY(0); + 0%, 20%, 53%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); } - 40% { - -webkit-transform: translateY(-30px); - transform: translateY(-30px); + 40%, 43% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); } - 60% { - -webkit-transform: translateY(-15px); - transform: translateY(-15px); + 70% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + + 90% { + -webkit-transform: translate3d(0,-4px,0); + transform: translate3d(0,-4px,0); } } @keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + 0%, 20%, 53%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + -webkit-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); } - 40% { - -webkit-transform: translateY(-30px); - -ms-transform: translateY(-30px); - transform: translateY(-30px); + 40%, 43% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -30px, 0); + -ms-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); } - 60% { - -webkit-transform: translateY(-15px); - -ms-transform: translateY(-15px); - transform: translateY(-15px); + 70% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -15px, 0); + -ms-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + + 90% { + -webkit-transform: translate3d(0,-4px,0); + -ms-transform: translate3d(0,-4px,0); + transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; + -webkit-transform-origin: center bottom; + -ms-transform-origin: center bottom; + transform-origin: center bottom; } @-webkit-keyframes flash { @@ -95,38 +121,38 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes pulse { 0% { - -webkit-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } 50% { - -webkit-transform: scale(1.1); - transform: scale(1.1); + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); } 100% { - -webkit-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + -ms-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } 50% { - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); + -webkit-transform: scale3d(1.05, 1.05, 1.05); + -ms-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); } 100% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + -ms-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } @@ -137,60 +163,82 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes rubberBand { 0% { - -webkit-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } 30% { - -webkit-transform: scaleX(1.25) scaleY(0.75); - transform: scaleX(1.25) scaleY(0.75); + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); } 40% { - -webkit-transform: scaleX(0.75) scaleY(1.25); - transform: scaleX(0.75) scaleY(1.25); + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); } - 60% { - -webkit-transform: scaleX(1.15) scaleY(0.85); - transform: scaleX(1.15) scaleY(0.85); + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .95, 1); } 100% { - -webkit-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + -ms-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } 30% { - -webkit-transform: scaleX(1.25) scaleY(0.75); - -ms-transform: scaleX(1.25) scaleY(0.75); - transform: scaleX(1.25) scaleY(0.75); + -webkit-transform: scale3d(1.25, 0.75, 1); + -ms-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); } 40% { - -webkit-transform: scaleX(0.75) scaleY(1.25); - -ms-transform: scaleX(0.75) scaleY(1.25); - transform: scaleX(0.75) scaleY(1.25); + -webkit-transform: scale3d(0.75, 1.25, 1); + -ms-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); } - 60% { - -webkit-transform: scaleX(1.15) scaleY(0.85); - -ms-transform: scaleX(1.15) scaleY(0.85); - transform: scaleX(1.15) scaleY(0.85); + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + -ms-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(.95, 1.05, 1); + -ms-transform: scale3d(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + -ms-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .95, 1); } 100% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + -ms-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } @@ -201,38 +249,38 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes shake { 0%, 100% { - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { - -webkit-transform: translateX(-10px); - transform: translateX(-10px); + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { - -webkit-transform: translateX(10px); - transform: translateX(10px); + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { - -webkit-transform: translateX(-10px); - -ms-transform: translateX(-10px); - transform: translateX(-10px); + -webkit-transform: translate3d(-10px, 0, 0); + -ms-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { - -webkit-transform: translateX(10px); - -ms-transform: translateX(10px); - transform: translateX(10px); + -webkit-transform: translate3d(10px, 0, 0); + -ms-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); } } @@ -243,60 +291,60 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes swing { 20% { - -webkit-transform: rotate(15deg); - transform: rotate(15deg); + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); } 40% { - -webkit-transform: rotate(-10deg); - transform: rotate(-10deg); + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); } 60% { - -webkit-transform: rotate(5deg); - transform: rotate(5deg); + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); } 80% { - -webkit-transform: rotate(-5deg); - transform: rotate(-5deg); + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); } 100% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { - -webkit-transform: rotate(15deg); - -ms-transform: rotate(15deg); - transform: rotate(15deg); + -webkit-transform: rotate3d(0, 0, 1, 15deg); + -ms-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); } 40% { - -webkit-transform: rotate(-10deg); - -ms-transform: rotate(-10deg); - transform: rotate(-10deg); + -webkit-transform: rotate3d(0, 0, 1, -10deg); + -ms-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); } 60% { - -webkit-transform: rotate(5deg); - -ms-transform: rotate(5deg); - transform: rotate(5deg); + -webkit-transform: rotate3d(0, 0, 1, 5deg); + -ms-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); } 80% { - -webkit-transform: rotate(-5deg); - -ms-transform: rotate(-5deg); - transform: rotate(-5deg); + -webkit-transform: rotate3d(0, 0, 1, -5deg); + -ms-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); } 100% { - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); + -webkit-transform: rotate3d(0, 0, 1, 0deg); + -ms-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); } } @@ -310,60 +358,60 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes tada { 0% { - -webkit-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } 10%, 20% { - -webkit-transform: scale(0.9) rotate(-3deg); - transform: scale(0.9) rotate(-3deg); + -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { - -webkit-transform: scale(1.1) rotate(3deg); - transform: scale(1.1) rotate(3deg); + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { - -webkit-transform: scale(1.1) rotate(-3deg); - transform: scale(1.1) rotate(-3deg); + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { - -webkit-transform: scale(1) rotate(0); - transform: scale(1) rotate(0); + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + -ms-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } 10%, 20% { - -webkit-transform: scale(0.9) rotate(-3deg); - -ms-transform: scale(0.9) rotate(-3deg); - transform: scale(0.9) rotate(-3deg); + -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -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); + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { - -webkit-transform: scale(1.1) rotate(-3deg); - -ms-transform: scale(1.1) rotate(-3deg); - transform: scale(1.1) rotate(-3deg); + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { - -webkit-transform: scale(1) rotate(0); - -ms-transform: scale(1) rotate(0); - transform: scale(1) rotate(0); + -webkit-transform: scale3d(1, 1, 1); + -ms-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } @@ -376,82 +424,82 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes wobble { 0% { - -webkit-transform: translateX(0%); - transform: translateX(0%); + -webkit-transform: none; + transform: none; } 15% { - -webkit-transform: translateX(-25%) rotate(-5deg); - transform: translateX(-25%) rotate(-5deg); + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { - -webkit-transform: translateX(20%) rotate(3deg); - transform: translateX(20%) rotate(3deg); + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { - -webkit-transform: translateX(-15%) rotate(-3deg); - transform: translateX(-15%) rotate(-3deg); + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { - -webkit-transform: translateX(10%) rotate(2deg); - transform: translateX(10%) rotate(2deg); + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { - -webkit-transform: translateX(-5%) rotate(-1deg); - transform: translateX(-5%) rotate(-1deg); + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { - -webkit-transform: translateX(0%); - transform: translateX(0%); + -webkit-transform: none; + transform: none; } } @keyframes wobble { 0% { - -webkit-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); + -webkit-transform: none; + -ms-transform: none; + transform: none; } 15% { - -webkit-transform: translateX(-25%) rotate(-5deg); - -ms-transform: translateX(-25%) rotate(-5deg); - transform: translateX(-25%) rotate(-5deg); + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + -ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { - -webkit-transform: translateX(20%) rotate(3deg); - -ms-transform: translateX(20%) rotate(3deg); - transform: translateX(20%) rotate(3deg); + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + -ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { - -webkit-transform: translateX(-15%) rotate(-3deg); - -ms-transform: translateX(-15%) rotate(-3deg); - transform: translateX(-15%) rotate(-3deg); + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + -ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { - -webkit-transform: translateX(10%) rotate(2deg); - -ms-transform: translateX(10%) rotate(2deg); - transform: translateX(10%) rotate(2deg); + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + -ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { - -webkit-transform: translateX(-5%) rotate(-1deg); - -ms-transform: translateX(-5%) rotate(-1deg); - transform: translateX(-5%) rotate(-1deg); + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { - -webkit-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -461,78 +509,88 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: scale(.3); - transform: scale(.3); + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); } 20% { - -webkit-transform: scale(1.1); - transform: scale(1.1); + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); } 40% { - -webkit-transform: scale(.9); - transform: scale(.9); + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); } 60% { opacity: 1; - -webkit-transform: scale(1.03); - transform: scale(1.03); + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); } 80% { - -webkit-transform: scale(.97); - transform: scale(.97); + -webkit-transform: scale3d(.97, .97, .97); + transform: scale3d(.97, .97, .97); } 100% { opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } @keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: scale(.3); - -ms-transform: scale(.3); - transform: scale(.3); + -webkit-transform: scale3d(.3, .3, .3); + -ms-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); } 20% { - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); + -webkit-transform: scale3d(1.1, 1.1, 1.1); + -ms-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); } 40% { - -webkit-transform: scale(.9); - -ms-transform: scale(.9); - transform: scale(.9); + -webkit-transform: scale3d(.9, .9, .9); + -ms-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); } 60% { opacity: 1; - -webkit-transform: scale(1.03); - -ms-transform: scale(1.03); - transform: scale(1.03); + -webkit-transform: scale3d(1.03, 1.03, 1.03); + -ms-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); } 80% { - -webkit-transform: scale(.97); - -ms-transform: scale(.97); - transform: scale(.97); + -webkit-transform: scale3d(.97, .97, .97); + -ms-transform: scale3d(.97, .97, .97); + transform: scale3d(.97, .97, .97); } 100% { opacity: 1; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + -webkit-transform: scale3d(1, 1, 1); + -ms-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } @@ -544,65 +602,75 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateY(-3000px); - transform: translateY(-3000px); + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; - -webkit-transform: translateY(30px); - transform: translateY(30px); + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); } 75% { - -webkit-transform: translateY(-15px); - transform: translateY(-15px); + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); } 90% { - -webkit-transform: translateY(5px); - transform: translateY(5px); + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); } 100% { - -webkit-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + transform: none; } } @keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateY(-3000px); - -ms-transform: translateY(-3000px); - transform: translateY(-3000px); + -webkit-transform: translate3d(0, -3000px, 0); + -ms-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; - -webkit-transform: translateY(30px); - -ms-transform: translateY(30px); - transform: translateY(30px); + -webkit-transform: translate3d(0, 25px, 0); + -ms-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); } 75% { - -webkit-transform: translateY(-15px); - -ms-transform: translateY(-15px); - transform: translateY(-15px); + -webkit-transform: translate3d(0, -10px, 0); + -ms-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); } 90% { - -webkit-transform: translateY(5px); - -ms-transform: translateY(5px); - transform: translateY(5px); + -webkit-transform: translate3d(0, 5px, 0); + -ms-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); } 100% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -612,65 +680,75 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceInLeft { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateX(-3000px); - transform: translateX(-3000px); + -webkit-transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translateX(30px); - transform: translateX(30px); + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); } 75% { - -webkit-transform: translateX(-15px); - transform: translateX(-15px); + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); } 90% { - -webkit-transform: translateX(5px); - transform: translateX(5px); + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); } 100% { - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + transform: none; } } @keyframes bounceInLeft { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateX(-3000px); - -ms-transform: translateX(-3000px); - transform: translateX(-3000px); + -webkit-transform: translate3d(-3000px, 0, 0); + -ms-transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translateX(30px); - -ms-transform: translateX(30px); - transform: translateX(30px); + -webkit-transform: translate3d(25px, 0, 0); + -ms-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); } 75% { - -webkit-transform: translateX(-15px); - -ms-transform: translateX(-15px); - transform: translateX(-15px); + -webkit-transform: translate3d(-10px, 0, 0); + -ms-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); } 90% { - -webkit-transform: translateX(5px); - -ms-transform: translateX(5px); - transform: translateX(5px); + -webkit-transform: translate3d(5px, 0, 0); + -ms-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); } 100% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -680,65 +758,75 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceInRight { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateX(3000px); - transform: translateX(3000px); + -webkit-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translateX(-30px); - transform: translateX(-30px); + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); } 75% { - -webkit-transform: translateX(15px); - transform: translateX(15px); + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); } 90% { - -webkit-transform: translateX(-5px); - transform: translateX(-5px); + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); } 100% { - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + transform: none; } } @keyframes bounceInRight { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateX(3000px); - -ms-transform: translateX(3000px); - transform: translateX(3000px); + -webkit-transform: translate3d(3000px, 0, 0); + -ms-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; - -webkit-transform: translateX(-30px); - -ms-transform: translateX(-30px); - transform: translateX(-30px); + -webkit-transform: translate3d(-25px, 0, 0); + -ms-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); } 75% { - -webkit-transform: translateX(15px); - -ms-transform: translateX(15px); - transform: translateX(15px); + -webkit-transform: translate3d(10px, 0, 0); + -ms-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); } 90% { - -webkit-transform: translateX(-5px); - -ms-transform: translateX(-5px); - transform: translateX(-5px); + -webkit-transform: translate3d(-5px, 0, 0); + -ms-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); } 100% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -748,65 +836,75 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceInUp { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateY(3000px); - transform: translateY(3000px); + -webkit-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; - -webkit-transform: translateY(-30px); - transform: translateY(-30px); + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); } 75% { - -webkit-transform: translateY(15px); - transform: translateY(15px); + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); } 90% { - -webkit-transform: translateY(-5px); - transform: translateY(-5px); + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); } 100% { - -webkit-transform: translateY(0); - transform: translateY(0); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - -webkit-transform: translateY(3000px); - -ms-transform: translateY(3000px); - transform: translateY(3000px); + -webkit-transform: translate3d(0, 3000px, 0); + -ms-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; - -webkit-transform: translateY(-30px); - -ms-transform: translateY(-30px); - transform: translateY(-30px); + -webkit-transform: translate3d(0, -20px, 0); + -ms-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); } 75% { - -webkit-transform: translateY(15px); - -ms-transform: translateY(15px); - transform: translateY(15px); + -webkit-transform: translate3d(0, 10px, 0); + -ms-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); } 90% { - -webkit-transform: translateY(-5px); - -ms-transform: translateY(-5px); - transform: translateY(-5px); + -webkit-transform: translate3d(0, -5px, 0); + -ms-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); } 100% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -816,54 +914,43 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceOut { - 0% { - -webkit-transform: scale(1); - transform: scale(1); + 20% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); } - 25% { - -webkit-transform: scale(.9); - transform: scale(.9); - } - - 50% { + 50%, 55% { opacity: 1; - -webkit-transform: scale(1.1); - transform: scale(1.1); + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; - -webkit-transform: scale(.3); - transform: scale(.3); + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { - 0% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + 20% { + -webkit-transform: scale3d(.9, .9, .9); + -ms-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); } - 25% { - -webkit-transform: scale(.9); - -ms-transform: scale(.9); - transform: scale(.9); - } - - 50% { + 50%, 55% { opacity: 1; - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); + -webkit-transform: scale3d(1.1, 1.1, 1.1); + -ms-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; - -webkit-transform: scale(.3); - -ms-transform: scale(.3); - transform: scale(.3); + -webkit-transform: scale3d(.3, .3, .3); + -ms-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); } } @@ -875,43 +962,43 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceOutDown { - 0% { - -webkit-transform: translateY(0); - transform: translateY(0); + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); } - 20% { + 40%, 45% { opacity: 1; - -webkit-transform: translateY(-20px); - transform: translateY(-20px); + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); } 100% { opacity: 0; - -webkit-transform: translateY(3000px); - transform: translateY(3000px); + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { - 0% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + 20% { + -webkit-transform: translate3d(0, 10px, 0); + -ms-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); } - 20% { + 40%, 45% { opacity: 1; - -webkit-transform: translateY(-20px); - -ms-transform: translateY(-20px); - transform: translateY(-20px); + -webkit-transform: translate3d(0, -20px, 0); + -ms-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); } 100% { opacity: 0; - -webkit-transform: translateY(3000px); - -ms-transform: translateY(3000px); - transform: translateY(3000px); + -webkit-transform: translate3d(0, 2000px, 0); + -ms-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); } } @@ -921,43 +1008,32 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceOutLeft { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - 20% { opacity: 1; - -webkit-transform: translateX(20px); - transform: translateX(20px); + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); } 100% { opacity: 0; - -webkit-transform: translateX(-3000px); - transform: translateX(-3000px); + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { - 0% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } - 20% { opacity: 1; - -webkit-transform: translateX(20px); - -ms-transform: translateX(20px); - transform: translateX(20px); + -webkit-transform: translate3d(20px, 0, 0); + -ms-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); } 100% { opacity: 0; - -webkit-transform: translateX(-3000px); - -ms-transform: translateX(-3000px); - transform: translateX(-3000px); + -webkit-transform: translate3d(-2000px, 0, 0); + -ms-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); } } @@ -967,43 +1043,32 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceOutRight { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - 20% { opacity: 1; - -webkit-transform: translateX(-20px); - transform: translateX(-20px); + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; - -webkit-transform: translateX(3000px); - transform: translateX(3000px); + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { - 0% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } - 20% { opacity: 1; - -webkit-transform: translateX(-20px); - -ms-transform: translateX(-20px); - transform: translateX(-20px); + -webkit-transform: translate3d(-20px, 0, 0); + -ms-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; - -webkit-transform: translateX(3000px); - -ms-transform: translateX(3000px); - transform: translateX(3000px); + -webkit-transform: translate3d(2000px, 0, 0); + -ms-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); } } @@ -1013,43 +1078,43 @@ Copyright (c) 2013 Daniel Eden } @-webkit-keyframes bounceOutUp { - 0% { - -webkit-transform: translateY(0); - transform: translateY(0); + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); } - 20% { + 40%, 45% { opacity: 1; - -webkit-transform: translateY(20px); - transform: translateY(20px); + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); } 100% { opacity: 0; - -webkit-transform: translateY(-3000px); - transform: translateY(-3000px); + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { - 0% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + 20% { + -webkit-transform: translate3d(0, -10px, 0); + -ms-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); } - 20% { + 40%, 45% { opacity: 1; - -webkit-transform: translateY(20px); - -ms-transform: translateY(20px); - transform: translateY(20px); + -webkit-transform: translate3d(0, 20px, 0); + -ms-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); } 100% { opacity: 0; - -webkit-transform: translateY(-3000px); - -ms-transform: translateY(-3000px); - transform: translateY(-3000px); + -webkit-transform: translate3d(0, -2000px, 0); + -ms-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } } @@ -1086,30 +1151,30 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeInDown { 0% { opacity: 0; - -webkit-transform: translateY(-20px); - transform: translateY(-20px); + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } 100% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; - -webkit-transform: translateY(-20px); - -ms-transform: translateY(-20px); - transform: translateY(-20px); + -webkit-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } 100% { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -1121,30 +1186,30 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; - -webkit-transform: translateY(-2000px); - transform: translateY(-2000px); + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; - -webkit-transform: translateY(-2000px); - -ms-transform: translateY(-2000px); - transform: translateY(-2000px); + -webkit-transform: translate3d(0, -2000px, 0); + -ms-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -1156,30 +1221,30 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeInLeft { 0% { opacity: 0; - -webkit-transform: translateX(-20px); - transform: translateX(-20px); + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; - -webkit-transform: translateX(-20px); - -ms-transform: translateX(-20px); - transform: translateX(-20px); + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -1191,30 +1256,30 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; - -webkit-transform: translateX(-2000px); - transform: translateX(-2000px); + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; - -webkit-transform: translateX(-2000px); - -ms-transform: translateX(-2000px); - transform: translateX(-2000px); + -webkit-transform: translate3d(-2000px, 0, 0); + -ms-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -1226,30 +1291,30 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeInRight { 0% { opacity: 0; - -webkit-transform: translateX(20px); - transform: translateX(20px); + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } 100% { opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; - -webkit-transform: translateX(20px); - -ms-transform: translateX(20px); - transform: translateX(20px); + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } 100% { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -1261,30 +1326,30 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; - -webkit-transform: translateX(2000px); - transform: translateX(2000px); + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; - -webkit-transform: translateX(2000px); - -ms-transform: translateX(2000px); - transform: translateX(2000px); + -webkit-transform: translate3d(2000px, 0, 0); + -ms-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -1296,30 +1361,30 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeInUp { 0% { opacity: 0; - -webkit-transform: translateY(20px); - transform: translateY(20px); + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } 100% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; - -webkit-transform: translateY(20px); - -ms-transform: translateY(20px); - transform: translateY(20px); + -webkit-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } 100% { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -1331,30 +1396,30 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; - -webkit-transform: translateY(2000px); - transform: translateY(2000px); + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; - -webkit-transform: translateY(2000px); - -ms-transform: translateY(2000px); - transform: translateY(2000px); + -webkit-transform: translate3d(0, 2000px, 0); + -ms-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -1391,30 +1456,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeOutDown { 0% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } 100% { opacity: 0; - -webkit-transform: translateY(20px); - transform: translateY(20px); + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 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-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } } @@ -1426,30 +1486,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } 100% { opacity: 0; - -webkit-transform: translateY(2000px); - transform: translateY(2000px); + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); } 100% { opacity: 0; - -webkit-transform: translateY(2000px); - -ms-transform: translateY(2000px); - transform: translateY(2000px); + -webkit-transform: translate3d(0, 2000px, 0); + -ms-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); } } @@ -1461,30 +1516,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); } 100% { opacity: 0; - -webkit-transform: translateX(-20px); - transform: translateX(-20px); + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } 100% { opacity: 0; - -webkit-transform: translateX(-20px); - -ms-transform: translateX(-20px); - transform: translateX(-20px); + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } } @@ -1496,30 +1546,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); } 100% { opacity: 0; - -webkit-transform: translateX(-2000px); - transform: translateX(-2000px); + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } 100% { opacity: 0; - -webkit-transform: translateX(-2000px); - -ms-transform: translateX(-2000px); - transform: translateX(-2000px); + -webkit-transform: translate3d(-2000px, 0, 0); + -ms-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); } } @@ -1531,30 +1576,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeOutRight { 0% { opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); } 100% { opacity: 0; - -webkit-transform: translateX(20px); - transform: translateX(20px); + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } 100% { opacity: 0; - -webkit-transform: translateX(20px); - -ms-transform: translateX(20px); - transform: translateX(20px); + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } } @@ -1566,30 +1606,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); } 100% { opacity: 0; - -webkit-transform: translateX(2000px); - transform: translateX(2000px); + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); } 100% { opacity: 0; - -webkit-transform: translateX(2000px); - -ms-transform: translateX(2000px); - transform: translateX(2000px); + -webkit-transform: translate3d(2000px, 0, 0); + -ms-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); } } @@ -1601,30 +1636,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeOutUp { 0% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } 100% { opacity: 0; - -webkit-transform: translateY(-20px); - transform: translateY(-20px); + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 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-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } } @@ -1636,30 +1666,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } 100% { opacity: 0; - -webkit-transform: translateY(-2000px); - transform: translateY(-2000px); + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); } 100% { opacity: 0; - -webkit-transform: translateY(-2000px); - -ms-transform: translateY(-2000px); - transform: translateY(-2000px); + -webkit-transform: translate3d(0, -2000px, 0); + -ms-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } } @@ -1670,36 +1695,36 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes flip { 0% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); - transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); - transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); - transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); - transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); + -webkit-transform: perspective(400px) scale3d(.95, .95, .95); + transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); - transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); + -webkit-transform: perspective(400px); + transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @@ -1707,41 +1732,41 @@ Copyright (c) 2013 Daniel Eden @keyframes flip { 0% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); - -ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); - transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); - -ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); - transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); - -ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); - transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); - -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); - transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); + -webkit-transform: perspective(400px) scale3d(.95, .95, .95); + -ms-transform: perspective(400px) scale3d(.95, .95, .95); + transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); - -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); - transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); + -webkit-transform: perspective(400px); + -ms-transform: perspective(400px); + transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @@ -1757,72 +1782,72 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes flipInX { 0% { - -webkit-transform: perspective(400px) rotateX(90deg); - transform: perspective(400px) rotateX(90deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { - -webkit-transform: perspective(400px) rotateX(-20deg); - transform: perspective(400px) rotateX(-20deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { - -webkit-transform: perspective(400px) rotateX(10deg); - transform: perspective(400px) rotateX(10deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { - -webkit-transform: perspective(400px) rotateX(-5deg); - transform: perspective(400px) rotateX(-5deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { - -webkit-transform: perspective(400px) rotateX(0deg); - transform: perspective(400px) rotateX(0deg); + -webkit-transform: perspective(400px); + transform: perspective(400px); } } @keyframes flipInX { 0% { - -webkit-transform: perspective(400px) rotateX(90deg); - -ms-transform: perspective(400px) rotateX(90deg); - transform: perspective(400px) rotateX(90deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { - -webkit-transform: perspective(400px) rotateX(-20deg); - -ms-transform: perspective(400px) rotateX(-20deg); - transform: perspective(400px) rotateX(-20deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { - -webkit-transform: perspective(400px) rotateX(10deg); - -ms-transform: perspective(400px) rotateX(10deg); - transform: perspective(400px) rotateX(10deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { - -webkit-transform: perspective(400px) rotateX(-5deg); - -ms-transform: perspective(400px) rotateX(-5deg); - transform: perspective(400px) rotateX(-5deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { - -webkit-transform: perspective(400px) rotateX(0deg); - -ms-transform: perspective(400px) rotateX(0deg); - transform: perspective(400px) rotateX(0deg); + -webkit-transform: perspective(400px); + -ms-transform: perspective(400px); + transform: perspective(400px); } } @@ -1836,72 +1861,72 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes flipInY { 0% { - -webkit-transform: perspective(400px) rotateY(90deg); - transform: perspective(400px) rotateY(90deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { - -webkit-transform: perspective(400px) rotateY(-20deg); - transform: perspective(400px) rotateY(-20deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { - -webkit-transform: perspective(400px) rotateY(10deg); - transform: perspective(400px) rotateY(10deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { - -webkit-transform: perspective(400px) rotateY(-5deg); - transform: perspective(400px) rotateY(-5deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { - -webkit-transform: perspective(400px) rotateY(0deg); - transform: perspective(400px) rotateY(0deg); + -webkit-transform: perspective(400px); + transform: perspective(400px); } } @keyframes flipInY { 0% { - -webkit-transform: perspective(400px) rotateY(90deg); - -ms-transform: perspective(400px) rotateY(90deg); - transform: perspective(400px) rotateY(90deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { - -webkit-transform: perspective(400px) rotateY(-20deg); - -ms-transform: perspective(400px) rotateY(-20deg); - transform: perspective(400px) rotateY(-20deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { - -webkit-transform: perspective(400px) rotateY(10deg); - -ms-transform: perspective(400px) rotateY(10deg); - transform: perspective(400px) rotateY(10deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { - -webkit-transform: perspective(400px) rotateY(-5deg); - -ms-transform: perspective(400px) rotateY(-5deg); - transform: perspective(400px) rotateY(-5deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { - -webkit-transform: perspective(400px) rotateY(0deg); - -ms-transform: perspective(400px) rotateY(0deg); - transform: perspective(400px) rotateY(0deg); + -webkit-transform: perspective(400px); + -ms-transform: perspective(400px); + transform: perspective(400px); } } @@ -1915,41 +1940,41 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes flipOutX { 0% { - -webkit-transform: perspective(400px) rotateX(0deg); - transform: perspective(400px) rotateX(0deg); + -webkit-transform: perspective(400px); + transform: perspective(400px); } 30% { - -webkit-transform: perspective(400px) rotateX(-20deg); - transform: perspective(400px) rotateX(-20deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { - -webkit-transform: perspective(400px) rotateX(90deg); - transform: perspective(400px) rotateX(90deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { - -webkit-transform: perspective(400px) rotateX(0deg); - -ms-transform: perspective(400px) rotateX(0deg); - transform: perspective(400px) rotateX(0deg); + -webkit-transform: perspective(400px); + -ms-transform: perspective(400px); + transform: perspective(400px); } 30% { - -webkit-transform: perspective(400px) rotateX(-20deg); - -ms-transform: perspective(400px) rotateX(-20deg); - transform: perspective(400px) rotateX(-20deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { - -webkit-transform: perspective(400px) rotateX(90deg); - -ms-transform: perspective(400px) rotateX(90deg); - transform: perspective(400px) rotateX(90deg); + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @@ -1966,41 +1991,41 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes flipOutY { 0% { - -webkit-transform: perspective(400px) rotateY(0deg); - transform: perspective(400px) rotateY(0deg); + -webkit-transform: perspective(400px); + transform: perspective(400px); } 30% { - -webkit-transform: perspective(400px) rotateY(-15deg); - transform: perspective(400px) rotateY(-15deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { - -webkit-transform: perspective(400px) rotateY(90deg); - transform: perspective(400px) rotateY(90deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { - -webkit-transform: perspective(400px) rotateY(0deg); - -ms-transform: perspective(400px) rotateY(0deg); - transform: perspective(400px) rotateY(0deg); + -webkit-transform: perspective(400px); + -ms-transform: perspective(400px); + transform: perspective(400px); } 30% { - -webkit-transform: perspective(400px) rotateY(-15deg); - -ms-transform: perspective(400px) rotateY(-15deg); - transform: perspective(400px) rotateY(-15deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + -ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { - -webkit-transform: perspective(400px) rotateY(90deg); - -ms-transform: perspective(400px) rotateY(90deg); - transform: perspective(400px) rotateY(90deg); + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @@ -2017,56 +2042,56 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes lightSpeedIn { 0% { - -webkit-transform: translateX(100%) skewX(-30deg); - transform: translateX(100%) skewX(-30deg); + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { - -webkit-transform: translateX(-20%) skewX(30deg); - transform: translateX(-20%) skewX(30deg); + -webkit-transform: skewX(20deg); + transform: skewX(20deg); opacity: 1; } 80% { - -webkit-transform: translateX(0%) skewX(-15deg); - transform: translateX(0%) skewX(-15deg); + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); opacity: 1; } 100% { - -webkit-transform: translateX(0%) skewX(0deg); - transform: translateX(0%) skewX(0deg); + -webkit-transform: none; + transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { - -webkit-transform: translateX(100%) skewX(-30deg); - -ms-transform: translateX(100%) skewX(-30deg); - transform: translateX(100%) skewX(-30deg); + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + -ms-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { - -webkit-transform: translateX(-20%) skewX(30deg); - -ms-transform: translateX(-20%) skewX(30deg); - transform: translateX(-20%) skewX(30deg); + -webkit-transform: skewX(20deg); + -ms-transform: skewX(20deg); + transform: skewX(20deg); opacity: 1; } 80% { - -webkit-transform: translateX(0%) skewX(-15deg); - -ms-transform: translateX(0%) skewX(-15deg); - transform: translateX(0%) skewX(-15deg); + -webkit-transform: skewX(-5deg); + -ms-transform: skewX(-5deg); + transform: skewX(-5deg); opacity: 1; } 100% { - -webkit-transform: translateX(0%) skewX(0deg); - -ms-transform: translateX(0%) skewX(0deg); - transform: translateX(0%) skewX(0deg); + -webkit-transform: none; + -ms-transform: none; + transform: none; opacity: 1; } } @@ -2080,30 +2105,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes lightSpeedOut { 0% { - -webkit-transform: translateX(0%) skewX(0deg); - transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { - -webkit-transform: translateX(100%) skewX(-30deg); - transform: translateX(100%) skewX(-30deg); + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { - -webkit-transform: translateX(0%) skewX(0deg); - -ms-transform: translateX(0%) skewX(0deg); - transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { - -webkit-transform: translateX(100%) skewX(-30deg); - -ms-transform: translateX(100%) skewX(-30deg); - transform: translateX(100%) skewX(-30deg); + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + -ms-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @@ -2117,40 +2137,40 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes rotateIn { 0% { - -webkit-transform-origin: center center; - transform-origin: center center; - -webkit-transform: rotate(-200deg); - transform: rotate(-200deg); + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { - -webkit-transform-origin: center center; - transform-origin: center center; - -webkit-transform: rotate(0); - transform: rotate(0); + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + transform: none; opacity: 1; } } @keyframes rotateIn { 0% { - -webkit-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; - -webkit-transform: rotate(-200deg); - -ms-transform: rotate(-200deg); - transform: rotate(-200deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + -ms-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { - -webkit-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + -ms-transform: none; + transform: none; opacity: 1; } } @@ -2164,16 +2184,16 @@ Copyright (c) 2013 Daniel Eden 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(0); - transform: rotate(0); + -webkit-transform: none; + transform: none; opacity: 1; } } @@ -2183,9 +2203,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); + -webkit-transform: rotate3d(0, 0, 1, -45deg); + -ms-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } @@ -2193,9 +2213,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; opacity: 1; } } @@ -2209,16 +2229,16 @@ Copyright (c) 2013 Daniel Eden 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(90deg); - transform: rotate(90deg); + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(0); - transform: rotate(0); + -webkit-transform: none; + transform: none; opacity: 1; } } @@ -2228,9 +2248,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + -webkit-transform: rotate3d(0, 0, 1, 45deg); + -ms-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } @@ -2238,9 +2258,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; opacity: 1; } } @@ -2254,16 +2274,16 @@ Copyright (c) 2013 Daniel Eden 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(90deg); - transform: rotate(90deg); + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(0); - transform: rotate(0); + -webkit-transform: none; + transform: none; opacity: 1; } } @@ -2273,9 +2293,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + -webkit-transform: rotate3d(0, 0, 1, 45deg); + -ms-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } @@ -2283,9 +2303,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; opacity: 1; } } @@ -2299,16 +2319,16 @@ Copyright (c) 2013 Daniel Eden 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(0); - transform: rotate(0); + -webkit-transform: none; + transform: none; opacity: 1; } } @@ -2318,9 +2338,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); + -webkit-transform: rotate3d(0, 0, 1, -90deg); + -ms-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } @@ -2328,9 +2348,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + -webkit-transform: none; + -ms-transform: none; + transform: none; opacity: 1; } } @@ -2342,40 +2362,35 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes rotateOut { 0% { - -webkit-transform-origin: center center; - transform-origin: center center; - -webkit-transform: rotate(0); - transform: rotate(0); + -webkit-transform-origin: center; + transform-origin: center; opacity: 1; } 100% { - -webkit-transform-origin: center center; - transform-origin: center center; - -webkit-transform: rotate(200deg); - transform: rotate(200deg); + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { - -webkit-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; opacity: 1; } 100% { - -webkit-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; - -webkit-transform: rotate(200deg); - -ms-transform: rotate(200deg); - transform: rotate(200deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + -ms-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @@ -2389,16 +2404,14 @@ Copyright (c) 2013 Daniel Eden 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(0); - transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(90deg); - transform: rotate(90deg); + -webkit-transform: rotate(0, 0, 1, 45deg); + transform: rotate(0, 0, 1, 45deg); opacity: 0; } } @@ -2408,9 +2421,6 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); opacity: 1; } @@ -2418,9 +2428,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + -webkit-transform: rotate(0, 0, 1, 45deg); + -ms-transform: rotate(0, 0, 1, 45deg); + transform: rotate(0, 0, 1, 45deg); opacity: 0; } } @@ -2434,16 +2444,14 @@ Copyright (c) 2013 Daniel Eden 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(0); - transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @@ -2453,9 +2461,6 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); opacity: 1; } @@ -2463,9 +2468,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); + -webkit-transform: rotate3d(0, 0, 1, -45deg); + -ms-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @@ -2479,16 +2484,14 @@ Copyright (c) 2013 Daniel Eden 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(0); - transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @@ -2498,9 +2501,6 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); opacity: 1; } @@ -2508,9 +2508,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); + -webkit-transform: rotate3d(0, 0, 1, -45deg); + -ms-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @@ -2524,16 +2524,14 @@ Copyright (c) 2013 Daniel Eden 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(0); - transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(90deg); - transform: rotate(90deg); + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @@ -2543,9 +2541,6 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); opacity: 1; } @@ -2553,9 +2548,9 @@ Copyright (c) 2013 Daniel Eden -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); + -webkit-transform: rotate3d(0, 0, 1, 90deg); + -ms-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @@ -2565,276 +2560,8 @@ Copyright (c) 2013 Daniel Eden animation-name: rotateOutUpRight; } -@-webkit-keyframes slideInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - transform: translateY(-2000px); - } - - 100% { - -webkit-transform: translateY(0); - transform: translateY(0); - } -} - -@keyframes slideInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - -ms-transform: translateY(-2000px); - transform: translateY(-2000px); - } - - 100% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - } -} - -.slideInDown { - -webkit-animation-name: slideInDown; - animation-name: slideInDown; -} - -@-webkit-keyframes slideInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - transform: translateX(-2000px); - } - - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); - } -} - -@keyframes slideInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - -ms-transform: translateX(-2000px); - transform: translateX(-2000px); - } - - 100% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } -} - -.slideInLeft { - -webkit-animation-name: slideInLeft; - animation-name: slideInLeft; -} - -@-webkit-keyframes slideInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - transform: translateX(2000px); - } - - 100% { - -webkit-transform: translateX(0); - transform: translateX(0); - } -} - -@keyframes slideInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - -ms-transform: translateX(2000px); - transform: translateX(2000px); - } - - 100% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } -} - -.slideInRight { - -webkit-animation-name: slideInRight; - animation-name: slideInRight; -} - -@-webkit-keyframes slideOutLeft { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - transform: translateX(-2000px); - } -} - -@keyframes slideOutLeft { - 0% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - -ms-transform: translateX(-2000px); - transform: translateX(-2000px); - } -} - -.slideOutLeft { - -webkit-animation-name: slideOutLeft; - animation-name: slideOutLeft; -} - -@-webkit-keyframes slideOutRight { - 0% { - -webkit-transform: translateX(0); - transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - transform: translateX(2000px); - } -} - -@keyframes slideOutRight { - 0% { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - -ms-transform: translateX(2000px); - transform: translateX(2000px); - } -} - -.slideOutRight { - -webkit-animation-name: slideOutRight; - animation-name: slideOutRight; -} - -@-webkit-keyframes slideOutUp { - 0% { - -webkit-transform: translateY(0); - transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - transform: translateY(-2000px); - } -} - -@keyframes slideOutUp { - 0% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - -ms-transform: translateY(-2000px); - transform: translateY(-2000px); - } -} - -.slideOutUp { - -webkit-animation-name: slideOutUp; - animation-name: slideOutUp; -} - -@-webkit-keyframes slideInUp { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - transform: translateY(2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} - -@keyframes slideInUp { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - -ms-transform: translateY(2000px); - transform: translateY(2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - } -} - -.slideInUp { - -webkit-animation-name: slideInUp; - animation-name: slideInUp; -} - -@-webkit-keyframes slideOutDown { - 0% { - -webkit-transform: translateY(0); - transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(2000px); - transform: translateY(2000px); - } -} - -@keyframes slideOutDown { - 0% { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(2000px); - -ms-transform: translateY(2000px); - transform: translateY(2000px); - } -} - -.slideOutDown { - -webkit-animation-name: slideOutDown; - animation-name: slideOutDown; -} - @-webkit-keyframes hinge { 0% { - -webkit-transform: rotate(0); - transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; @@ -2842,26 +2569,17 @@ Copyright (c) 2013 Daniel Eden } 20%, 60% { - -webkit-transform: rotate(80deg); - transform: rotate(80deg); + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } - 40% { - -webkit-transform: rotate(60deg); - transform: rotate(60deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 80% { - -webkit-transform: rotate(60deg) translateY(0); - transform: rotate(60deg) translateY(0); + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; @@ -2870,17 +2588,14 @@ Copyright (c) 2013 Daniel Eden } 100% { - -webkit-transform: translateY(700px); - transform: translateY(700px); + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; @@ -2889,9 +2604,9 @@ Copyright (c) 2013 Daniel Eden } 20%, 60% { - -webkit-transform: rotate(80deg); - -ms-transform: rotate(80deg); - transform: rotate(80deg); + -webkit-transform: rotate3d(0, 0, 1, 80deg); + -ms-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; @@ -2899,21 +2614,10 @@ Copyright (c) 2013 Daniel Eden animation-timing-function: ease-in-out; } - 40% { - -webkit-transform: rotate(60deg); - -ms-transform: rotate(60deg); - transform: rotate(60deg); - -webkit-transform-origin: top left; - -ms-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 80% { - -webkit-transform: rotate(60deg) translateY(0); - -ms-transform: rotate(60deg) translateY(0); - transform: rotate(60deg) translateY(0); + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + -ms-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; @@ -2923,9 +2627,9 @@ Copyright (c) 2013 Daniel Eden } 100% { - -webkit-transform: translateY(700px); - -ms-transform: translateY(700px); - transform: translateY(700px); + -webkit-transform: translate3d(0, 700px, 0); + -ms-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); opacity: 0; } } @@ -2940,30 +2644,30 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes rollIn { 0% { opacity: 0; - -webkit-transform: translateX(-100%) rotate(-120deg); - transform: translateX(-100%) rotate(-120deg); + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg); - transform: translateX(0px) rotate(0deg); + -webkit-transform: none; + transform: none; } } @keyframes rollIn { 0% { opacity: 0; - -webkit-transform: translateX(-100%) rotate(-120deg); - -ms-transform: translateX(-100%) rotate(-120deg); - transform: translateX(-100%) rotate(-120deg); + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg); - -ms-transform: translateX(0px) rotate(0deg); - transform: translateX(0px) rotate(0deg); + -webkit-transform: none; + -ms-transform: none; + transform: none; } } @@ -2977,30 +2681,25 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes rollOut { 0% { opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg); - transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; - -webkit-transform: translateX(100%) rotate(120deg); - transform: translateX(100%) rotate(120deg); + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg); - -ms-transform: translateX(0px) rotate(0deg); - transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; - -webkit-transform: translateX(100%) rotate(120deg); - -ms-transform: translateX(100%) rotate(120deg); - transform: translateX(100%) rotate(120deg); + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @@ -3012,8 +2711,8 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomIn { 0% { opacity: 0; - -webkit-transform: scale(.3); - transform: scale(.3); + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); } 50% { @@ -3024,9 +2723,9 @@ Copyright (c) 2013 Daniel Eden @keyframes zoomIn { 0% { opacity: 0; - -webkit-transform: scale(.3); - -ms-transform: scale(.3); - transform: scale(.3); + -webkit-transform: scale3d(.3, .3, .3); + -ms-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); } 50% { @@ -3042,38 +2741,38 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomInDown { 0% { opacity: 0; - -webkit-transform: scale(.1) translateY(-2000px); - transform: scale(.1) translateY(-2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale(.475) translateY(60px); - transform: scale(.475) translateY(60px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { 0% { opacity: 0; - -webkit-transform: scale(.1) translateY(-2000px); - -ms-transform: scale(.1) translateY(-2000px); - transform: scale(.1) translateY(-2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + -ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale(.475) translateY(60px); - -ms-transform: scale(.475) translateY(60px); - transform: scale(.475) translateY(60px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @@ -3085,38 +2784,38 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomInLeft { 0% { opacity: 0; - -webkit-transform: scale(.1) translateX(-2000px); - transform: scale(.1) translateX(-2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale(.475) translateX(48px); - transform: scale(.475) translateX(48px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; - -webkit-transform: scale(.1) translateX(-2000px); - -ms-transform: scale(.1) translateX(-2000px); - transform: scale(.1) translateX(-2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + -ms-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale(.475) translateX(48px); - -ms-transform: scale(.475) translateX(48px); - transform: scale(.475) translateX(48px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + -ms-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @@ -3128,38 +2827,38 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomInRight { 0% { opacity: 0; - -webkit-transform: scale(.1) translateX(2000px); - transform: scale(.1) translateX(2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale(.475) translateX(-48px); - transform: scale(.475) translateX(-48px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { 0% { opacity: 0; - -webkit-transform: scale(.1) translateX(2000px); - -ms-transform: scale(.1) translateX(2000px); - transform: scale(.1) translateX(2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + -ms-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale(.475) translateX(-48px); - -ms-transform: scale(.475) translateX(-48px); - transform: scale(.475) translateX(-48px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + -ms-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @@ -3171,38 +2870,38 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomInUp { 0% { opacity: 0; - -webkit-transform: scale(.1) translateY(2000px); - transform: scale(.1) translateY(2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale(.475) translateY(-60px); - transform: scale(.475) translateY(-60px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { 0% { opacity: 0; - -webkit-transform: scale(.1) translateY(2000px); - -ms-transform: scale(.1) translateY(2000px); - transform: scale(.1) translateY(2000px); - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + -ms-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; - -webkit-transform: scale(.475) translateY(-60px); - -ms-transform: scale(.475) translateY(-60px); - transform: scale(.475) translateY(-60px); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @@ -3214,14 +2913,12 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomOut { 0% { opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); } 50% { opacity: 0; - -webkit-transform: scale(.3); - transform: scale(.3); + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); } 100% { @@ -3232,16 +2929,13 @@ Copyright (c) 2013 Daniel Eden @keyframes zoomOut { 0% { opacity: 1; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); } 50% { opacity: 0; - -webkit-transform: scale(.3); - -ms-transform: scale(.3); - transform: scale(.3); + -webkit-transform: scale3d(.3, .3, .3); + -ms-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); } 100% { @@ -3257,39 +2951,43 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomOutDown { 40% { opacity: 1; - -webkit-transform: scale(.475) translateY(-60px); - transform: scale(.475) translateY(-60px); - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; - -webkit-transform: scale(.1) translateY(2000px); - transform: scale(.1) translateY(2000px); + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; - -webkit-transform: scale(.475) translateY(-60px); - -ms-transform: scale(.475) translateY(-60px); - transform: scale(.475) translateY(-60px); - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; - -webkit-transform: scale(.1) translateY(2000px); - -ms-transform: scale(.1) translateY(2000px); - transform: scale(.1) translateY(2000px); + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + -ms-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @@ -3301,16 +2999,14 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; - -webkit-transform: scale(.475) translateX(42px); - transform: scale(.475) translateX(42px); - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; - -webkit-transform: scale(.1) translateX(-2000px); - transform: scale(.1) translateX(-2000px); + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } @@ -3319,18 +3015,16 @@ Copyright (c) 2013 Daniel Eden @keyframes zoomOutLeft { 40% { opacity: 1; - -webkit-transform: scale(.475) translateX(42px); - -ms-transform: scale(.475) translateX(42px); - transform: scale(.475) translateX(42px); - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + -ms-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; - -webkit-transform: scale(.1) translateX(-2000px); - -ms-transform: scale(.1) translateX(-2000px); - transform: scale(.1) translateX(-2000px); + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); + -ms-transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; @@ -3345,16 +3039,14 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomOutRight { 40% { opacity: 1; - -webkit-transform: scale(.475) translateX(-42px); - transform: scale(.475) translateX(-42px); - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; - -webkit-transform: scale(.1) translateX(2000px); - transform: scale(.1) translateX(2000px); + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } @@ -3363,18 +3055,16 @@ Copyright (c) 2013 Daniel Eden @keyframes zoomOutRight { 40% { opacity: 1; - -webkit-transform: scale(.475) translateX(-42px); - -ms-transform: scale(.475) translateX(-42px); - transform: scale(.475) translateX(-42px); - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + -ms-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; - -webkit-transform: scale(.1) translateX(2000px); - -ms-transform: scale(.1) translateX(2000px); - transform: scale(.1) translateX(2000px); + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); + -ms-transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; @@ -3389,39 +3079,43 @@ Copyright (c) 2013 Daniel Eden @-webkit-keyframes zoomOutUp { 40% { opacity: 1; - -webkit-transform: scale(.475) translateY(60px); - transform: scale(.475) translateY(60px); - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; - -webkit-transform: scale(.1) translateY(-2000px); - transform: scale(.1) translateY(-2000px); - -webkit-transform-origin: center top; - transform-origin: center top; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; - -webkit-transform: scale(.475) translateY(60px); - -ms-transform: scale(.475) translateY(60px); - transform: scale(.475) translateY(60px); - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; - -webkit-transform: scale(.1) translateY(-2000px); - -ms-transform: scale(.1) translateY(-2000px); - transform: scale(.1) translateY(-2000px); - -webkit-transform-origin: center top; - -ms-transform-origin: center top; - transform-origin: center top; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + -ms-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + -webkit-transform-origin: center bottom; + -ms-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } diff --git a/animate.min.css b/animate.min.css index aaa7fcb..789ed0e 100755 --- a/animate.min.css +++ b/animate.min.css @@ -3,4 +3,4 @@ Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2013 Daniel Eden -*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-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%,100%,20%,50%,80%{-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)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes rubberBand{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);-ms-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);-ms-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);-ms-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-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)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-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)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}@keyframes wobble{0%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);-ms-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);-ms-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);-ms-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);-ms-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);-ms-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}@keyframes bounceOut{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes bounceOutDown{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes bounceOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes bounceOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{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)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{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)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{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)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes fadeOutUp{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)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(-360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(-360deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(0deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(0deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(-360deg) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(-360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(-360deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);-ms-transform:perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);-ms-transform:perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0deg) scale(.95);-ms-transform:perspective(400px) translateZ(0) rotateY(0deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(0deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0deg) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(0deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(0deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);-ms-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);-ms-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);-ms-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);-ms-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);-ms-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);-ms-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}}@keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);-ms-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);-ms-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes slideOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}@-webkit-keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}@keyframes hinge{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-ms-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);-ms-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);-ms-transform:translateY(700px);transform:translateY(700px);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}@keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);-ms-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);-ms-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);-ms-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);-ms-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);-ms-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);-ms-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);-ms-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);-ms-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);-ms-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);-ms-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp} +*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp} \ No newline at end of file diff --git a/package.json b/package.json index d8541be..5d77ea6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "animate.css", - "version": "3.1.1", + "version": "3.2.0", "devDependencies": { "grunt": "~0.4.1", "grunt-autoprefixer": "~0.4.0", diff --git a/source/attention_seekers/bounce.css b/source/attention_seekers/bounce.css index 3a786d2..6c37ff8 100644 --- a/source/attention_seekers/bounce.css +++ b/source/attention_seekers/bounce.css @@ -1,17 +1,25 @@ @keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); + 0%, 20%, 53%, 80%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transform: translate3d(0,0,0); } - 40% { - transform: translateY(-30px); + 40%, 43% { + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -30px, 0); } - 60% { - transform: translateY(-15px); + 70% { + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -15px, 0); + } + + 90% { + transform: translate3d(0,-4px,0); } } .bounce { animation-name: bounce; + transform-origin: center bottom; } diff --git a/source/attention_seekers/pulse.css b/source/attention_seekers/pulse.css index f1f47f8..8591205 100644 --- a/source/attention_seekers/pulse.css +++ b/source/attention_seekers/pulse.css @@ -2,15 +2,15 @@ @keyframes pulse { 0% { - transform: scale(1); + transform: scale3d(1, 1, 1); } 50% { - transform: scale(1.1); + transform: scale3d(1.05, 1.05, 1.05); } 100% { - transform: scale(1); + transform: scale3d(1, 1, 1); } } diff --git a/source/attention_seekers/rubberBand.css b/source/attention_seekers/rubberBand.css index 0bce131..25f44d6 100644 --- a/source/attention_seekers/rubberBand.css +++ b/source/attention_seekers/rubberBand.css @@ -1,22 +1,30 @@ @keyframes rubberBand { 0% { - transform: scale(1); + transform: scale3d(1, 1, 1); } 30% { - transform: scaleX(1.25) scaleY(0.75); + transform: scale3d(1.25, 0.75, 1); } 40% { - transform: scaleX(0.75) scaleY(1.25); + transform: scale3d(0.75, 1.25, 1); } - 60% { - transform: scaleX(1.15) scaleY(0.85); + 50% { + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + transform: scale3d(.95, 1.05, 1); + } + + 75% { + transform: scale3d(1.05, .95, 1); } 100% { - transform: scale(1); + transform: scale3d(1, 1, 1); } } diff --git a/source/attention_seekers/shake.css b/source/attention_seekers/shake.css index 4845b66..24a5766 100644 --- a/source/attention_seekers/shake.css +++ b/source/attention_seekers/shake.css @@ -1,14 +1,14 @@ @keyframes shake { 0%, 100% { - transform: translateX(0); + transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { - transform: translateX(-10px); + transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { - transform: translateX(10px); + transform: translate3d(10px, 0, 0); } } diff --git a/source/attention_seekers/swing.css b/source/attention_seekers/swing.css index bfd29b4..ce6a211 100644 --- a/source/attention_seekers/swing.css +++ b/source/attention_seekers/swing.css @@ -1,22 +1,22 @@ @keyframes swing { 20% { - transform: rotate(15deg); + transform: rotate3d(0, 0, 1, 15deg); } 40% { - transform: rotate(-10deg); + transform: rotate3d(0, 0, 1, -10deg); } 60% { - transform: rotate(5deg); + transform: rotate3d(0, 0, 1, 5deg); } 80% { - transform: rotate(-5deg); + transform: rotate3d(0, 0, 1, -5deg); } 100% { - transform: rotate(0deg); + transform: rotate3d(0, 0, 1, 0deg); } } diff --git a/source/attention_seekers/tada.css b/source/attention_seekers/tada.css index c9ac87f..511ba4e 100644 --- a/source/attention_seekers/tada.css +++ b/source/attention_seekers/tada.css @@ -1,22 +1,22 @@ @keyframes tada { 0% { - transform: scale(1); + transform: scale3d(1, 1, 1); } 10%, 20% { - transform: scale(0.9) rotate(-3deg); + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { - transform: scale(1.1) rotate(3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { - transform: scale(1.1) rotate(-3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { - transform: scale(1) rotate(0); + transform: scale3d(1, 1, 1); } } diff --git a/source/attention_seekers/wobble.css b/source/attention_seekers/wobble.css index 947cc8c..5a653a3 100644 --- a/source/attention_seekers/wobble.css +++ b/source/attention_seekers/wobble.css @@ -2,31 +2,31 @@ @keyframes wobble { 0% { - transform: translateX(0%); + transform: none; } 15% { - transform: translateX(-25%) rotate(-5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { - transform: translateX(20%) rotate(3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { - transform: translateX(-15%) rotate(-3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { - transform: translateX(10%) rotate(2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { - transform: translateX(-5%) rotate(-1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { - transform: translateX(0%); + transform: none; } } diff --git a/source/bouncing_entrances/bounceIn.css b/source/bouncing_entrances/bounceIn.css index 229f4d0..cdad1af 100644 --- a/source/bouncing_entrances/bounceIn.css +++ b/source/bouncing_entrances/bounceIn.css @@ -1,29 +1,33 @@ @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: scale(.3); + transform: scale3d(.3, .3, .3); } 20% { - transform: scale(1.1); + transform: scale3d(1.1, 1.1, 1.1); } 40% { - transform: scale(.9); + transform: scale3d(.9, .9, .9); } 60% { opacity: 1; - transform: scale(1.03); + transform: scale3d(1.03, 1.03, 1.03); } 80% { - transform: scale(.97); + transform: scale3d(.97, .97, .97); } 100% { opacity: 1; - transform: scale(1); + transform: scale3d(1, 1, 1); } } diff --git a/source/bouncing_entrances/bounceInDown.css b/source/bouncing_entrances/bounceInDown.css index 9f2f9c2..34269e7 100644 --- a/source/bouncing_entrances/bounceInDown.css +++ b/source/bouncing_entrances/bounceInDown.css @@ -1,24 +1,28 @@ @keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - transform: translateY(-3000px); + transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; - transform: translateY(30px); + transform: translate3d(0, 25px, 0); } 75% { - transform: translateY(-15px); + transform: translate3d(0, -10px, 0); } 90% { - transform: translateY(5px); + transform: translate3d(0, 5px, 0); } 100% { - transform: translateY(0); + transform: none; } } diff --git a/source/bouncing_entrances/bounceInLeft.css b/source/bouncing_entrances/bounceInLeft.css index acd8ebc..56fff9c 100644 --- a/source/bouncing_entrances/bounceInLeft.css +++ b/source/bouncing_entrances/bounceInLeft.css @@ -1,24 +1,28 @@ @keyframes bounceInLeft { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - transform: translateX(-3000px); + transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; - transform: translateX(30px); + transform: translate3d(25px, 0, 0); } 75% { - transform: translateX(-15px); + transform: translate3d(-10px, 0, 0); } 90% { - transform: translateX(5px); + transform: translate3d(5px, 0, 0); } 100% { - transform: translateX(0); + transform: none; } } diff --git a/source/bouncing_entrances/bounceInRight.css b/source/bouncing_entrances/bounceInRight.css index 85bcd9e..816b1fb 100644 --- a/source/bouncing_entrances/bounceInRight.css +++ b/source/bouncing_entrances/bounceInRight.css @@ -1,24 +1,28 @@ @keyframes bounceInRight { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - transform: translateX(3000px); + transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; - transform: translateX(-30px); + transform: translate3d(-25px, 0, 0); } 75% { - transform: translateX(15px); + transform: translate3d(10px, 0, 0); } 90% { - transform: translateX(-5px); + transform: translate3d(-5px, 0, 0); } 100% { - transform: translateX(0); + transform: none; } } diff --git a/source/bouncing_entrances/bounceInUp.css b/source/bouncing_entrances/bounceInUp.css index 89b407a..8a42889 100644 --- a/source/bouncing_entrances/bounceInUp.css +++ b/source/bouncing_entrances/bounceInUp.css @@ -1,24 +1,28 @@ @keyframes bounceInUp { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + 0% { opacity: 0; - transform: translateY(3000px); + transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; - transform: translateY(-30px); + transform: translate3d(0, -20px, 0); } 75% { - transform: translateY(15px); + transform: translate3d(0, 10px, 0); } 90% { - transform: translateY(-5px); + transform: translate3d(0, -5px, 0); } 100% { - transform: translateY(0); + transform: translate3d(0, 0, 0); } } diff --git a/source/bouncing_exits/bounceOut.css b/source/bouncing_exits/bounceOut.css index 92a87c5..b47ce5f 100644 --- a/source/bouncing_exits/bounceOut.css +++ b/source/bouncing_exits/bounceOut.css @@ -1,20 +1,16 @@ @keyframes bounceOut { - 0% { - transform: scale(1); + 20% { + transform: scale3d(.9, .9, .9); } - 25% { - transform: scale(.9); - } - - 50% { + 50%, 55% { opacity: 1; - transform: scale(1.1); + transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; - transform: scale(.3); + transform: scale3d(.3, .3, .3); } } diff --git a/source/bouncing_exits/bounceOutDown.css b/source/bouncing_exits/bounceOutDown.css index de772c3..c9766ca 100644 --- a/source/bouncing_exits/bounceOutDown.css +++ b/source/bouncing_exits/bounceOutDown.css @@ -1,16 +1,16 @@ @keyframes bounceOutDown { - 0% { - transform: translateY(0); + 20% { + transform: translate3d(0, 10px, 0); } - 20% { + 40%, 45% { opacity: 1; - transform: translateY(-20px); + transform: translate3d(0, -20px, 0); } 100% { opacity: 0; - transform: translateY(3000px); + transform: translate3d(0, 2000px, 0); } } diff --git a/source/bouncing_exits/bounceOutLeft.css b/source/bouncing_exits/bounceOutLeft.css index 78bdcc5..5c6bef1 100644 --- a/source/bouncing_exits/bounceOutLeft.css +++ b/source/bouncing_exits/bounceOutLeft.css @@ -1,16 +1,12 @@ @keyframes bounceOutLeft { - 0% { - transform: translateX(0); - } - 20% { opacity: 1; - transform: translateX(20px); + transform: translate3d(20px, 0, 0); } 100% { opacity: 0; - transform: translateX(-3000px); + transform: translate3d(-2000px, 0, 0); } } diff --git a/source/bouncing_exits/bounceOutRight.css b/source/bouncing_exits/bounceOutRight.css index b3f6420..70b1633 100644 --- a/source/bouncing_exits/bounceOutRight.css +++ b/source/bouncing_exits/bounceOutRight.css @@ -1,16 +1,12 @@ @keyframes bounceOutRight { - 0% { - transform: translateX(0); - } - 20% { opacity: 1; - transform: translateX(-20px); + transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; - transform: translateX(3000px); + transform: translate3d(2000px, 0, 0); } } diff --git a/source/bouncing_exits/bounceOutUp.css b/source/bouncing_exits/bounceOutUp.css index 0a52697..93af49c 100644 --- a/source/bouncing_exits/bounceOutUp.css +++ b/source/bouncing_exits/bounceOutUp.css @@ -1,16 +1,16 @@ @keyframes bounceOutUp { - 0% { - transform: translateY(0); + 20% { + transform: translate3d(0, -10px, 0); } - 20% { + 40%, 45% { opacity: 1; - transform: translateY(20px); + transform: translate3d(0, 20px, 0); } 100% { opacity: 0; - transform: translateY(-3000px); + transform: translate3d(0, -2000px, 0); } } diff --git a/source/fading_entrances/fadeInDown.css b/source/fading_entrances/fadeInDown.css index ee9cf30..100c195 100644 --- a/source/fading_entrances/fadeInDown.css +++ b/source/fading_entrances/fadeInDown.css @@ -1,12 +1,12 @@ @keyframes fadeInDown { 0% { opacity: 0; - transform: translateY(-20px); + transform: translate3d(0, -100%, 0); } 100% { opacity: 1; - transform: translateY(0); + transform: none; } } diff --git a/source/fading_entrances/fadeInDownBig.css b/source/fading_entrances/fadeInDownBig.css index 53d3be7..222fd89 100644 --- a/source/fading_entrances/fadeInDownBig.css +++ b/source/fading_entrances/fadeInDownBig.css @@ -1,12 +1,12 @@ @keyframes fadeInDownBig { 0% { opacity: 0; - transform: translateY(-2000px); + transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; - transform: translateY(0); + transform: none; } } diff --git a/source/fading_entrances/fadeInLeft.css b/source/fading_entrances/fadeInLeft.css index 3781a0f..294a50e 100644 --- a/source/fading_entrances/fadeInLeft.css +++ b/source/fading_entrances/fadeInLeft.css @@ -1,12 +1,12 @@ @keyframes fadeInLeft { 0% { opacity: 0; - transform: translateX(-20px); + transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; - transform: translateX(0); + transform: none; } } diff --git a/source/fading_entrances/fadeInLeftBig.css b/source/fading_entrances/fadeInLeftBig.css index 5c62966..fa580e9 100644 --- a/source/fading_entrances/fadeInLeftBig.css +++ b/source/fading_entrances/fadeInLeftBig.css @@ -1,12 +1,12 @@ @keyframes fadeInLeftBig { 0% { opacity: 0; - transform: translateX(-2000px); + transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; - transform: translateX(0); + transform: none; } } diff --git a/source/fading_entrances/fadeInRight.css b/source/fading_entrances/fadeInRight.css index 6285505..ce1bbbf 100644 --- a/source/fading_entrances/fadeInRight.css +++ b/source/fading_entrances/fadeInRight.css @@ -1,12 +1,12 @@ @keyframes fadeInRight { 0% { opacity: 0; - transform: translateX(20px); + transform: translate3d(100%, 0, 0); } 100% { opacity: 1; - transform: translateX(0); + transform: none; } } diff --git a/source/fading_entrances/fadeInRightBig.css b/source/fading_entrances/fadeInRightBig.css index 7d2252e..deabf19 100644 --- a/source/fading_entrances/fadeInRightBig.css +++ b/source/fading_entrances/fadeInRightBig.css @@ -1,12 +1,12 @@ @keyframes fadeInRightBig { 0% { opacity: 0; - transform: translateX(2000px); + transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; - transform: translateX(0); + transform: none; } } diff --git a/source/fading_entrances/fadeInUp.css b/source/fading_entrances/fadeInUp.css index ddbc32d..1094129 100644 --- a/source/fading_entrances/fadeInUp.css +++ b/source/fading_entrances/fadeInUp.css @@ -1,12 +1,12 @@ @keyframes fadeInUp { 0% { opacity: 0; - transform: translateY(20px); + transform: translate3d(0, 100%, 0); } 100% { opacity: 1; - transform: translateY(0); + transform: none; } } diff --git a/source/fading_entrances/fadeInUpBig.css b/source/fading_entrances/fadeInUpBig.css index 1b4d81d..20a0c10 100644 --- a/source/fading_entrances/fadeInUpBig.css +++ b/source/fading_entrances/fadeInUpBig.css @@ -1,12 +1,12 @@ @keyframes fadeInUpBig { 0% { opacity: 0; - transform: translateY(2000px); + transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; - transform: translateY(0); + transform: none; } } diff --git a/source/fading_exits/fadeOutDown.css b/source/fading_exits/fadeOutDown.css index 13c0da7..e5daaec 100644 --- a/source/fading_exits/fadeOutDown.css +++ b/source/fading_exits/fadeOutDown.css @@ -1,12 +1,11 @@ @keyframes fadeOutDown { 0% { opacity: 1; - transform: translateY(0); } 100% { opacity: 0; - transform: translateY(20px); + transform: translate3d(0, 100%, 0); } } diff --git a/source/fading_exits/fadeOutDownBig.css b/source/fading_exits/fadeOutDownBig.css index 9063a8a..40ffc80 100644 --- a/source/fading_exits/fadeOutDownBig.css +++ b/source/fading_exits/fadeOutDownBig.css @@ -1,12 +1,11 @@ @keyframes fadeOutDownBig { 0% { opacity: 1; - transform: translateY(0); } 100% { opacity: 0; - transform: translateY(2000px); + transform: translate3d(0, 2000px, 0); } } diff --git a/source/fading_exits/fadeOutLeft.css b/source/fading_exits/fadeOutLeft.css index e603382..349c900 100644 --- a/source/fading_exits/fadeOutLeft.css +++ b/source/fading_exits/fadeOutLeft.css @@ -1,12 +1,11 @@ @keyframes fadeOutLeft { 0% { opacity: 1; - transform: translateX(0); } 100% { opacity: 0; - transform: translateX(-20px); + transform: translate3d(-100%, 0, 0); } } diff --git a/source/fading_exits/fadeOutLeftBig.css b/source/fading_exits/fadeOutLeftBig.css index bef408d..4d7aa62 100644 --- a/source/fading_exits/fadeOutLeftBig.css +++ b/source/fading_exits/fadeOutLeftBig.css @@ -1,12 +1,11 @@ @keyframes fadeOutLeftBig { 0% { opacity: 1; - transform: translateX(0); } 100% { opacity: 0; - transform: translateX(-2000px); + transform: translate3d(-2000px, 0, 0); } } diff --git a/source/fading_exits/fadeOutRight.css b/source/fading_exits/fadeOutRight.css index 35d8983..687df49 100644 --- a/source/fading_exits/fadeOutRight.css +++ b/source/fading_exits/fadeOutRight.css @@ -1,12 +1,11 @@ @keyframes fadeOutRight { 0% { opacity: 1; - transform: translateX(0); } 100% { opacity: 0; - transform: translateX(20px); + transform: translate3d(100%, 0, 0); } } diff --git a/source/fading_exits/fadeOutRightBig.css b/source/fading_exits/fadeOutRightBig.css index 23044bf..2a0f8ab 100644 --- a/source/fading_exits/fadeOutRightBig.css +++ b/source/fading_exits/fadeOutRightBig.css @@ -1,12 +1,11 @@ @keyframes fadeOutRightBig { 0% { opacity: 1; - transform: translateX(0); } 100% { opacity: 0; - transform: translateX(2000px); + transform: translate3d(2000px, 0, 0); } } diff --git a/source/fading_exits/fadeOutUp.css b/source/fading_exits/fadeOutUp.css index 66c7930..d07d68e 100644 --- a/source/fading_exits/fadeOutUp.css +++ b/source/fading_exits/fadeOutUp.css @@ -1,12 +1,11 @@ @keyframes fadeOutUp { 0% { opacity: 1; - transform: translateY(0); } 100% { opacity: 0; - transform: translateY(-20px); + transform: translate3d(0, -100%, 0); } } diff --git a/source/fading_exits/fadeOutUpBig.css b/source/fading_exits/fadeOutUpBig.css index f7e7816..4408b5d 100644 --- a/source/fading_exits/fadeOutUpBig.css +++ b/source/fading_exits/fadeOutUpBig.css @@ -1,12 +1,11 @@ @keyframes fadeOutUpBig { 0% { opacity: 1; - transform: translateY(0); } 100% { opacity: 0; - transform: translateY(-2000px); + transform: translate3d(0, -2000px, 0); } } diff --git a/source/flippers/flip.css b/source/flippers/flip.css index b54c324..297c23b 100644 --- a/source/flippers/flip.css +++ b/source/flippers/flip.css @@ -1,26 +1,26 @@ @keyframes flip { 0% { - transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { - transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { - transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { - transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); + transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in; } 100% { - transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); + transform: perspective(400px); animation-timing-function: ease-in; } } diff --git a/source/flippers/flipInX.css b/source/flippers/flipInX.css index b49b655..40ffa5a 100644 --- a/source/flippers/flipInX.css +++ b/source/flippers/flipInX.css @@ -1,26 +1,26 @@ @keyframes flipInX { 0% { - transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transition-timing-function: ease-in; opacity: 0; } 40% { - transform: perspective(400px) rotateX(-20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transition-timing-function: ease-in; } 60% { - transform: perspective(400px) rotateX(10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { - transform: perspective(400px) rotateX(-5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { - transform: perspective(400px) rotateX(0deg); + transform: perspective(400px); } } diff --git a/source/flippers/flipInY.css b/source/flippers/flipInY.css index bace01c..696b565 100644 --- a/source/flippers/flipInY.css +++ b/source/flippers/flipInY.css @@ -1,26 +1,26 @@ @keyframes flipInY { 0% { - transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transition-timing-function: ease-in; opacity: 0; } 40% { - transform: perspective(400px) rotateY(-20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transition-timing-function: ease-in; } 60% { - transform: perspective(400px) rotateY(10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { - transform: perspective(400px) rotateY(-5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { - transform: perspective(400px) rotateY(0deg); + transform: perspective(400px); } } diff --git a/source/flippers/flipOutX.css b/source/flippers/flipOutX.css index a43d5c1..c3ad671 100644 --- a/source/flippers/flipOutX.css +++ b/source/flippers/flipOutX.css @@ -1,15 +1,15 @@ @keyframes flipOutX { 0% { - transform: perspective(400px) rotateX(0deg); + transform: perspective(400px); } 30% { - transform: perspective(400px) rotateX(-20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { - transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } diff --git a/source/flippers/flipOutY.css b/source/flippers/flipOutY.css index c692025..9fbd04f 100644 --- a/source/flippers/flipOutY.css +++ b/source/flippers/flipOutY.css @@ -1,15 +1,15 @@ @keyframes flipOutY { 0% { - transform: perspective(400px) rotateY(0deg); + transform: perspective(400px); } 30% { - transform: perspective(400px) rotateY(-15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { - transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } diff --git a/source/lightspeed/lightSpeedIn.css b/source/lightspeed/lightSpeedIn.css index 49fbc12..be6497a 100644 --- a/source/lightspeed/lightSpeedIn.css +++ b/source/lightspeed/lightSpeedIn.css @@ -1,21 +1,21 @@ @keyframes lightSpeedIn { 0% { - transform: translateX(100%) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { - transform: translateX(-20%) skewX(30deg); + transform: skewX(20deg); opacity: 1; } 80% { - transform: translateX(0%) skewX(-15deg); + transform: skewX(-5deg); opacity: 1; } 100% { - transform: translateX(0%) skewX(0deg); + transform: none; opacity: 1; } } diff --git a/source/lightspeed/lightSpeedOut.css b/source/lightspeed/lightSpeedOut.css index 9dd5b52..d768746 100644 --- a/source/lightspeed/lightSpeedOut.css +++ b/source/lightspeed/lightSpeedOut.css @@ -1,11 +1,10 @@ @keyframes lightSpeedOut { 0% { - transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { - transform: translateX(100%) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } diff --git a/source/rotating_entrances/rotateIn.css b/source/rotating_entrances/rotateIn.css index 0284f01..3003792 100644 --- a/source/rotating_entrances/rotateIn.css +++ b/source/rotating_entrances/rotateIn.css @@ -1,13 +1,13 @@ @keyframes rotateIn { 0% { - transform-origin: center center; - transform: rotate(-200deg); + transform-origin: center; + transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { - transform-origin: center center; - transform: rotate(0); + transform-origin: center; + transform: none; opacity: 1; } } diff --git a/source/rotating_entrances/rotateInDownLeft.css b/source/rotating_entrances/rotateInDownLeft.css index 88f5072..93b953b 100644 --- a/source/rotating_entrances/rotateInDownLeft.css +++ b/source/rotating_entrances/rotateInDownLeft.css @@ -1,13 +1,13 @@ @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; - transform: rotate(-90deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { transform-origin: left bottom; - transform: rotate(0); + transform: none; opacity: 1; } } diff --git a/source/rotating_entrances/rotateInDownRight.css b/source/rotating_entrances/rotateInDownRight.css index e737e6f..826a129 100644 --- a/source/rotating_entrances/rotateInDownRight.css +++ b/source/rotating_entrances/rotateInDownRight.css @@ -1,13 +1,13 @@ @keyframes rotateInDownRight { 0% { transform-origin: right bottom; - transform: rotate(90deg); + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { transform-origin: right bottom; - transform: rotate(0); + transform: none; opacity: 1; } } diff --git a/source/rotating_entrances/rotateInUpLeft.css b/source/rotating_entrances/rotateInUpLeft.css index 7045595..31d623e 100644 --- a/source/rotating_entrances/rotateInUpLeft.css +++ b/source/rotating_entrances/rotateInUpLeft.css @@ -1,13 +1,13 @@ @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; - transform: rotate(90deg); + transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { transform-origin: left bottom; - transform: rotate(0); + transform: none; opacity: 1; } } diff --git a/source/rotating_entrances/rotateInUpRight.css b/source/rotating_entrances/rotateInUpRight.css index 6f3097c..43004ad 100644 --- a/source/rotating_entrances/rotateInUpRight.css +++ b/source/rotating_entrances/rotateInUpRight.css @@ -1,13 +1,13 @@ @keyframes rotateInUpRight { 0% { transform-origin: right bottom; - transform: rotate(-90deg); + transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { transform-origin: right bottom; - transform: rotate(0); + transform: none; opacity: 1; } } diff --git a/source/rotating_exits/rotateOut.css b/source/rotating_exits/rotateOut.css index ec3779d..576e807 100644 --- a/source/rotating_exits/rotateOut.css +++ b/source/rotating_exits/rotateOut.css @@ -1,13 +1,12 @@ @keyframes rotateOut { 0% { - transform-origin: center center; - transform: rotate(0); + transform-origin: center; opacity: 1; } 100% { - transform-origin: center center; - transform: rotate(200deg); + transform-origin: center; + transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } diff --git a/source/rotating_exits/rotateOutDownLeft.css b/source/rotating_exits/rotateOutDownLeft.css index ee1cb38..c994298 100644 --- a/source/rotating_exits/rotateOutDownLeft.css +++ b/source/rotating_exits/rotateOutDownLeft.css @@ -1,13 +1,12 @@ @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; - transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; - transform: rotate(90deg); + transform: rotate(0, 0, 1, 45deg); opacity: 0; } } diff --git a/source/rotating_exits/rotateOutDownRight.css b/source/rotating_exits/rotateOutDownRight.css index e0923f7..44284a7 100644 --- a/source/rotating_exits/rotateOutDownRight.css +++ b/source/rotating_exits/rotateOutDownRight.css @@ -1,13 +1,12 @@ @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; - transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; - transform: rotate(-90deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } diff --git a/source/rotating_exits/rotateOutUpLeft.css b/source/rotating_exits/rotateOutUpLeft.css index 68aa9d7..eaad38a 100644 --- a/source/rotating_exits/rotateOutUpLeft.css +++ b/source/rotating_exits/rotateOutUpLeft.css @@ -1,13 +1,12 @@ @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; - transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; - transform: rotate(-90deg); + transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } diff --git a/source/rotating_exits/rotateOutUpRight.css b/source/rotating_exits/rotateOutUpRight.css index 0206488..183f3da 100644 --- a/source/rotating_exits/rotateOutUpRight.css +++ b/source/rotating_exits/rotateOutUpRight.css @@ -1,13 +1,12 @@ @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; - transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; - transform: rotate(90deg); + transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } diff --git a/source/sliders/slideInDown.css b/source/sliders/slideInDown.css deleted file mode 100644 index 6715b5a..0000000 --- a/source/sliders/slideInDown.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 100% { - transform: translateY(0); - } -} - -.slideInDown { - animation-name: slideInDown; -} diff --git a/source/sliders/slideInLeft.css b/source/sliders/slideInLeft.css deleted file mode 100644 index 229acd3..0000000 --- a/source/sliders/slideInLeft.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInLeft { - animation-name: slideInLeft; -} diff --git a/source/sliders/slideInRight.css b/source/sliders/slideInRight.css deleted file mode 100644 index 6c5f024..0000000 --- a/source/sliders/slideInRight.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInRight { - animation-name: slideInRight; -} diff --git a/source/sliders/slideInUp.css b/source/sliders/slideInUp.css deleted file mode 100644 index 3c16dc8..0000000 --- a/source/sliders/slideInUp.css +++ /dev/null @@ -1,15 +0,0 @@ -@keyframes slideInUp { - 0% { - opacity: 0; - transform: translateY(2000px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.slideInUp { - animation-name: slideInUp; -} diff --git a/source/sliders/slideOutDown.css b/source/sliders/slideOutDown.css deleted file mode 100644 index 9dd9a03..0000000 --- a/source/sliders/slideOutDown.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideOutDown { - 0% { - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(2000px); - } -} - -.slideOutDown { - animation-name: slideOutDown; -} diff --git a/source/sliders/slideOutLeft.css b/source/sliders/slideOutLeft.css deleted file mode 100644 index cecd921..0000000 --- a/source/sliders/slideOutLeft.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideOutLeft { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.slideOutLeft { - animation-name: slideOutLeft; -} diff --git a/source/sliders/slideOutRight.css b/source/sliders/slideOutRight.css deleted file mode 100644 index 99884c8..0000000 --- a/source/sliders/slideOutRight.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideOutRight { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.slideOutRight { - animation-name: slideOutRight; -} diff --git a/source/sliders/slideOutUp.css b/source/sliders/slideOutUp.css deleted file mode 100644 index f3bb2bf..0000000 --- a/source/sliders/slideOutUp.css +++ /dev/null @@ -1,14 +0,0 @@ -@keyframes slideOutUp { - 0% { - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.slideOutUp { - animation-name: slideOutUp; -} diff --git a/source/specials/hinge.css b/source/specials/hinge.css index 1ba98e9..5b838fb 100644 --- a/source/specials/hinge.css +++ b/source/specials/hinge.css @@ -1,31 +1,24 @@ @keyframes hinge { 0% { - transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { - transform: rotate(80deg); + transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 40% { - transform: rotate(60deg); - transform-origin: top left; - animation-timing-function: ease-in-out; - } - - 80% { - transform: rotate(60deg) translateY(0); + 40%, 80% { + transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } 100% { - transform: translateY(700px); + transform: translate3d(0, 700px, 0); opacity: 0; } } diff --git a/source/specials/rollIn.css b/source/specials/rollIn.css index d16551d..3b27783 100644 --- a/source/specials/rollIn.css +++ b/source/specials/rollIn.css @@ -3,12 +3,12 @@ @keyframes rollIn { 0% { opacity: 0; - transform: translateX(-100%) rotate(-120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; - transform: translateX(0px) rotate(0deg); + transform: none; } } diff --git a/source/specials/rollOut.css b/source/specials/rollOut.css index 78ee31f..f9cd813 100644 --- a/source/specials/rollOut.css +++ b/source/specials/rollOut.css @@ -3,12 +3,11 @@ @keyframes rollOut { 0% { opacity: 1; - transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; - transform: translateX(100%) rotate(120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } diff --git a/source/zooming_entrances/zoomIn.css b/source/zooming_entrances/zoomIn.css index b4aa047..d03fa83 100644 --- a/source/zooming_entrances/zoomIn.css +++ b/source/zooming_entrances/zoomIn.css @@ -1,9 +1,9 @@ @keyframes zoomIn { 0% { opacity: 0; - transform: scale(.3); + transform: scale3d(.3, .3, .3); } - + 50% { opacity: 1; } @@ -11,4 +11,4 @@ .zoomIn { animation-name: zoomIn; -} \ No newline at end of file +} diff --git a/source/zooming_entrances/zoomInDown.css b/source/zooming_entrances/zoomInDown.css index 272e8bd..6e70bf4 100644 --- a/source/zooming_entrances/zoomInDown.css +++ b/source/zooming_entrances/zoomInDown.css @@ -1,17 +1,17 @@ @keyframes zoomInDown { 0% { opacity: 0; - transform: scale(.1) translateY(-2000px); - animation-timing-function: ease-in-out; + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } - + 60% { opacity: 1; - transform: scale(.475) translateY(60px); - animation-timing-function: ease-out; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { animation-name: zoomInDown; -} \ No newline at end of file +} diff --git a/source/zooming_entrances/zoomInLeft.css b/source/zooming_entrances/zoomInLeft.css index 7185a97..3ee2df1 100644 --- a/source/zooming_entrances/zoomInLeft.css +++ b/source/zooming_entrances/zoomInLeft.css @@ -1,17 +1,17 @@ @keyframes zoomInLeft { 0% { opacity: 0; - transform: scale(.1) translateX(-2000px); - animation-timing-function: ease-in-out; + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } - + 60% { opacity: 1; - transform: scale(.475) translateX(48px); - animation-timing-function: ease-out; + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { animation-name: zoomInLeft; -} \ No newline at end of file +} diff --git a/source/zooming_entrances/zoomInRight.css b/source/zooming_entrances/zoomInRight.css index 87d4572..04c7d8f 100644 --- a/source/zooming_entrances/zoomInRight.css +++ b/source/zooming_entrances/zoomInRight.css @@ -1,17 +1,17 @@ @keyframes zoomInRight { 0% { opacity: 0; - transform: scale(.1) translateX(2000px); - animation-timing-function: ease-in-out; + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } - + 60% { opacity: 1; - transform: scale(.475) translateX(-48px); - animation-timing-function: ease-out; + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { animation-name: zoomInRight; -} \ No newline at end of file +} diff --git a/source/zooming_entrances/zoomInUp.css b/source/zooming_entrances/zoomInUp.css index ab8a667..2518fa1 100644 --- a/source/zooming_entrances/zoomInUp.css +++ b/source/zooming_entrances/zoomInUp.css @@ -1,17 +1,17 @@ @keyframes zoomInUp { 0% { opacity: 0; - transform: scale(.1) translateY(2000px); - animation-timing-function: ease-in-out; + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } - + 60% { opacity: 1; - transform: scale(.475) translateY(-60px); - animation-timing-function: ease-out; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { animation-name: zoomInUp; -} \ No newline at end of file +} diff --git a/source/zooming_exits/zoomOut.css b/source/zooming_exits/zoomOut.css index 7b3b116..f400e35 100644 --- a/source/zooming_exits/zoomOut.css +++ b/source/zooming_exits/zoomOut.css @@ -1,14 +1,13 @@ @keyframes zoomOut { 0% { opacity: 1; - transform: scale(1); } - + 50% { opacity: 0; - transform: scale(.3); + transform: scale3d(.3, .3, .3); } - + 100% { opacity: 0; } @@ -16,4 +15,4 @@ .zoomOut { animation-name: zoomOut; -} \ No newline at end of file +} diff --git a/source/zooming_exits/zoomOutDown.css b/source/zooming_exits/zoomOutDown.css index b9a106e..aeff012 100644 --- a/source/zooming_exits/zoomOutDown.css +++ b/source/zooming_exits/zoomOutDown.css @@ -1,17 +1,18 @@ @keyframes zoomOutDown { 40% { opacity: 1; - transform: scale(.475) translateY(-60px); - animation-timing-function: linear; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } - + 100% { opacity: 0; - transform: scale(.1) translateY(2000px); + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { animation-name: zoomOutDown; -} \ No newline at end of file +} diff --git a/source/zooming_exits/zoomOutLeft.css b/source/zooming_exits/zoomOutLeft.css index f7b1906..1975221 100644 --- a/source/zooming_exits/zoomOutLeft.css +++ b/source/zooming_exits/zoomOutLeft.css @@ -1,17 +1,16 @@ @keyframes zoomOutLeft { 40% { opacity: 1; - transform: scale(.475) translateX(42px); - animation-timing-function: linear; + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } - + 100% { opacity: 0; - transform: scale(.1) translateX(-2000px); + transform: scale(.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } .zoomOutLeft { animation-name: zoomOutLeft; -} \ No newline at end of file +} diff --git a/source/zooming_exits/zoomOutRight.css b/source/zooming_exits/zoomOutRight.css index de1b11c..f3a068b 100644 --- a/source/zooming_exits/zoomOutRight.css +++ b/source/zooming_exits/zoomOutRight.css @@ -1,17 +1,16 @@ @keyframes zoomOutRight { 40% { opacity: 1; - transform: scale(.475) translateX(-42px); - animation-timing-function: linear; + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } - + 100% { opacity: 0; - transform: scale(.1) translateX(2000px); + transform: scale(.1) translate3d(2000px, 0, 0); transform-origin: right center; } } .zoomOutRight { animation-name: zoomOutRight; -} \ No newline at end of file +} diff --git a/source/zooming_exits/zoomOutUp.css b/source/zooming_exits/zoomOutUp.css index a683cda..efa76aa 100644 --- a/source/zooming_exits/zoomOutUp.css +++ b/source/zooming_exits/zoomOutUp.css @@ -1,17 +1,18 @@ @keyframes zoomOutUp { 40% { opacity: 1; - transform: scale(.475) translateY(60px); - animation-timing-function: linear; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } - + 100% { opacity: 0; - transform: scale(.1) translateY(-2000px); - transform-origin: center top; + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { animation-name: zoomOutUp; -} \ No newline at end of file +}