From 9310cf98ed303004d77ff7abf3761e73194540d5 Mon Sep 17 00:00:00 2001 From: Sarbbottam Bandyopadhyay Date: Mon, 24 Feb 2014 02:09:02 +0530 Subject: [PATCH 1/3] Unified formatting across files indent_style = space indent_size = 2 insert_final_newline = true each line within { } to specify single rule --- .gitignore | 2 +- animate-config.json | 2 +- source/_base.css | 2 +- source/attention_seekers/bounce.css | 16 ++++++--- source/attention_seekers/flash.css | 11 ++++-- source/attention_seekers/pulse.css | 16 ++++++--- source/attention_seekers/rubberBand.css | 24 ++++++++++--- source/attention_seekers/shake.css | 16 ++++++--- source/attention_seekers/swing.css | 26 ++++++++++---- source/attention_seekers/tada.css | 26 ++++++++++---- source/attention_seekers/wobble.css | 36 ++++++++++++++----- source/bouncing_entrances/bounceInDown.css | 2 +- source/bouncing_entrances/bounceInLeft.css | 2 +- source/bouncing_entrances/bounceInRight.css | 2 +- source/bouncing_entrances/bounceInUp.css | 2 +- source/bouncing_exits/bounceOut.css | 2 +- source/bouncing_exits/bounceOutDown.css | 2 +- source/bouncing_exits/bounceOutLeft.css | 2 +- source/bouncing_exits/bounceOutRight.css | 2 +- source/bouncing_exits/bounceOutUp.css | 2 +- source/fading_entrances/fadeIn.css | 2 +- source/fading_entrances/fadeInDown.css | 2 +- source/fading_entrances/fadeInDownBig.css | 2 +- source/fading_entrances/fadeInLeft.css | 2 +- source/fading_entrances/fadeInLeftBig.css | 2 +- source/fading_entrances/fadeInRight.css | 2 +- source/fading_entrances/fadeInRightBig.css | 2 +- source/fading_entrances/fadeInUp.css | 2 +- source/fading_entrances/fadeInUpBig.css | 2 +- source/fading_exits/fadeOut.css | 2 +- source/fading_exits/fadeOutDown.css | 2 +- source/fading_exits/fadeOutDownBig.css | 2 +- source/fading_exits/fadeOutLeft.css | 2 +- source/fading_exits/fadeOutLeftBig.css | 2 +- source/fading_exits/fadeOutRight.css | 2 +- source/fading_exits/fadeOutRightBig.css | 2 +- source/fading_exits/fadeOutUp.css | 2 +- source/fading_exits/fadeOutUpBig.css | 2 +- source/flippers/flip.css | 4 +++ source/flippers/flipInX.css | 30 ++++++++-------- source/flippers/flipInY.css | 30 ++++++++-------- source/flippers/flipOutX.css | 19 +++++----- source/flippers/flipOutY.css | 19 +++++----- source/lightspeed/lightSpeedIn.css | 25 +++++++++---- source/lightspeed/lightSpeedOut.css | 16 +++++---- source/rotating_entrances/rotateIn.css | 2 +- .../rotating_entrances/rotateInDownLeft.css | 2 +- .../rotating_entrances/rotateInDownRight.css | 2 +- source/rotating_entrances/rotateInUpLeft.css | 2 +- source/rotating_entrances/rotateInUpRight.css | 2 +- source/rotating_exits/rotateOut.css | 2 +- source/rotating_exits/rotateOutDownLeft.css | 2 +- source/rotating_exits/rotateOutDownRight.css | 2 +- source/rotating_exits/rotateOutUpRight.css | 2 +- source/sliders/slideInDown.css | 2 +- source/sliders/slideInLeft.css | 2 +- source/sliders/slideInRight.css | 2 +- source/sliders/slideOutLeft.css | 2 +- source/sliders/slideOutRight.css | 2 +- source/sliders/slideOutUp.css | 2 +- source/specials/hinge.css | 36 +++++++++++++++---- source/specials/rollIn.css | 13 +++++-- source/specials/rollOut.css | 6 ++-- 63 files changed, 301 insertions(+), 158 deletions(-) diff --git a/.gitignore b/.gitignore index a1998a5..5e0f46f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ .sass-cache node_modules/ -.DS_Store \ No newline at end of file +.DS_Store diff --git a/animate-config.json b/animate-config.json index e21f369..3f4ae95 100644 --- a/animate-config.json +++ b/animate-config.json @@ -95,4 +95,4 @@ "rollOut": true } -} \ No newline at end of file +} diff --git a/source/_base.css b/source/_base.css index 8432987..44434ab 100644 --- a/source/_base.css +++ b/source/_base.css @@ -19,4 +19,4 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI .animated.hinge { animation-duration: 2s; -} \ No newline at end of file +} diff --git a/source/attention_seekers/bounce.css b/source/attention_seekers/bounce.css index a554e35..c79f048 100644 --- a/source/attention_seekers/bounce.css +++ b/source/attention_seekers/bounce.css @@ -1,9 +1,17 @@ @keyframes bounce { - 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} - 40% {transform: translateY(-30px);} - 60% {transform: translateY(-15px);} + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + + 40% { + transform: translateY(-30px); + } + + 60% { + transform: translateY(-15px); + } } .bounce { animation-name: bounce; -} \ No newline at end of file +} diff --git a/source/attention_seekers/flash.css b/source/attention_seekers/flash.css index 5f36d8a..7781b1a 100644 --- a/source/attention_seekers/flash.css +++ b/source/attention_seekers/flash.css @@ -1,8 +1,13 @@ @keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} + 0%, 50%, 100% { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } } .flash { animation-name: flash; -} \ No newline at end of file +} diff --git a/source/attention_seekers/pulse.css b/source/attention_seekers/pulse.css index b77622c..c1df21e 100644 --- a/source/attention_seekers/pulse.css +++ b/source/attention_seekers/pulse.css @@ -1,11 +1,19 @@ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.1); } - 100% { transform: scale(1); } + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.1); + } + + 100% { + transform: scale(1); + } } .pulse { animation-name: pulse; -} \ No newline at end of file +} diff --git a/source/attention_seekers/rubberBand.css b/source/attention_seekers/rubberBand.css index e057de4..f1d8ce3 100644 --- a/source/attention_seekers/rubberBand.css +++ b/source/attention_seekers/rubberBand.css @@ -1,9 +1,23 @@ @keyframes rubberBand { - 0% { transform: scale(1); } - 30% { transform: scaleX(1.25) scaleY(0.75); } - 40% { transform: scaleX(0.75) scaleY(1.25); } - 60% { transform: scaleX(1.15) scaleY(0.85); } - 100% { transform: scale(1); } + 0% { + transform: scale(1); + } + + 30% { + transform: scaleX(1.25) scaleY(0.75); + } + + 40% { + transform: scaleX(0.75) scaleY(1.25); + } + + 60% { + transform: scaleX(1.15) scaleY(0.85); + } + + 100% { + transform: scale(1); + } } .rubberBand { diff --git a/source/attention_seekers/shake.css b/source/attention_seekers/shake.css index 69180ba..98bef4e 100644 --- a/source/attention_seekers/shake.css +++ b/source/attention_seekers/shake.css @@ -1,9 +1,17 @@ @keyframes shake { - 0%, 100% {transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} - 20%, 40%, 60%, 80% {transform: translateX(10px);} + 0%, 100% { + transform: translateX(0); + } + + 10%, 30%, 50%, 70%, 90% { + transform: translateX(-10px); + } + + 20%, 40%, 60%, 80% { + transform: translateX(10px); + } } .shake { animation-name: shake; -} \ No newline at end of file +} diff --git a/source/attention_seekers/swing.css b/source/attention_seekers/swing.css index 70e7261..b94f453 100644 --- a/source/attention_seekers/swing.css +++ b/source/attention_seekers/swing.css @@ -1,12 +1,26 @@ @keyframes swing { - 20% { transform: rotate(15deg); } - 40% { transform: rotate(-10deg); } - 60% { transform: rotate(5deg); } - 80% { transform: rotate(-5deg); } - 100% { transform: rotate(0deg); } + 20% { + transform: rotate(15deg); + } + + 40% { + transform: rotate(-10deg); + } + + 60% { + transform: rotate(5deg); + } + + 80% { t + ransform: rotate(-5deg); + } + + 100% { + transform: rotate(0deg); + } } .swing { transform-origin: top center; animation-name: swing; -} \ No newline at end of file +} diff --git a/source/attention_seekers/tada.css b/source/attention_seekers/tada.css index 172ac2f..c975294 100644 --- a/source/attention_seekers/tada.css +++ b/source/attention_seekers/tada.css @@ -1,11 +1,25 @@ @keyframes tada { - 0% {transform: scale(1);} - 10%, 20% {transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} - 100% {transform: scale(1) rotate(0);} + 0% { + transform: scale(1); + } + + 10%, 20% { + transform: scale(0.9) rotate(-3deg); + } + + 30%, 50%, 70%, 90% { + transform: scale(1.1) rotate(3deg); + } + + 40%, 60%, 80% { + transform: scale(1.1) rotate(-3deg); + } + + 100% { + transform: scale(1) rotate(0); + } } .tada { animation-name: tada; -} \ No newline at end of file +} diff --git a/source/attention_seekers/wobble.css b/source/attention_seekers/wobble.css index d4e16e6..d87d260 100644 --- a/source/attention_seekers/wobble.css +++ b/source/attention_seekers/wobble.css @@ -1,15 +1,35 @@ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes wobble { - 0% { transform: translateX(0%); } - 15% { transform: translateX(-25%) rotate(-5deg); } - 30% { transform: translateX(20%) rotate(3deg); } - 45% { transform: translateX(-15%) rotate(-3deg); } - 60% { transform: translateX(10%) rotate(2deg); } - 75% { transform: translateX(-5%) rotate(-1deg); } - 100% { transform: translateX(0%); } + 0% { + transform: translateX(0%); + } + + 15% { + transform: translateX(-25%) rotate(-5deg); + } + + 30% { + transform: translateX(20%) rotate(3deg); + } + + 45% { + transform: translateX(-15%) rotate(-3deg); + } + + 60% { + transform: translateX(10%) rotate(2deg); + } + + 75% { + transform: translateX(-5%) rotate(-1deg); + } + + 100% { + transform: translateX(0%); + } } .wobble { animation-name: wobble; -} \ No newline at end of file +} diff --git a/source/bouncing_entrances/bounceInDown.css b/source/bouncing_entrances/bounceInDown.css index 698c78d..d4fe3b2 100644 --- a/source/bouncing_entrances/bounceInDown.css +++ b/source/bouncing_entrances/bounceInDown.css @@ -20,4 +20,4 @@ .bounceInDown { animation-name: bounceInDown; -} \ No newline at end of file +} diff --git a/source/bouncing_entrances/bounceInLeft.css b/source/bouncing_entrances/bounceInLeft.css index 8907502..aaebe48 100644 --- a/source/bouncing_entrances/bounceInLeft.css +++ b/source/bouncing_entrances/bounceInLeft.css @@ -20,4 +20,4 @@ .bounceInLeft { animation-name: bounceInLeft; -} \ No newline at end of file +} diff --git a/source/bouncing_entrances/bounceInRight.css b/source/bouncing_entrances/bounceInRight.css index c19e3d2..8210689 100644 --- a/source/bouncing_entrances/bounceInRight.css +++ b/source/bouncing_entrances/bounceInRight.css @@ -20,4 +20,4 @@ .bounceInRight { animation-name: bounceInRight; -} \ No newline at end of file +} diff --git a/source/bouncing_entrances/bounceInUp.css b/source/bouncing_entrances/bounceInUp.css index 4ae91f1..ba04da9 100644 --- a/source/bouncing_entrances/bounceInUp.css +++ b/source/bouncing_entrances/bounceInUp.css @@ -20,4 +20,4 @@ .bounceInUp { animation-name: bounceInUp; -} \ No newline at end of file +} diff --git a/source/bouncing_exits/bounceOut.css b/source/bouncing_exits/bounceOut.css index 559f4de..2150ac1 100644 --- a/source/bouncing_exits/bounceOut.css +++ b/source/bouncing_exits/bounceOut.css @@ -20,4 +20,4 @@ .bounceOut { animation-name: bounceOut; -} \ No newline at end of file +} diff --git a/source/bouncing_exits/bounceOutDown.css b/source/bouncing_exits/bounceOutDown.css index 43d8a43..6c8ba70 100644 --- a/source/bouncing_exits/bounceOutDown.css +++ b/source/bouncing_exits/bounceOutDown.css @@ -16,4 +16,4 @@ .bounceOutDown { animation-name: bounceOutDown; -} \ No newline at end of file +} diff --git a/source/bouncing_exits/bounceOutLeft.css b/source/bouncing_exits/bounceOutLeft.css index 9ec4061..6536eab 100644 --- a/source/bouncing_exits/bounceOutLeft.css +++ b/source/bouncing_exits/bounceOutLeft.css @@ -16,4 +16,4 @@ .bounceOutLeft { animation-name: bounceOutLeft; -} \ No newline at end of file +} diff --git a/source/bouncing_exits/bounceOutRight.css b/source/bouncing_exits/bounceOutRight.css index 5534733..9ae7443 100644 --- a/source/bouncing_exits/bounceOutRight.css +++ b/source/bouncing_exits/bounceOutRight.css @@ -16,4 +16,4 @@ .bounceOutRight { animation-name: bounceOutRight; -} \ No newline at end of file +} diff --git a/source/bouncing_exits/bounceOutUp.css b/source/bouncing_exits/bounceOutUp.css index a8606b8..459cb07 100644 --- a/source/bouncing_exits/bounceOutUp.css +++ b/source/bouncing_exits/bounceOutUp.css @@ -16,4 +16,4 @@ .bounceOutUp { animation-name: bounceOutUp; -} \ No newline at end of file +} diff --git a/source/fading_entrances/fadeIn.css b/source/fading_entrances/fadeIn.css index 2916944..2bd0b64 100644 --- a/source/fading_entrances/fadeIn.css +++ b/source/fading_entrances/fadeIn.css @@ -5,4 +5,4 @@ .fadeIn { animation-name: fadeIn; -} \ No newline at end of file +} diff --git a/source/fading_entrances/fadeInDown.css b/source/fading_entrances/fadeInDown.css index 4328fba..e9107cc 100644 --- a/source/fading_entrances/fadeInDown.css +++ b/source/fading_entrances/fadeInDown.css @@ -12,4 +12,4 @@ .fadeInDown { animation-name: fadeInDown; -} \ No newline at end of file +} diff --git a/source/fading_entrances/fadeInDownBig.css b/source/fading_entrances/fadeInDownBig.css index cca41ff..6232423 100644 --- a/source/fading_entrances/fadeInDownBig.css +++ b/source/fading_entrances/fadeInDownBig.css @@ -12,4 +12,4 @@ .fadeInDownBig { animation-name: fadeInDownBig; -} \ No newline at end of file +} diff --git a/source/fading_entrances/fadeInLeft.css b/source/fading_entrances/fadeInLeft.css index 18ba4ea..b465d59 100644 --- a/source/fading_entrances/fadeInLeft.css +++ b/source/fading_entrances/fadeInLeft.css @@ -12,4 +12,4 @@ .fadeInLeft { animation-name: fadeInLeft; -} \ No newline at end of file +} diff --git a/source/fading_entrances/fadeInLeftBig.css b/source/fading_entrances/fadeInLeftBig.css index 43df0d2..3240e78 100644 --- a/source/fading_entrances/fadeInLeftBig.css +++ b/source/fading_entrances/fadeInLeftBig.css @@ -12,4 +12,4 @@ .fadeInLeftBig { animation-name: fadeInLeftBig; -} \ No newline at end of file +} diff --git a/source/fading_entrances/fadeInRight.css b/source/fading_entrances/fadeInRight.css index 1fe7767..3a066e2 100644 --- a/source/fading_entrances/fadeInRight.css +++ b/source/fading_entrances/fadeInRight.css @@ -12,4 +12,4 @@ .fadeInRight { animation-name: fadeInRight; -} \ No newline at end of file +} diff --git a/source/fading_entrances/fadeInRightBig.css b/source/fading_entrances/fadeInRightBig.css index ab19aec..6baaceb 100644 --- a/source/fading_entrances/fadeInRightBig.css +++ b/source/fading_entrances/fadeInRightBig.css @@ -12,4 +12,4 @@ .fadeInRightBig { animation-name: fadeInRightBig; -} \ No newline at end of file +} diff --git a/source/fading_entrances/fadeInUp.css b/source/fading_entrances/fadeInUp.css index 0aeb471..bd2e61b 100644 --- a/source/fading_entrances/fadeInUp.css +++ b/source/fading_entrances/fadeInUp.css @@ -12,4 +12,4 @@ .fadeInUp { animation-name: fadeInUp; -} \ No newline at end of file +} diff --git a/source/fading_entrances/fadeInUpBig.css b/source/fading_entrances/fadeInUpBig.css index e964f3d..4d3b1d7 100644 --- a/source/fading_entrances/fadeInUpBig.css +++ b/source/fading_entrances/fadeInUpBig.css @@ -12,4 +12,4 @@ .fadeInUpBig { animation-name: fadeInUpBig; -} \ No newline at end of file +} diff --git a/source/fading_exits/fadeOut.css b/source/fading_exits/fadeOut.css index ea9051f..e713a7f 100644 --- a/source/fading_exits/fadeOut.css +++ b/source/fading_exits/fadeOut.css @@ -5,4 +5,4 @@ .fadeOut { animation-name: fadeOut; -} \ No newline at end of file +} diff --git a/source/fading_exits/fadeOutDown.css b/source/fading_exits/fadeOutDown.css index c02763c..3b7eb58 100644 --- a/source/fading_exits/fadeOutDown.css +++ b/source/fading_exits/fadeOutDown.css @@ -12,4 +12,4 @@ .fadeOutDown { animation-name: fadeOutDown; -} \ No newline at end of file +} diff --git a/source/fading_exits/fadeOutDownBig.css b/source/fading_exits/fadeOutDownBig.css index bb0bb61..8a98f7d 100644 --- a/source/fading_exits/fadeOutDownBig.css +++ b/source/fading_exits/fadeOutDownBig.css @@ -12,4 +12,4 @@ .fadeOutDownBig { animation-name: fadeOutDownBig; -} \ No newline at end of file +} diff --git a/source/fading_exits/fadeOutLeft.css b/source/fading_exits/fadeOutLeft.css index d86012a..c4b2397 100644 --- a/source/fading_exits/fadeOutLeft.css +++ b/source/fading_exits/fadeOutLeft.css @@ -12,4 +12,4 @@ .fadeOutLeft { animation-name: fadeOutLeft; -} \ No newline at end of file +} diff --git a/source/fading_exits/fadeOutLeftBig.css b/source/fading_exits/fadeOutLeftBig.css index c74fc51..b0d4c49 100644 --- a/source/fading_exits/fadeOutLeftBig.css +++ b/source/fading_exits/fadeOutLeftBig.css @@ -12,4 +12,4 @@ .fadeOutLeftBig { animation-name: fadeOutLeftBig; -} \ No newline at end of file +} diff --git a/source/fading_exits/fadeOutRight.css b/source/fading_exits/fadeOutRight.css index 54b62ec..8691014 100644 --- a/source/fading_exits/fadeOutRight.css +++ b/source/fading_exits/fadeOutRight.css @@ -12,4 +12,4 @@ .fadeOutRight { animation-name: fadeOutRight; -} \ No newline at end of file +} diff --git a/source/fading_exits/fadeOutRightBig.css b/source/fading_exits/fadeOutRightBig.css index 344998d..c7156a5 100644 --- a/source/fading_exits/fadeOutRightBig.css +++ b/source/fading_exits/fadeOutRightBig.css @@ -12,4 +12,4 @@ .fadeOutRightBig { animation-name: fadeOutRightBig; -} \ No newline at end of file +} diff --git a/source/fading_exits/fadeOutUp.css b/source/fading_exits/fadeOutUp.css index c872ab8..19a2a13 100644 --- a/source/fading_exits/fadeOutUp.css +++ b/source/fading_exits/fadeOutUp.css @@ -12,4 +12,4 @@ .fadeOutUp { animation-name: fadeOutUp; -} \ No newline at end of file +} diff --git a/source/fading_exits/fadeOutUpBig.css b/source/fading_exits/fadeOutUpBig.css index 9029557..469bef3 100644 --- a/source/fading_exits/fadeOutUpBig.css +++ b/source/fading_exits/fadeOutUpBig.css @@ -12,4 +12,4 @@ .fadeOutUpBig { animation-name: fadeOutUpBig; -} \ No newline at end of file +} diff --git a/source/flippers/flip.css b/source/flippers/flip.css index 7e23d90..25e0cbf 100644 --- a/source/flippers/flip.css +++ b/source/flippers/flip.css @@ -3,18 +3,22 @@ transform: perspective(400px) translateZ(0) rotateY(0) scale(1); animation-timing-function: ease-out; } + 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); animation-timing-function: ease-out; } + 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } + 80% { transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); animation-timing-function: ease-in; } + 100% { transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); animation-timing-function: ease-in; diff --git a/source/flippers/flipInX.css b/source/flippers/flipInX.css index dce639f..a2d2394 100644 --- a/source/flippers/flipInX.css +++ b/source/flippers/flipInX.css @@ -1,24 +1,24 @@ @keyframes flipInX { - 0% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } + 0% { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } - 40% { - transform: perspective(400px) rotateX(-10deg); - } + 40% { + transform: perspective(400px) rotateX(-10deg); + } - 70% { - transform: perspective(400px) rotateX(10deg); - } + 70% { + transform: perspective(400px) rotateX(10deg); + } - 100% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } + 100% { + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } } .flipInX { backface-visibility: visible !important; animation-name: flipInX; -} \ No newline at end of file +} diff --git a/source/flippers/flipInY.css b/source/flippers/flipInY.css index 0078030..ca6849c 100644 --- a/source/flippers/flipInY.css +++ b/source/flippers/flipInY.css @@ -1,24 +1,24 @@ @keyframes flipInY { - 0% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } + 0% { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } - 40% { - transform: perspective(400px) rotateY(-10deg); - } + 40% { + transform: perspective(400px) rotateY(-10deg); + } - 70% { - transform: perspective(400px) rotateY(10deg); - } + 70% { + transform: perspective(400px) rotateY(10deg); + } - 100% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } + 100% { + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } } .flipInY { backface-visibility: visible !important; animation-name: flipInY; -} \ No newline at end of file +} diff --git a/source/flippers/flipOutX.css b/source/flippers/flipOutX.css index 4bb32d0..8454f90 100644 --- a/source/flippers/flipOutX.css +++ b/source/flippers/flipOutX.css @@ -1,15 +1,16 @@ @keyframes flipOutX { - 0% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } + 0% { + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + + 100% { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } } .flipOutX { animation-name: flipOutX; backface-visibility: visible !important; -} \ No newline at end of file +} diff --git a/source/flippers/flipOutY.css b/source/flippers/flipOutY.css index 948caf8..e75e11a 100644 --- a/source/flippers/flipOutY.css +++ b/source/flippers/flipOutY.css @@ -1,15 +1,16 @@ @keyframes flipOutY { - 0% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } + 0% { + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + + 100% { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } } .flipOutY { backface-visibility: visible !important; animation-name: flipOutY; -} \ No newline at end of file +} diff --git a/source/lightspeed/lightSpeedIn.css b/source/lightspeed/lightSpeedIn.css index dee261e..b33caad 100644 --- a/source/lightspeed/lightSpeedIn.css +++ b/source/lightspeed/lightSpeedIn.css @@ -1,11 +1,22 @@ @keyframes lightSpeedIn { - 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } + 0% { + transform: translateX(100%) skewX(-30deg); opacity: 0; + } + + 60% { + transform: translateX(-20%) skewX(30deg); opacity: 1; + } + + 80% { + transform: translateX(0%) skewX(-15deg); opacity: 1; + } + + 100% { + transform: translateX(0%) skewX(0deg); opacity: 1; + } } .lightSpeedIn { - animation-name: lightSpeedIn; - animation-timing-function: ease-out; -} \ No newline at end of file + animation-name: lightSpeedIn; + animation-timing-function: ease-out; +} diff --git a/source/lightspeed/lightSpeedOut.css b/source/lightspeed/lightSpeedOut.css index 927f6b4..4b8561c 100644 --- a/source/lightspeed/lightSpeedOut.css +++ b/source/lightspeed/lightSpeedOut.css @@ -1,10 +1,14 @@ @keyframes lightSpeedOut { - 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } + 0% { + transform: translateX(0%) skewX(0deg); opacity: 1; + } + + 100% { + transform: translateX(100%) skewX(-30deg); opacity: 0; + } } .lightSpeedOut { - animation-name: lightSpeedOut; - - animation-timing-function: ease-in; -} \ No newline at end of file + animation-name: lightSpeedOut; + animation-timing-function: ease-in; +} diff --git a/source/rotating_entrances/rotateIn.css b/source/rotating_entrances/rotateIn.css index a1ecc2e..f77e0b5 100644 --- a/source/rotating_entrances/rotateIn.css +++ b/source/rotating_entrances/rotateIn.css @@ -14,4 +14,4 @@ .rotateIn { animation-name: rotateIn; -} \ No newline at end of file +} diff --git a/source/rotating_entrances/rotateInDownLeft.css b/source/rotating_entrances/rotateInDownLeft.css index d347488..e2308f9 100644 --- a/source/rotating_entrances/rotateInDownLeft.css +++ b/source/rotating_entrances/rotateInDownLeft.css @@ -14,4 +14,4 @@ .rotateInDownLeft { animation-name: rotateInDownLeft; -} \ No newline at end of file +} diff --git a/source/rotating_entrances/rotateInDownRight.css b/source/rotating_entrances/rotateInDownRight.css index 9205910..83b81e8 100644 --- a/source/rotating_entrances/rotateInDownRight.css +++ b/source/rotating_entrances/rotateInDownRight.css @@ -14,4 +14,4 @@ .rotateInDownRight { animation-name: rotateInDownRight; -} \ No newline at end of file +} diff --git a/source/rotating_entrances/rotateInUpLeft.css b/source/rotating_entrances/rotateInUpLeft.css index d2f8dfa..8af6fa0 100644 --- a/source/rotating_entrances/rotateInUpLeft.css +++ b/source/rotating_entrances/rotateInUpLeft.css @@ -14,4 +14,4 @@ .rotateInUpLeft { animation-name: rotateInUpLeft; -} \ No newline at end of file +} diff --git a/source/rotating_entrances/rotateInUpRight.css b/source/rotating_entrances/rotateInUpRight.css index 5b4c50d..43f857e 100644 --- a/source/rotating_entrances/rotateInUpRight.css +++ b/source/rotating_entrances/rotateInUpRight.css @@ -14,4 +14,4 @@ .rotateInUpRight { animation-name: rotateInUpRight; -} \ No newline at end of file +} diff --git a/source/rotating_exits/rotateOut.css b/source/rotating_exits/rotateOut.css index d81e919..67f940b 100644 --- a/source/rotating_exits/rotateOut.css +++ b/source/rotating_exits/rotateOut.css @@ -14,4 +14,4 @@ .rotateOut { animation-name: rotateOut; -} \ No newline at end of file +} diff --git a/source/rotating_exits/rotateOutDownLeft.css b/source/rotating_exits/rotateOutDownLeft.css index d94c3c8..c6c8842 100644 --- a/source/rotating_exits/rotateOutDownLeft.css +++ b/source/rotating_exits/rotateOutDownLeft.css @@ -14,4 +14,4 @@ .rotateOutDownLeft { animation-name: rotateOutDownLeft; -} \ No newline at end of file +} diff --git a/source/rotating_exits/rotateOutDownRight.css b/source/rotating_exits/rotateOutDownRight.css index 5d0b90f..e1b9c54 100644 --- a/source/rotating_exits/rotateOutDownRight.css +++ b/source/rotating_exits/rotateOutDownRight.css @@ -14,4 +14,4 @@ .rotateOutDownRight { animation-name: rotateOutDownRight; -} \ No newline at end of file +} diff --git a/source/rotating_exits/rotateOutUpRight.css b/source/rotating_exits/rotateOutUpRight.css index 528fa8b..aa40b08 100644 --- a/source/rotating_exits/rotateOutUpRight.css +++ b/source/rotating_exits/rotateOutUpRight.css @@ -14,4 +14,4 @@ .rotateOutUpRight { animation-name: rotateOutUpRight; -} \ No newline at end of file +} diff --git a/source/sliders/slideInDown.css b/source/sliders/slideInDown.css index 397861d..8ef123a 100644 --- a/source/sliders/slideInDown.css +++ b/source/sliders/slideInDown.css @@ -11,4 +11,4 @@ .slideInDown { animation-name: slideInDown; -} \ No newline at end of file +} diff --git a/source/sliders/slideInLeft.css b/source/sliders/slideInLeft.css index 219d949..667157d 100644 --- a/source/sliders/slideInLeft.css +++ b/source/sliders/slideInLeft.css @@ -11,4 +11,4 @@ .slideInLeft { animation-name: slideInLeft; -} \ No newline at end of file +} diff --git a/source/sliders/slideInRight.css b/source/sliders/slideInRight.css index 7bde814..b684e20 100644 --- a/source/sliders/slideInRight.css +++ b/source/sliders/slideInRight.css @@ -11,4 +11,4 @@ .slideInRight { animation-name: slideInRight; -} \ No newline at end of file +} diff --git a/source/sliders/slideOutLeft.css b/source/sliders/slideOutLeft.css index d0bbde7..51004b4 100644 --- a/source/sliders/slideOutLeft.css +++ b/source/sliders/slideOutLeft.css @@ -11,4 +11,4 @@ .slideOutLeft { animation-name: slideOutLeft; -} \ No newline at end of file +} diff --git a/source/sliders/slideOutRight.css b/source/sliders/slideOutRight.css index 1253906..131202a 100644 --- a/source/sliders/slideOutRight.css +++ b/source/sliders/slideOutRight.css @@ -11,4 +11,4 @@ .slideOutRight { animation-name: slideOutRight; -} \ No newline at end of file +} diff --git a/source/sliders/slideOutUp.css b/source/sliders/slideOutUp.css index 4c344d1..2f484ca 100644 --- a/source/sliders/slideOutUp.css +++ b/source/sliders/slideOutUp.css @@ -11,4 +11,4 @@ .slideOutUp { animation-name: slideOutUp; -} \ No newline at end of file +} diff --git a/source/specials/hinge.css b/source/specials/hinge.css index 0d063d9..01fb779 100644 --- a/source/specials/hinge.css +++ b/source/specials/hinge.css @@ -1,11 +1,35 @@ @keyframes hinge { - 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } - 20%, 60% { transform: rotate(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); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } - 100% { transform: translateY(700px); opacity: 0; } + 0% { + transform: rotate(0); + transform-origin: top left; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + transform: rotate(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); + transform-origin: top left; + animation-timing-function: ease-in-out; + opacity: 1; + } + + 100% { + transform: translateY(700px); + opacity: 0; + } } .hinge { animation-name: hinge; -} \ No newline at end of file +} diff --git a/source/specials/rollIn.css b/source/specials/rollIn.css index 2398ca1..2f02e1f 100644 --- a/source/specials/rollIn.css +++ b/source/specials/rollIn.css @@ -1,10 +1,17 @@ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollIn { - 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } + 0% { + opacity: 0; + transform: translateX(-100%) rotate(-120deg); + } + + 100% { + opacity: 1; + transform: translateX(0px) rotate(0deg); + } } .rollIn { animation-name: rollIn; -} \ No newline at end of file +} diff --git a/source/specials/rollOut.css b/source/specials/rollOut.css index 4471b20..257f945 100644 --- a/source/specials/rollOut.css +++ b/source/specials/rollOut.css @@ -1,12 +1,12 @@ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollOut { - 0% { + 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } - 100% { + 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } @@ -14,4 +14,4 @@ .rollOut { animation-name: rollOut; -} \ No newline at end of file +} From 0bc05a75595c9466759ffa46d9363c982f0a4453 Mon Sep 17 00:00:00 2001 From: Sarbbottam Bandyopadhyay Date: Mon, 24 Feb 2014 03:26:08 +0530 Subject: [PATCH 2/3] converted all the tabs into spaces and fixed typo in the previous commit at source/attention_seekers/swing.css --- README.md | 8 ++-- animate.css | 4 +- animate.min.css | 2 +- source/_base.css | 2 +- source/attention_seekers/bounce.css | 8 ++-- source/attention_seekers/flash.css | 6 +-- source/attention_seekers/pulse.css | 4 +- source/attention_seekers/rubberBand.css | 12 ++--- source/attention_seekers/shake.css | 8 ++-- source/attention_seekers/swing.css | 16 +++---- source/attention_seekers/tada.css | 10 ++--- source/attention_seekers/wobble.css | 2 +- source/bouncing_entrances/bounceIn.css | 32 +++++++------- source/bouncing_entrances/bounceInDown.css | 30 ++++++------- source/bouncing_entrances/bounceInLeft.css | 30 ++++++------- source/bouncing_entrances/bounceInRight.css | 30 ++++++------- source/bouncing_entrances/bounceInUp.css | 30 ++++++------- source/bouncing_exits/bounceOut.css | 30 ++++++------- source/bouncing_exits/bounceOutDown.css | 24 +++++----- source/bouncing_exits/bounceOutLeft.css | 24 +++++----- source/bouncing_exits/bounceOutRight.css | 24 +++++----- source/bouncing_exits/bounceOutUp.css | 24 +++++----- source/fading_entrances/fadeIn.css | 6 +-- source/fading_entrances/fadeInDown.css | 18 ++++---- source/fading_entrances/fadeInDownBig.css | 18 ++++---- source/fading_entrances/fadeInLeft.css | 18 ++++---- source/fading_entrances/fadeInLeftBig.css | 18 ++++---- source/fading_entrances/fadeInRight.css | 18 ++++---- source/fading_entrances/fadeInRightBig.css | 18 ++++---- source/fading_entrances/fadeInUp.css | 18 ++++---- source/fading_entrances/fadeInUpBig.css | 18 ++++---- source/fading_exits/fadeOut.css | 6 +-- source/fading_exits/fadeOutDown.css | 18 ++++---- source/fading_exits/fadeOutDownBig.css | 18 ++++---- source/fading_exits/fadeOutLeft.css | 18 ++++---- source/fading_exits/fadeOutLeftBig.css | 18 ++++---- source/fading_exits/fadeOutRight.css | 18 ++++---- source/fading_exits/fadeOutRightBig.css | 18 ++++---- source/fading_exits/fadeOutUp.css | 18 ++++---- source/fading_exits/fadeOutUpBig.css | 18 ++++---- source/flippers/flip.css | 44 +++++++++---------- source/flippers/flipInX.css | 4 +- source/flippers/flipInY.css | 4 +- source/flippers/flipOutX.css | 4 +- source/flippers/flipOutY.css | 4 +- source/lightspeed/lightSpeedIn.css | 20 +++++---- source/lightspeed/lightSpeedOut.css | 10 +++-- source/rotating_entrances/rotateIn.css | 22 +++++----- .../rotating_entrances/rotateInDownLeft.css | 22 +++++----- .../rotating_entrances/rotateInDownRight.css | 22 +++++----- source/rotating_entrances/rotateInUpLeft.css | 22 +++++----- source/rotating_entrances/rotateInUpRight.css | 22 +++++----- source/rotating_exits/rotateOut.css | 22 +++++----- source/rotating_exits/rotateOutDownLeft.css | 22 +++++----- source/rotating_exits/rotateOutDownRight.css | 22 +++++----- source/rotating_exits/rotateOutUpLeft.css | 22 +++++----- source/rotating_exits/rotateOutUpRight.css | 22 +++++----- source/sliders/slideInDown.css | 16 +++---- source/sliders/slideInLeft.css | 16 +++---- source/sliders/slideInRight.css | 16 +++---- source/sliders/slideOutLeft.css | 16 +++---- source/sliders/slideOutRight.css | 16 +++---- source/sliders/slideOutUp.css | 16 +++---- source/specials/hinge.css | 12 ++--- source/specials/rollIn.css | 6 +-- source/specials/rollOut.css | 14 +++--- 66 files changed, 552 insertions(+), 546 deletions(-) diff --git a/README.md b/README.md index 3943e21..375f802 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ To use animate.css in your website, simply drop the stylesheet into your documen ```html - + ``` @@ -28,9 +28,9 @@ You can change the duration of your animations, add a delay or change the number ```css #yourElement { - -vendor-animation-duration: 3s; - -vendor-animation-delay: 2s; - -vendor-animation-iteration-count: infinite; + -vendor-animation-duration: 3s; + -vendor-animation-delay: 2s; + -vendor-animation-iteration-count: infinite; } ``` diff --git a/animate.css b/animate.css index 3bd4314..8c86b72 100644 --- a/animate.css +++ b/animate.css @@ -2661,11 +2661,11 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); - opacity: 1; -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% { @@ -2713,12 +2713,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); - opacity: 1; -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% { diff --git a/animate.min.css b/animate.min.css index 62a91a9..3ba74fc 100644 --- a/animate.min.css +++ b/animate.min.css @@ -9,4 +9,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.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(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-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-out;animation-timing-function:ease-out}50%{-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-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-ms-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-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-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 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);opacity:1;-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}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);opacity:1;-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}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} \ No newline at end of file +*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.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(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-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-out;animation-timing-function:ease-out}50%{-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-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-ms-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-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-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 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} \ No newline at end of file diff --git a/source/_base.css b/source/_base.css index 44434ab..f2d0116 100644 --- a/source/_base.css +++ b/source/_base.css @@ -18,5 +18,5 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI } .animated.hinge { - animation-duration: 2s; + animation-duration: 2s; } diff --git a/source/attention_seekers/bounce.css b/source/attention_seekers/bounce.css index c79f048..3a786d2 100644 --- a/source/attention_seekers/bounce.css +++ b/source/attention_seekers/bounce.css @@ -1,17 +1,17 @@ @keyframes bounce { - 0%, 20%, 50%, 80%, 100% { + 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } - 40% { + 40% { transform: translateY(-30px); } - 60% { + 60% { transform: translateY(-15px); } } .bounce { - animation-name: bounce; + animation-name: bounce; } diff --git a/source/attention_seekers/flash.css b/source/attention_seekers/flash.css index 7781b1a..b41036a 100644 --- a/source/attention_seekers/flash.css +++ b/source/attention_seekers/flash.css @@ -1,13 +1,13 @@ @keyframes flash { - 0%, 50%, 100% { + 0%, 50%, 100% { opacity: 1; } - 25%, 75% { + 25%, 75% { opacity: 0; } } .flash { - animation-name: flash; + animation-name: flash; } diff --git a/source/attention_seekers/pulse.css b/source/attention_seekers/pulse.css index c1df21e..f1f47f8 100644 --- a/source/attention_seekers/pulse.css +++ b/source/attention_seekers/pulse.css @@ -5,7 +5,7 @@ transform: scale(1); } - 50% { + 50% { transform: scale(1.1); } @@ -15,5 +15,5 @@ } .pulse { - animation-name: pulse; + animation-name: pulse; } diff --git a/source/attention_seekers/rubberBand.css b/source/attention_seekers/rubberBand.css index f1d8ce3..0bce131 100644 --- a/source/attention_seekers/rubberBand.css +++ b/source/attention_seekers/rubberBand.css @@ -1,25 +1,25 @@ @keyframes rubberBand { - 0% { + 0% { transform: scale(1); } - 30% { + 30% { transform: scaleX(1.25) scaleY(0.75); } - 40% { + 40% { transform: scaleX(0.75) scaleY(1.25); } - 60% { + 60% { transform: scaleX(1.15) scaleY(0.85); } - 100% { + 100% { transform: scale(1); } } .rubberBand { - animation-name: rubberBand; + animation-name: rubberBand; } diff --git a/source/attention_seekers/shake.css b/source/attention_seekers/shake.css index 98bef4e..4845b66 100644 --- a/source/attention_seekers/shake.css +++ b/source/attention_seekers/shake.css @@ -1,17 +1,17 @@ @keyframes shake { - 0%, 100% { + 0%, 100% { transform: translateX(0); } - 10%, 30%, 50%, 70%, 90% { + 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } - 20%, 40%, 60%, 80% { + 20%, 40%, 60%, 80% { transform: translateX(10px); } } .shake { - animation-name: shake; + animation-name: shake; } diff --git a/source/attention_seekers/swing.css b/source/attention_seekers/swing.css index b94f453..bfd29b4 100644 --- a/source/attention_seekers/swing.css +++ b/source/attention_seekers/swing.css @@ -1,26 +1,26 @@ @keyframes swing { - 20% { + 20% { transform: rotate(15deg); } - 40% { + 40% { transform: rotate(-10deg); } - 60% { + 60% { transform: rotate(5deg); } - 80% { t - ransform: rotate(-5deg); + 80% { + transform: rotate(-5deg); } - 100% { + 100% { transform: rotate(0deg); } } .swing { - transform-origin: top center; - animation-name: swing; + transform-origin: top center; + animation-name: swing; } diff --git a/source/attention_seekers/tada.css b/source/attention_seekers/tada.css index c975294..c9ac87f 100644 --- a/source/attention_seekers/tada.css +++ b/source/attention_seekers/tada.css @@ -1,17 +1,17 @@ @keyframes tada { - 0% { + 0% { transform: scale(1); } - 10%, 20% { + 10%, 20% { transform: scale(0.9) rotate(-3deg); } - 30%, 50%, 70%, 90% { + 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } - 40%, 60%, 80% { + 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } @@ -21,5 +21,5 @@ } .tada { - animation-name: tada; + animation-name: tada; } diff --git a/source/attention_seekers/wobble.css b/source/attention_seekers/wobble.css index d87d260..947cc8c 100644 --- a/source/attention_seekers/wobble.css +++ b/source/attention_seekers/wobble.css @@ -31,5 +31,5 @@ } .wobble { - animation-name: wobble; + animation-name: wobble; } diff --git a/source/bouncing_entrances/bounceIn.css b/source/bouncing_entrances/bounceIn.css index 8b407c6..c2614e7 100644 --- a/source/bouncing_entrances/bounceIn.css +++ b/source/bouncing_entrances/bounceIn.css @@ -1,24 +1,24 @@ @keyframes bounceIn { - 0% { - opacity: 0; - transform: scale(.3); - } + 0% { + opacity: 0; + transform: scale(.3); + } - 50% { - opacity: 1; - transform: scale(1.05); - } + 50% { + opacity: 1; + transform: scale(1.05); + } - 70% { - transform: scale(.9); - } + 70% { + transform: scale(.9); + } - 100% { - opacity: 1; - transform: scale(1); - } + 100% { + opacity: 1; + transform: scale(1); + } } .bounceIn { - animation-name: bounceIn; + animation-name: bounceIn; } diff --git a/source/bouncing_entrances/bounceInDown.css b/source/bouncing_entrances/bounceInDown.css index d4fe3b2..1655426 100644 --- a/source/bouncing_entrances/bounceInDown.css +++ b/source/bouncing_entrances/bounceInDown.css @@ -1,23 +1,23 @@ @keyframes bounceInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } + 0% { + opacity: 0; + transform: translateY(-2000px); + } - 60% { - opacity: 1; - transform: translateY(30px); - } + 60% { + opacity: 1; + transform: translateY(30px); + } - 80% { - transform: translateY(-10px); - } + 80% { + transform: translateY(-10px); + } - 100% { - transform: translateY(0); - } + 100% { + transform: translateY(0); + } } .bounceInDown { - animation-name: bounceInDown; + animation-name: bounceInDown; } diff --git a/source/bouncing_entrances/bounceInLeft.css b/source/bouncing_entrances/bounceInLeft.css index aaebe48..2ad5353 100644 --- a/source/bouncing_entrances/bounceInLeft.css +++ b/source/bouncing_entrances/bounceInLeft.css @@ -1,23 +1,23 @@ @keyframes bounceInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } + 0% { + opacity: 0; + transform: translateX(-2000px); + } - 60% { - opacity: 1; - transform: translateX(30px); - } + 60% { + opacity: 1; + transform: translateX(30px); + } - 80% { - transform: translateX(-10px); - } + 80% { + transform: translateX(-10px); + } - 100% { - transform: translateX(0); - } + 100% { + transform: translateX(0); + } } .bounceInLeft { - animation-name: bounceInLeft; + animation-name: bounceInLeft; } diff --git a/source/bouncing_entrances/bounceInRight.css b/source/bouncing_entrances/bounceInRight.css index 8210689..ee08d39 100644 --- a/source/bouncing_entrances/bounceInRight.css +++ b/source/bouncing_entrances/bounceInRight.css @@ -1,23 +1,23 @@ @keyframes bounceInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } + 0% { + opacity: 0; + transform: translateX(2000px); + } - 60% { - opacity: 1; - transform: translateX(-30px); - } + 60% { + opacity: 1; + transform: translateX(-30px); + } - 80% { - transform: translateX(10px); - } + 80% { + transform: translateX(10px); + } - 100% { - transform: translateX(0); - } + 100% { + transform: translateX(0); + } } .bounceInRight { - animation-name: bounceInRight; + animation-name: bounceInRight; } diff --git a/source/bouncing_entrances/bounceInUp.css b/source/bouncing_entrances/bounceInUp.css index ba04da9..ab1cbe5 100644 --- a/source/bouncing_entrances/bounceInUp.css +++ b/source/bouncing_entrances/bounceInUp.css @@ -1,23 +1,23 @@ @keyframes bounceInUp { - 0% { - opacity: 0; - transform: translateY(2000px); - } + 0% { + opacity: 0; + transform: translateY(2000px); + } - 60% { - opacity: 1; - transform: translateY(-30px); - } + 60% { + opacity: 1; + transform: translateY(-30px); + } - 80% { - transform: translateY(10px); - } + 80% { + transform: translateY(10px); + } - 100% { - transform: translateY(0); - } + 100% { + transform: translateY(0); + } } .bounceInUp { - animation-name: bounceInUp; + animation-name: bounceInUp; } diff --git a/source/bouncing_exits/bounceOut.css b/source/bouncing_exits/bounceOut.css index 2150ac1..2a1da32 100644 --- a/source/bouncing_exits/bounceOut.css +++ b/source/bouncing_exits/bounceOut.css @@ -1,23 +1,23 @@ @keyframes bounceOut { - 0% { - transform: scale(1); - } + 0% { + transform: scale(1); + } - 25% { - transform: scale(.95); - } + 25% { + transform: scale(.95); + } - 50% { - opacity: 1; - transform: scale(1.1); - } + 50% { + opacity: 1; + transform: scale(1.1); + } - 100% { - opacity: 0; - transform: scale(.3); - } + 100% { + opacity: 0; + transform: scale(.3); + } } .bounceOut { - animation-name: bounceOut; + animation-name: bounceOut; } diff --git a/source/bouncing_exits/bounceOutDown.css b/source/bouncing_exits/bounceOutDown.css index 6c8ba70..dc29a0b 100644 --- a/source/bouncing_exits/bounceOutDown.css +++ b/source/bouncing_exits/bounceOutDown.css @@ -1,19 +1,19 @@ @keyframes bounceOutDown { - 0% { - transform: translateY(0); - } + 0% { + transform: translateY(0); + } - 20% { - opacity: 1; - transform: translateY(-20px); - } + 20% { + opacity: 1; + transform: translateY(-20px); + } - 100% { - opacity: 0; - transform: translateY(2000px); - } + 100% { + opacity: 0; + transform: translateY(2000px); + } } .bounceOutDown { - animation-name: bounceOutDown; + animation-name: bounceOutDown; } diff --git a/source/bouncing_exits/bounceOutLeft.css b/source/bouncing_exits/bounceOutLeft.css index 6536eab..7bc2eed 100644 --- a/source/bouncing_exits/bounceOutLeft.css +++ b/source/bouncing_exits/bounceOutLeft.css @@ -1,19 +1,19 @@ @keyframes bounceOutLeft { - 0% { - transform: translateX(0); - } + 0% { + transform: translateX(0); + } - 20% { - opacity: 1; - transform: translateX(20px); - } + 20% { + opacity: 1; + transform: translateX(20px); + } - 100% { - opacity: 0; - transform: translateX(-2000px); - } + 100% { + opacity: 0; + transform: translateX(-2000px); + } } .bounceOutLeft { - animation-name: bounceOutLeft; + animation-name: bounceOutLeft; } diff --git a/source/bouncing_exits/bounceOutRight.css b/source/bouncing_exits/bounceOutRight.css index 9ae7443..963ae06 100644 --- a/source/bouncing_exits/bounceOutRight.css +++ b/source/bouncing_exits/bounceOutRight.css @@ -1,19 +1,19 @@ @keyframes bounceOutRight { - 0% { - transform: translateX(0); - } + 0% { + transform: translateX(0); + } - 20% { - opacity: 1; - transform: translateX(-20px); - } + 20% { + opacity: 1; + transform: translateX(-20px); + } - 100% { - opacity: 0; - transform: translateX(2000px); - } + 100% { + opacity: 0; + transform: translateX(2000px); + } } .bounceOutRight { - animation-name: bounceOutRight; + animation-name: bounceOutRight; } diff --git a/source/bouncing_exits/bounceOutUp.css b/source/bouncing_exits/bounceOutUp.css index 459cb07..fc4009b 100644 --- a/source/bouncing_exits/bounceOutUp.css +++ b/source/bouncing_exits/bounceOutUp.css @@ -1,19 +1,19 @@ @keyframes bounceOutUp { - 0% { - transform: translateY(0); - } + 0% { + transform: translateY(0); + } - 20% { - opacity: 1; - transform: translateY(20px); - } + 20% { + opacity: 1; + transform: translateY(20px); + } - 100% { - opacity: 0; - transform: translateY(-2000px); - } + 100% { + opacity: 0; + transform: translateY(-2000px); + } } .bounceOutUp { - animation-name: bounceOutUp; + animation-name: bounceOutUp; } diff --git a/source/fading_entrances/fadeIn.css b/source/fading_entrances/fadeIn.css index 2bd0b64..eab85fc 100644 --- a/source/fading_entrances/fadeIn.css +++ b/source/fading_entrances/fadeIn.css @@ -1,8 +1,8 @@ @keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} + 0% {opacity: 0;} + 100% {opacity: 1;} } .fadeIn { - animation-name: fadeIn; + animation-name: fadeIn; } diff --git a/source/fading_entrances/fadeInDown.css b/source/fading_entrances/fadeInDown.css index e9107cc..ee9cf30 100644 --- a/source/fading_entrances/fadeInDown.css +++ b/source/fading_entrances/fadeInDown.css @@ -1,15 +1,15 @@ @keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-20px); - } + 0% { + opacity: 0; + transform: translateY(-20px); + } - 100% { - opacity: 1; - transform: translateY(0); - } + 100% { + opacity: 1; + transform: translateY(0); + } } .fadeInDown { - animation-name: fadeInDown; + animation-name: fadeInDown; } diff --git a/source/fading_entrances/fadeInDownBig.css b/source/fading_entrances/fadeInDownBig.css index 6232423..53d3be7 100644 --- a/source/fading_entrances/fadeInDownBig.css +++ b/source/fading_entrances/fadeInDownBig.css @@ -1,15 +1,15 @@ @keyframes fadeInDownBig { - 0% { - opacity: 0; - transform: translateY(-2000px); - } + 0% { + opacity: 0; + transform: translateY(-2000px); + } - 100% { - opacity: 1; - transform: translateY(0); - } + 100% { + opacity: 1; + transform: translateY(0); + } } .fadeInDownBig { - animation-name: fadeInDownBig; + animation-name: fadeInDownBig; } diff --git a/source/fading_entrances/fadeInLeft.css b/source/fading_entrances/fadeInLeft.css index b465d59..3781a0f 100644 --- a/source/fading_entrances/fadeInLeft.css +++ b/source/fading_entrances/fadeInLeft.css @@ -1,15 +1,15 @@ @keyframes fadeInLeft { - 0% { - opacity: 0; - transform: translateX(-20px); - } + 0% { + opacity: 0; + transform: translateX(-20px); + } - 100% { - opacity: 1; - transform: translateX(0); - } + 100% { + opacity: 1; + transform: translateX(0); + } } .fadeInLeft { - animation-name: fadeInLeft; + animation-name: fadeInLeft; } diff --git a/source/fading_entrances/fadeInLeftBig.css b/source/fading_entrances/fadeInLeftBig.css index 3240e78..5c62966 100644 --- a/source/fading_entrances/fadeInLeftBig.css +++ b/source/fading_entrances/fadeInLeftBig.css @@ -1,15 +1,15 @@ @keyframes fadeInLeftBig { - 0% { - opacity: 0; - transform: translateX(-2000px); - } + 0% { + opacity: 0; + transform: translateX(-2000px); + } - 100% { - opacity: 1; - transform: translateX(0); - } + 100% { + opacity: 1; + transform: translateX(0); + } } .fadeInLeftBig { - animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; } diff --git a/source/fading_entrances/fadeInRight.css b/source/fading_entrances/fadeInRight.css index 3a066e2..6285505 100644 --- a/source/fading_entrances/fadeInRight.css +++ b/source/fading_entrances/fadeInRight.css @@ -1,15 +1,15 @@ @keyframes fadeInRight { - 0% { - opacity: 0; - transform: translateX(20px); - } + 0% { + opacity: 0; + transform: translateX(20px); + } - 100% { - opacity: 1; - transform: translateX(0); - } + 100% { + opacity: 1; + transform: translateX(0); + } } .fadeInRight { - animation-name: fadeInRight; + animation-name: fadeInRight; } diff --git a/source/fading_entrances/fadeInRightBig.css b/source/fading_entrances/fadeInRightBig.css index 6baaceb..7d2252e 100644 --- a/source/fading_entrances/fadeInRightBig.css +++ b/source/fading_entrances/fadeInRightBig.css @@ -1,15 +1,15 @@ @keyframes fadeInRightBig { - 0% { - opacity: 0; - transform: translateX(2000px); - } + 0% { + opacity: 0; + transform: translateX(2000px); + } - 100% { - opacity: 1; - transform: translateX(0); - } + 100% { + opacity: 1; + transform: translateX(0); + } } .fadeInRightBig { - animation-name: fadeInRightBig; + animation-name: fadeInRightBig; } diff --git a/source/fading_entrances/fadeInUp.css b/source/fading_entrances/fadeInUp.css index bd2e61b..ddbc32d 100644 --- a/source/fading_entrances/fadeInUp.css +++ b/source/fading_entrances/fadeInUp.css @@ -1,15 +1,15 @@ @keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(20px); - } + 0% { + opacity: 0; + transform: translateY(20px); + } - 100% { - opacity: 1; - transform: translateY(0); - } + 100% { + opacity: 1; + transform: translateY(0); + } } .fadeInUp { - animation-name: fadeInUp; + animation-name: fadeInUp; } diff --git a/source/fading_entrances/fadeInUpBig.css b/source/fading_entrances/fadeInUpBig.css index 4d3b1d7..1b4d81d 100644 --- a/source/fading_entrances/fadeInUpBig.css +++ b/source/fading_entrances/fadeInUpBig.css @@ -1,15 +1,15 @@ @keyframes fadeInUpBig { - 0% { - opacity: 0; - transform: translateY(2000px); - } + 0% { + opacity: 0; + transform: translateY(2000px); + } - 100% { - opacity: 1; - transform: translateY(0); - } + 100% { + opacity: 1; + transform: translateY(0); + } } .fadeInUpBig { - animation-name: fadeInUpBig; + animation-name: fadeInUpBig; } diff --git a/source/fading_exits/fadeOut.css b/source/fading_exits/fadeOut.css index e713a7f..aef78c1 100644 --- a/source/fading_exits/fadeOut.css +++ b/source/fading_exits/fadeOut.css @@ -1,8 +1,8 @@ @keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} + 0% {opacity: 1;} + 100% {opacity: 0;} } .fadeOut { - animation-name: fadeOut; + animation-name: fadeOut; } diff --git a/source/fading_exits/fadeOutDown.css b/source/fading_exits/fadeOutDown.css index 3b7eb58..13c0da7 100644 --- a/source/fading_exits/fadeOutDown.css +++ b/source/fading_exits/fadeOutDown.css @@ -1,15 +1,15 @@ @keyframes fadeOutDown { - 0% { - opacity: 1; - transform: translateY(0); - } + 0% { + opacity: 1; + transform: translateY(0); + } - 100% { - opacity: 0; - transform: translateY(20px); - } + 100% { + opacity: 0; + transform: translateY(20px); + } } .fadeOutDown { - animation-name: fadeOutDown; + animation-name: fadeOutDown; } diff --git a/source/fading_exits/fadeOutDownBig.css b/source/fading_exits/fadeOutDownBig.css index 8a98f7d..9063a8a 100644 --- a/source/fading_exits/fadeOutDownBig.css +++ b/source/fading_exits/fadeOutDownBig.css @@ -1,15 +1,15 @@ @keyframes fadeOutDownBig { - 0% { - opacity: 1; - transform: translateY(0); - } + 0% { + opacity: 1; + transform: translateY(0); + } - 100% { - opacity: 0; - transform: translateY(2000px); - } + 100% { + opacity: 0; + transform: translateY(2000px); + } } .fadeOutDownBig { - animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; } diff --git a/source/fading_exits/fadeOutLeft.css b/source/fading_exits/fadeOutLeft.css index c4b2397..e603382 100644 --- a/source/fading_exits/fadeOutLeft.css +++ b/source/fading_exits/fadeOutLeft.css @@ -1,15 +1,15 @@ @keyframes fadeOutLeft { - 0% { - opacity: 1; - transform: translateX(0); - } + 0% { + opacity: 1; + transform: translateX(0); + } - 100% { - opacity: 0; - transform: translateX(-20px); - } + 100% { + opacity: 0; + transform: translateX(-20px); + } } .fadeOutLeft { - animation-name: fadeOutLeft; + animation-name: fadeOutLeft; } diff --git a/source/fading_exits/fadeOutLeftBig.css b/source/fading_exits/fadeOutLeftBig.css index b0d4c49..bef408d 100644 --- a/source/fading_exits/fadeOutLeftBig.css +++ b/source/fading_exits/fadeOutLeftBig.css @@ -1,15 +1,15 @@ @keyframes fadeOutLeftBig { - 0% { - opacity: 1; - transform: translateX(0); - } + 0% { + opacity: 1; + transform: translateX(0); + } - 100% { - opacity: 0; - transform: translateX(-2000px); - } + 100% { + opacity: 0; + transform: translateX(-2000px); + } } .fadeOutLeftBig { - animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; } diff --git a/source/fading_exits/fadeOutRight.css b/source/fading_exits/fadeOutRight.css index 8691014..35d8983 100644 --- a/source/fading_exits/fadeOutRight.css +++ b/source/fading_exits/fadeOutRight.css @@ -1,15 +1,15 @@ @keyframes fadeOutRight { - 0% { - opacity: 1; - transform: translateX(0); - } + 0% { + opacity: 1; + transform: translateX(0); + } - 100% { - opacity: 0; - transform: translateX(20px); - } + 100% { + opacity: 0; + transform: translateX(20px); + } } .fadeOutRight { - animation-name: fadeOutRight; + animation-name: fadeOutRight; } diff --git a/source/fading_exits/fadeOutRightBig.css b/source/fading_exits/fadeOutRightBig.css index c7156a5..23044bf 100644 --- a/source/fading_exits/fadeOutRightBig.css +++ b/source/fading_exits/fadeOutRightBig.css @@ -1,15 +1,15 @@ @keyframes fadeOutRightBig { - 0% { - opacity: 1; - transform: translateX(0); - } + 0% { + opacity: 1; + transform: translateX(0); + } - 100% { - opacity: 0; - transform: translateX(2000px); - } + 100% { + opacity: 0; + transform: translateX(2000px); + } } .fadeOutRightBig { - animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; } diff --git a/source/fading_exits/fadeOutUp.css b/source/fading_exits/fadeOutUp.css index 19a2a13..66c7930 100644 --- a/source/fading_exits/fadeOutUp.css +++ b/source/fading_exits/fadeOutUp.css @@ -1,15 +1,15 @@ @keyframes fadeOutUp { - 0% { - opacity: 1; - transform: translateY(0); - } + 0% { + opacity: 1; + transform: translateY(0); + } - 100% { - opacity: 0; - transform: translateY(-20px); - } + 100% { + opacity: 0; + transform: translateY(-20px); + } } .fadeOutUp { - animation-name: fadeOutUp; + animation-name: fadeOutUp; } diff --git a/source/fading_exits/fadeOutUpBig.css b/source/fading_exits/fadeOutUpBig.css index 469bef3..f7e7816 100644 --- a/source/fading_exits/fadeOutUpBig.css +++ b/source/fading_exits/fadeOutUpBig.css @@ -1,15 +1,15 @@ @keyframes fadeOutUpBig { - 0% { - opacity: 1; - transform: translateY(0); - } + 0% { + opacity: 1; + transform: translateY(0); + } - 100% { - opacity: 0; - transform: translateY(-2000px); - } + 100% { + opacity: 0; + transform: translateY(-2000px); + } } .fadeOutUpBig { - animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; } diff --git a/source/flippers/flip.css b/source/flippers/flip.css index 25e0cbf..031b175 100644 --- a/source/flippers/flip.css +++ b/source/flippers/flip.css @@ -1,31 +1,31 @@ @keyframes flip { - 0% { - transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - animation-timing-function: ease-out; - } + 0% { + transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + animation-timing-function: ease-out; + } - 40% { - transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - animation-timing-function: ease-out; - } + 40% { + transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + animation-timing-function: ease-out; + } - 50% { - transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - animation-timing-function: ease-in; - } + 50% { + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + animation-timing-function: ease-in; + } - 80% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - animation-timing-function: ease-in; - } + 80% { + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + animation-timing-function: ease-in; + } - 100% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - animation-timing-function: ease-in; - } + 100% { + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + animation-timing-function: ease-in; + } } .animated.flip { - backface-visibility: visible; - animation-name: flip; + backface-visibility: visible; + animation-name: flip; } diff --git a/source/flippers/flipInX.css b/source/flippers/flipInX.css index a2d2394..c8ab976 100644 --- a/source/flippers/flipInX.css +++ b/source/flippers/flipInX.css @@ -19,6 +19,6 @@ } .flipInX { - backface-visibility: visible !important; - animation-name: flipInX; + backface-visibility: visible !important; + animation-name: flipInX; } diff --git a/source/flippers/flipInY.css b/source/flippers/flipInY.css index ca6849c..f7a5156 100644 --- a/source/flippers/flipInY.css +++ b/source/flippers/flipInY.css @@ -19,6 +19,6 @@ } .flipInY { - backface-visibility: visible !important; - animation-name: flipInY; + backface-visibility: visible !important; + animation-name: flipInY; } diff --git a/source/flippers/flipOutX.css b/source/flippers/flipOutX.css index 8454f90..e57101c 100644 --- a/source/flippers/flipOutX.css +++ b/source/flippers/flipOutX.css @@ -11,6 +11,6 @@ } .flipOutX { - animation-name: flipOutX; - backface-visibility: visible !important; + animation-name: flipOutX; + backface-visibility: visible !important; } diff --git a/source/flippers/flipOutY.css b/source/flippers/flipOutY.css index e75e11a..2fffbb3 100644 --- a/source/flippers/flipOutY.css +++ b/source/flippers/flipOutY.css @@ -11,6 +11,6 @@ } .flipOutY { - backface-visibility: visible !important; - animation-name: flipOutY; + backface-visibility: visible !important; + animation-name: flipOutY; } diff --git a/source/lightspeed/lightSpeedIn.css b/source/lightspeed/lightSpeedIn.css index b33caad..49fbc12 100644 --- a/source/lightspeed/lightSpeedIn.css +++ b/source/lightspeed/lightSpeedIn.css @@ -1,18 +1,22 @@ @keyframes lightSpeedIn { - 0% { - transform: translateX(100%) skewX(-30deg); opacity: 0; + 0% { + transform: translateX(100%) skewX(-30deg); + opacity: 0; } - 60% { - transform: translateX(-20%) skewX(30deg); opacity: 1; + 60% { + transform: translateX(-20%) skewX(30deg); + opacity: 1; } - 80% { - transform: translateX(0%) skewX(-15deg); opacity: 1; + 80% { + transform: translateX(0%) skewX(-15deg); + opacity: 1; } - 100% { - transform: translateX(0%) skewX(0deg); opacity: 1; + 100% { + transform: translateX(0%) skewX(0deg); + opacity: 1; } } diff --git a/source/lightspeed/lightSpeedOut.css b/source/lightspeed/lightSpeedOut.css index 4b8561c..9dd5b52 100644 --- a/source/lightspeed/lightSpeedOut.css +++ b/source/lightspeed/lightSpeedOut.css @@ -1,10 +1,12 @@ @keyframes lightSpeedOut { - 0% { - transform: translateX(0%) skewX(0deg); opacity: 1; + 0% { + transform: translateX(0%) skewX(0deg); + opacity: 1; } - 100% { - transform: translateX(100%) skewX(-30deg); opacity: 0; + 100% { + transform: translateX(100%) skewX(-30deg); + opacity: 0; } } diff --git a/source/rotating_entrances/rotateIn.css b/source/rotating_entrances/rotateIn.css index f77e0b5..0284f01 100644 --- a/source/rotating_entrances/rotateIn.css +++ b/source/rotating_entrances/rotateIn.css @@ -1,17 +1,17 @@ @keyframes rotateIn { - 0% { - transform-origin: center center; - transform: rotate(-200deg); - opacity: 0; - } + 0% { + transform-origin: center center; + transform: rotate(-200deg); + opacity: 0; + } - 100% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } + 100% { + transform-origin: center center; + transform: rotate(0); + opacity: 1; + } } .rotateIn { - animation-name: rotateIn; + animation-name: rotateIn; } diff --git a/source/rotating_entrances/rotateInDownLeft.css b/source/rotating_entrances/rotateInDownLeft.css index e2308f9..88f5072 100644 --- a/source/rotating_entrances/rotateInDownLeft.css +++ b/source/rotating_entrances/rotateInDownLeft.css @@ -1,17 +1,17 @@ @keyframes rotateInDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(-90deg); - opacity: 0; - } + 0% { + transform-origin: left bottom; + transform: rotate(-90deg); + opacity: 0; + } - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } } .rotateInDownLeft { - animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; } diff --git a/source/rotating_entrances/rotateInDownRight.css b/source/rotating_entrances/rotateInDownRight.css index 83b81e8..e737e6f 100644 --- a/source/rotating_entrances/rotateInDownRight.css +++ b/source/rotating_entrances/rotateInDownRight.css @@ -1,17 +1,17 @@ @keyframes rotateInDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } + 0% { + transform-origin: right bottom; + transform: rotate(90deg); + opacity: 0; + } - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } + 100% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } } .rotateInDownRight { - animation-name: rotateInDownRight; + animation-name: rotateInDownRight; } diff --git a/source/rotating_entrances/rotateInUpLeft.css b/source/rotating_entrances/rotateInUpLeft.css index 8af6fa0..7045595 100644 --- a/source/rotating_entrances/rotateInUpLeft.css +++ b/source/rotating_entrances/rotateInUpLeft.css @@ -1,17 +1,17 @@ @keyframes rotateInUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } + 0% { + transform-origin: left bottom; + transform: rotate(90deg); + opacity: 0; + } - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } } .rotateInUpLeft { - animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; } diff --git a/source/rotating_entrances/rotateInUpRight.css b/source/rotating_entrances/rotateInUpRight.css index 43f857e..6f3097c 100644 --- a/source/rotating_entrances/rotateInUpRight.css +++ b/source/rotating_entrances/rotateInUpRight.css @@ -1,17 +1,17 @@ @keyframes rotateInUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } + 0% { + transform-origin: right bottom; + transform: rotate(-90deg); + opacity: 0; + } - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } + 100% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } } .rotateInUpRight { - animation-name: rotateInUpRight; + animation-name: rotateInUpRight; } diff --git a/source/rotating_exits/rotateOut.css b/source/rotating_exits/rotateOut.css index 67f940b..ec3779d 100644 --- a/source/rotating_exits/rotateOut.css +++ b/source/rotating_exits/rotateOut.css @@ -1,17 +1,17 @@ @keyframes rotateOut { - 0% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } + 0% { + transform-origin: center center; + transform: rotate(0); + opacity: 1; + } - 100% { - transform-origin: center center; - transform: rotate(200deg); - opacity: 0; - } + 100% { + transform-origin: center center; + transform: rotate(200deg); + opacity: 0; + } } .rotateOut { - animation-name: rotateOut; + animation-name: rotateOut; } diff --git a/source/rotating_exits/rotateOutDownLeft.css b/source/rotating_exits/rotateOutDownLeft.css index c6c8842..ee1cb38 100644 --- a/source/rotating_exits/rotateOutDownLeft.css +++ b/source/rotating_exits/rotateOutDownLeft.css @@ -1,17 +1,17 @@ @keyframes rotateOutDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } + 0% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } - 100% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } + 100% { + transform-origin: left bottom; + transform: rotate(90deg); + opacity: 0; + } } .rotateOutDownLeft { - animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; } diff --git a/source/rotating_exits/rotateOutDownRight.css b/source/rotating_exits/rotateOutDownRight.css index e1b9c54..e0923f7 100644 --- a/source/rotating_exits/rotateOutDownRight.css +++ b/source/rotating_exits/rotateOutDownRight.css @@ -1,17 +1,17 @@ @keyframes rotateOutDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } + 0% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } - 100% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } + 100% { + transform-origin: right bottom; + transform: rotate(-90deg); + opacity: 0; + } } .rotateOutDownRight { - animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; } diff --git a/source/rotating_exits/rotateOutUpLeft.css b/source/rotating_exits/rotateOutUpLeft.css index 4b9e423..68aa9d7 100644 --- a/source/rotating_exits/rotateOutUpLeft.css +++ b/source/rotating_exits/rotateOutUpLeft.css @@ -1,17 +1,17 @@ @keyframes rotateOutUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } + 0% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } - 100% { - transform-origin: left bottom; - transform: rotate(-90deg); - opacity: 0; - } + 100% { + transform-origin: left bottom; + transform: rotate(-90deg); + opacity: 0; + } } .rotateOutUpLeft { - animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; } diff --git a/source/rotating_exits/rotateOutUpRight.css b/source/rotating_exits/rotateOutUpRight.css index aa40b08..0206488 100644 --- a/source/rotating_exits/rotateOutUpRight.css +++ b/source/rotating_exits/rotateOutUpRight.css @@ -1,17 +1,17 @@ @keyframes rotateOutUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } + 0% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } - 100% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } + 100% { + transform-origin: right bottom; + transform: rotate(90deg); + opacity: 0; + } } .rotateOutUpRight { - animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; } diff --git a/source/sliders/slideInDown.css b/source/sliders/slideInDown.css index 8ef123a..6715b5a 100644 --- a/source/sliders/slideInDown.css +++ b/source/sliders/slideInDown.css @@ -1,14 +1,14 @@ @keyframes slideInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } + 0% { + opacity: 0; + transform: translateY(-2000px); + } - 100% { - transform: translateY(0); - } + 100% { + transform: translateY(0); + } } .slideInDown { - animation-name: slideInDown; + animation-name: slideInDown; } diff --git a/source/sliders/slideInLeft.css b/source/sliders/slideInLeft.css index 667157d..229acd3 100644 --- a/source/sliders/slideInLeft.css +++ b/source/sliders/slideInLeft.css @@ -1,14 +1,14 @@ @keyframes slideInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } + 0% { + opacity: 0; + transform: translateX(-2000px); + } - 100% { - transform: translateX(0); - } + 100% { + transform: translateX(0); + } } .slideInLeft { - animation-name: slideInLeft; + animation-name: slideInLeft; } diff --git a/source/sliders/slideInRight.css b/source/sliders/slideInRight.css index b684e20..6c5f024 100644 --- a/source/sliders/slideInRight.css +++ b/source/sliders/slideInRight.css @@ -1,14 +1,14 @@ @keyframes slideInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } + 0% { + opacity: 0; + transform: translateX(2000px); + } - 100% { - transform: translateX(0); - } + 100% { + transform: translateX(0); + } } .slideInRight { - animation-name: slideInRight; + animation-name: slideInRight; } diff --git a/source/sliders/slideOutLeft.css b/source/sliders/slideOutLeft.css index 51004b4..cecd921 100644 --- a/source/sliders/slideOutLeft.css +++ b/source/sliders/slideOutLeft.css @@ -1,14 +1,14 @@ @keyframes slideOutLeft { - 0% { - transform: translateX(0); - } + 0% { + transform: translateX(0); + } - 100% { - opacity: 0; - transform: translateX(-2000px); - } + 100% { + opacity: 0; + transform: translateX(-2000px); + } } .slideOutLeft { - animation-name: slideOutLeft; + animation-name: slideOutLeft; } diff --git a/source/sliders/slideOutRight.css b/source/sliders/slideOutRight.css index 131202a..99884c8 100644 --- a/source/sliders/slideOutRight.css +++ b/source/sliders/slideOutRight.css @@ -1,14 +1,14 @@ @keyframes slideOutRight { - 0% { - transform: translateX(0); - } + 0% { + transform: translateX(0); + } - 100% { - opacity: 0; - transform: translateX(2000px); - } + 100% { + opacity: 0; + transform: translateX(2000px); + } } .slideOutRight { - animation-name: slideOutRight; + animation-name: slideOutRight; } diff --git a/source/sliders/slideOutUp.css b/source/sliders/slideOutUp.css index 2f484ca..f3bb2bf 100644 --- a/source/sliders/slideOutUp.css +++ b/source/sliders/slideOutUp.css @@ -1,14 +1,14 @@ @keyframes slideOutUp { - 0% { - transform: translateY(0); - } + 0% { + transform: translateY(0); + } - 100% { - opacity: 0; - transform: translateY(-2000px); - } + 100% { + opacity: 0; + transform: translateY(-2000px); + } } .slideOutUp { - animation-name: slideOutUp; + animation-name: slideOutUp; } diff --git a/source/specials/hinge.css b/source/specials/hinge.css index 01fb779..1ba98e9 100644 --- a/source/specials/hinge.css +++ b/source/specials/hinge.css @@ -1,35 +1,35 @@ @keyframes hinge { - 0% { + 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } - 20%, 60% { + 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 40% { + 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 80% { + 80% { transform: rotate(60deg) translateY(0); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } - 100% { + 100% { transform: translateY(700px); opacity: 0; } } .hinge { - animation-name: hinge; + animation-name: hinge; } diff --git a/source/specials/rollIn.css b/source/specials/rollIn.css index 2f02e1f..d16551d 100644 --- a/source/specials/rollIn.css +++ b/source/specials/rollIn.css @@ -1,17 +1,17 @@ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollIn { - 0% { + 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } - 100% { + 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn { - animation-name: rollIn; + animation-name: rollIn; } diff --git a/source/specials/rollOut.css b/source/specials/rollOut.css index 257f945..78ee31f 100644 --- a/source/specials/rollOut.css +++ b/source/specials/rollOut.css @@ -2,16 +2,16 @@ @keyframes rollOut { 0% { - opacity: 1; - transform: translateX(0px) rotate(0deg); - } + opacity: 1; + transform: translateX(0px) rotate(0deg); + } 100% { - opacity: 0; - transform: translateX(100%) rotate(120deg); - } + opacity: 0; + transform: translateX(100%) rotate(120deg); + } } .rollOut { - animation-name: rollOut; + animation-name: rollOut; } From db8e990dfc2c56df7a48022e1ec4b50dd7e33b14 Mon Sep 17 00:00:00 2001 From: Sarbbottam Bandyopadhyay Date: Mon, 24 Feb 2014 04:25:37 +0530 Subject: [PATCH 3/3] Refactored Gruntfile.js --- Gruntfile.js | 75 ++++++++++++++++++++++++++-------------------------- 1 file changed, 37 insertions(+), 38 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index a4c48ea..dbc05e0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -2,79 +2,78 @@ module.exports = function(grunt) { require('load-grunt-tasks')(grunt); - pkg: grunt.file.readJSON('package.json'), + var concatAnim; + grunt.initConfig({ - // Concatenate CSS files + pkg: grunt.file.readJSON('package.json'), + concat: { dist: { - src: [ - // _base.css required for .animated helper class - 'source/_base.css', - 'source/**/*.css' - ], + src: [ 'source/_base.css', 'source/**/*.css' ], // _base.css required for .animated helper class dest: 'animate.css' } }, - // Auto-prefix CSS properties using Can I Use? - autoprefixer: { + autoprefixer: { // https://github.com/nDmitry/grunt-autoprefixer options: { browsers: ['last 3 versions', 'bb 10', 'android 3'] }, no_dest: { - // File to output - src: 'animate.css' - }, + src: 'animate.css' // output file + } }, - // Minify CSS cssmin: { minify: { src: ['animate.css'], dest: 'animate.min.css', - }, + } }, - // Watch files for changes watch: { css: { - files: [ - 'source/**/*', - '!node_modules', - 'animate-config.json' - ], - // Run Sass, autoprefixer, and CSSO - tasks: ['concat-anim', 'autoprefixer', 'cssmin'], + files: [ 'source/**/*', 'animate-config.json' ], + tasks: ['default'] } } }); - // Register our tasks - grunt.registerTask('default', ['concat-anim', 'autoprefixer', 'cssmin', 'watch']); + // fuction to perform custom task + concatAnim = function () { - grunt.registerTask('concat-anim', 'Concatenates activated animations', function () { - var config = grunt.file.readJSON('animate-config.json'), - target = [ 'source/_base.css' ], - count = 0 + var categories = grunt.file.readJSON('animate-config.json'), + category, files, file, + target = [ 'source/_base.css' ], + count = 0; - for (var cat in config) { - for (var file in config[cat]) { - if (config[cat][file]) { - target.push('source/' + cat + '/' + file + '.css') - count++ + for ( category in categories ) { + if ( categories.hasOwnProperty(category) ) { + files = categories[category] + for (file in files) { + if ( files.hasOwnProperty(file) && files[file] ) { + target.push('source/' + category + '/' + file + '.css'); + count += 1; + } } } } if (!count) { - grunt.log.writeln('No animations activated.') + grunt.log.writeln('No animations activated.'); + } else { + grunt.log.writeln(count + (count > 1 ? ' animations' : ' animation') + ' activated.'); } - grunt.log.writeln(count + (count > 1 ? ' animations' : ' animation') + ' activated.') + grunt.config('concat', { 'animate.css': target }); + grunt.task.run('concat'); + + }; + + // register task + grunt.registerTask('concat-anim', 'Concatenates activated animations', concatAnim); // custom task + grunt.registerTask('default', ['concat-anim', 'autoprefixer', 'cssmin']); + grunt.registerTask('dev', ['watch']); - grunt.config('concat', { 'animate.css': target }) - grunt.task.run('concat') - }); };