├── .gitignore ├── bower.json ├── source ├── fading_entrances │ ├── fadeIn.css │ ├── fadeInUp.css │ ├── fadeInDown.css │ ├── fadeInLeft.css │ ├── fadeInRight.css │ ├── fadeInUpBig.css │ ├── fadeInDownBig.css │ ├── fadeInLeftBig.css │ └── fadeInRightBig.css ├── fading_exits │ ├── fadeOut.css │ ├── fadeOutUp.css │ ├── fadeOutDown.css │ ├── fadeOutLeft.css │ ├── fadeOutRight.css │ ├── fadeOutUpBig.css │ ├── fadeOutDownBig.css │ ├── fadeOutLeftBig.css │ └── fadeOutRightBig.css ├── attention_seekers │ ├── flash.css │ ├── bounce.css │ ├── shake.css │ ├── pulse.css │ ├── swing.css │ ├── rubberBand.css │ ├── tada.css │ └── wobble.css ├── zooming_entrances │ ├── zoomIn.css │ ├── zoomInUp.css │ ├── zoomInDown.css │ ├── zoomInLeft.css │ └── zoomInRight.css ├── sliders │ ├── slideOutUp.css │ ├── slideInDown.css │ ├── slideInLeft.css │ ├── slideInRight.css │ ├── slideOutDown.css │ ├── slideOutLeft.css │ ├── slideOutRight.css │ └── slideInUp.css ├── zooming_exits │ ├── zoomOut.css │ ├── zoomOutUp.css │ ├── zoomOutLeft.css │ ├── zoomOutDown.css │ └── zoomOutRight.css ├── bouncing_exits │ ├── bounceOutUp.css │ ├── bounceOutDown.css │ ├── bounceOutLeft.css │ ├── bounceOutRight.css │ └── bounceOut.css ├── flippers │ ├── flipOutX.css │ ├── flipOutY.css │ ├── flipInX.css │ ├── flipInY.css │ └── flip.css ├── lightspeed │ ├── lightSpeedOut.css │ └── lightSpeedIn.css ├── rotating_entrances │ ├── rotateIn.css │ ├── rotateInUpLeft.css │ ├── rotateInDownLeft.css │ ├── rotateInUpRight.css │ └── rotateInDownRight.css ├── rotating_exits │ ├── rotateOut.css │ ├── rotateOutUpLeft.css │ ├── rotateOutDownLeft.css │ ├── rotateOutUpRight.css │ └── rotateOutDownRight.css ├── specials │ ├── rollIn.css │ ├── rollOut.css │ └── hinge.css ├── bouncing_entrances │ ├── bounceIn.css │ ├── bounceInUp.css │ ├── bounceInDown.css │ ├── bounceInLeft.css │ └── bounceInRight.css └── _base.css ├── .editorconfig ├── package.json ├── Gruntfile.js ├── animate-config.json ├── README.md ├── animate.min.css └── animate.css /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules/ 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.1.1", 4 | "main": "./animate.css" 5 | } 6 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeIn.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | 0% {opacity: 0;} 3 | 100% {opacity: 1;} 4 | } 5 | 6 | .fadeIn { 7 | animation-name: fadeIn; 8 | } 9 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOut.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOut { 2 | 0% {opacity: 1;} 3 | 100% {opacity: 0;} 4 | } 5 | 6 | .fadeOut { 7 | animation-name: fadeOut; 8 | } 9 | -------------------------------------------------------------------------------- /source/attention_seekers/flash.css: -------------------------------------------------------------------------------- 1 | @keyframes flash { 2 | 0%, 50%, 100% { 3 | opacity: 1; 4 | } 5 | 6 | 25%, 75% { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | .flash { 12 | animation-name: flash; 13 | } 14 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomIn.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomIn { 2 | 0% { 3 | opacity: 0; 4 | transform: scale(.3); 5 | } 6 | 7 | 50% { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | .zoomIn { 13 | animation-name: zoomIn; 14 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | tab_width = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /source/sliders/slideOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutUp { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateY(-2000px); 9 | } 10 | } 11 | 12 | .slideOutUp { 13 | animation-name: slideOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliders/slideInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInDown { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(-2000px); 5 | } 6 | 7 | 100% { 8 | transform: translateY(0); 9 | } 10 | } 11 | 12 | .slideInDown { 13 | animation-name: slideInDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliders/slideInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInLeft { 2 | 0% { 3 | opacity: 0; 4 | transform: translateX(-2000px); 5 | } 6 | 7 | 100% { 8 | transform: translateX(0); 9 | } 10 | } 11 | 12 | .slideInLeft { 13 | animation-name: slideInLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliders/slideInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInRight { 2 | 0% { 3 | opacity: 0; 4 | transform: translateX(2000px); 5 | } 6 | 7 | 100% { 8 | transform: translateX(0); 9 | } 10 | } 11 | 12 | .slideInRight { 13 | animation-name: slideInRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliders/slideOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutDown { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateY(2000px); 9 | } 10 | } 11 | 12 | .slideOutDown { 13 | animation-name: slideOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliders/slideOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutLeft { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateX(-2000px); 9 | } 10 | } 11 | 12 | .slideOutLeft { 13 | animation-name: slideOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliders/slideOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutRight { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateX(2000px); 9 | } 10 | } 11 | 12 | .slideOutRight { 13 | animation-name: slideOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliders/slideInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(2000px); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: translateY(0); 10 | } 11 | } 12 | 13 | .slideInUp { 14 | animation-name: slideInUp; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(20px); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: translateY(0); 10 | } 11 | } 12 | 13 | .fadeInUp { 14 | animation-name: fadeInUp; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUp { 2 | 0% { 3 | opacity: 1; 4 | transform: translateY(0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translateY(-20px); 10 | } 11 | } 12 | 13 | .fadeOutUp { 14 | animation-name: fadeOutUp; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDown { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(-20px); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: translateY(0); 10 | } 11 | } 12 | 13 | .fadeInDown { 14 | animation-name: fadeInDown; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeft { 2 | 0% { 3 | opacity: 0; 4 | transform: translateX(-20px); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: translateX(0); 10 | } 11 | } 12 | 13 | .fadeInLeft { 14 | animation-name: fadeInLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDown { 2 | 0% { 3 | opacity: 1; 4 | transform: translateY(0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translateY(20px); 10 | } 11 | } 12 | 13 | .fadeOutDown { 14 | animation-name: fadeOutDown; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeft { 2 | 0% { 3 | opacity: 1; 4 | transform: translateX(0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translateX(-20px); 10 | } 11 | } 12 | 13 | .fadeOutLeft { 14 | animation-name: fadeOutLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRight { 2 | 0% { 3 | opacity: 0; 4 | transform: translateX(20px); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: translateX(0); 10 | } 11 | } 12 | 13 | .fadeInRight { 14 | animation-name: fadeInRight; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUpBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(2000px); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: translateY(0); 10 | } 11 | } 12 | 13 | .fadeInUpBig { 14 | animation-name: fadeInUpBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRight { 2 | 0% { 3 | opacity: 1; 4 | transform: translateX(0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translateX(20px); 10 | } 11 | } 12 | 13 | .fadeOutRight { 14 | animation-name: fadeOutRight; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUpBig { 2 | 0% { 3 | opacity: 1; 4 | transform: translateY(0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translateY(-2000px); 10 | } 11 | } 12 | 13 | .fadeOutUpBig { 14 | animation-name: fadeOutUpBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDownBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(-2000px); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: translateY(0); 10 | } 11 | } 12 | 13 | .fadeInDownBig { 14 | animation-name: fadeInDownBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeftBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translateX(-2000px); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: translateX(0); 10 | } 11 | } 12 | 13 | .fadeInLeftBig { 14 | animation-name: fadeInLeftBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDownBig { 2 | 0% { 3 | opacity: 1; 4 | transform: translateY(0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translateY(2000px); 10 | } 11 | } 12 | 13 | .fadeOutDownBig { 14 | animation-name: fadeOutDownBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeftBig { 2 | 0% { 3 | opacity: 1; 4 | transform: translateX(0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translateX(-2000px); 10 | } 11 | } 12 | 13 | .fadeOutLeftBig { 14 | animation-name: fadeOutLeftBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRightBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translateX(2000px); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: translateX(0); 10 | } 11 | } 12 | 13 | .fadeInRightBig { 14 | animation-name: fadeInRightBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRightBig { 2 | 0% { 3 | opacity: 1; 4 | transform: translateX(0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translateX(2000px); 10 | } 11 | } 12 | 13 | .fadeOutRightBig { 14 | animation-name: fadeOutRightBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOut.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOut { 2 | 0% { 3 | opacity: 1; 4 | transform: scale(1); 5 | } 6 | 7 | 50% { 8 | opacity: 0; 9 | transform: scale(.3); 10 | } 11 | 12 | 100% { 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .zoomOut { 18 | animation-name: zoomOut; 19 | } -------------------------------------------------------------------------------- /source/attention_seekers/bounce.css: -------------------------------------------------------------------------------- 1 | @keyframes bounce { 2 | 0%, 20%, 50%, 80%, 100% { 3 | transform: translateY(0); 4 | } 5 | 6 | 40% { 7 | transform: translateY(-30px); 8 | } 9 | 10 | 60% { 11 | transform: translateY(-15px); 12 | } 13 | } 14 | 15 | .bounce { 16 | animation-name: bounce; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/shake.css: -------------------------------------------------------------------------------- 1 | @keyframes shake { 2 | 0%, 100% { 3 | transform: translateX(0); 4 | } 5 | 6 | 10%, 30%, 50%, 70%, 90% { 7 | transform: translateX(-10px); 8 | } 9 | 10 | 20%, 40%, 60%, 80% { 11 | transform: translateX(10px); 12 | } 13 | } 14 | 15 | .shake { 16 | animation-name: shake; 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.1.1", 4 | "devDependencies": { 5 | "grunt": "~0.4.1", 6 | "grunt-autoprefixer": "~0.4.0", 7 | "grunt-contrib-watch": "~0.5.3", 8 | "grunt-contrib-concat": "~0.3.0", 9 | "grunt-contrib-cssmin": "~0.8.0", 10 | "load-grunt-tasks": "~0.2.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutUp { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 6 | 20% { 7 | opacity: 1; 8 | transform: translateY(20px); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translateY(-2000px); 14 | } 15 | } 16 | 17 | .bounceOutUp { 18 | animation-name: bounceOutUp; 19 | } 20 | -------------------------------------------------------------------------------- /source/flippers/flipOutX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutX { 2 | 0% { 3 | transform: perspective(400px) rotateX(0deg); 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform: perspective(400px) rotateX(90deg); 9 | opacity: 0; 10 | } 11 | } 12 | 13 | .flipOutX { 14 | animation-name: flipOutX; 15 | backface-visibility: visible !important; 16 | } 17 | -------------------------------------------------------------------------------- /source/flippers/flipOutY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutY { 2 | 0% { 3 | transform: perspective(400px) rotateY(0deg); 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform: perspective(400px) rotateY(90deg); 9 | opacity: 0; 10 | } 11 | } 12 | 13 | .flipOutY { 14 | backface-visibility: visible !important; 15 | animation-name: flipOutY; 16 | } 17 | -------------------------------------------------------------------------------- /source/attention_seekers/pulse.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes pulse { 4 | 0% { 5 | transform: scale(1); 6 | } 7 | 8 | 50% { 9 | transform: scale(1.1); 10 | } 11 | 12 | 100% { 13 | transform: scale(1); 14 | } 15 | } 16 | 17 | .pulse { 18 | animation-name: pulse; 19 | } 20 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedOut.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedOut { 2 | 0% { 3 | transform: translateX(0%) skewX(0deg); 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform: translateX(100%) skewX(-30deg); 9 | opacity: 0; 10 | } 11 | } 12 | 13 | .lightSpeedOut { 14 | animation-name: lightSpeedOut; 15 | animation-timing-function: ease-in; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateIn.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateIn { 2 | 0% { 3 | transform-origin: center center; 4 | transform: rotate(-200deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: center center; 10 | transform: rotate(0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateIn { 16 | animation-name: rotateIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOut.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOut { 2 | 0% { 3 | transform-origin: center center; 4 | transform: rotate(0); 5 | opacity: 1; 6 | } 7 | 8 | 100% { 9 | transform-origin: center center; 10 | transform: rotate(200deg); 11 | opacity: 0; 12 | } 13 | } 14 | 15 | .rotateOut { 16 | animation-name: rotateOut; 17 | } 18 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutDown { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 6 | 20% { 7 | opacity: 1; 8 | transform: translateY(-20px); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translateY(2000px); 14 | } 15 | } 16 | 17 | .bounceOutDown { 18 | animation-name: bounceOutDown; 19 | } 20 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutLeft { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 20% { 7 | opacity: 1; 8 | transform: translateX(20px); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translateX(-2000px); 14 | } 15 | } 16 | 17 | .bounceOutLeft { 18 | animation-name: bounceOutLeft; 19 | } 20 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutRight { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 20% { 7 | opacity: 1; 8 | transform: translateX(-20px); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translateX(2000px); 14 | } 15 | } 16 | 17 | .bounceOutRight { 18 | animation-name: bounceOutRight; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate(90deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: rotate(0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpLeft { 16 | animation-name: rotateInUpLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate(0); 5 | opacity: 1; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: rotate(-90deg); 11 | opacity: 0; 12 | } 13 | } 14 | 15 | .rotateOutUpLeft { 16 | animation-name: rotateOutUpLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate(-90deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: rotate(0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownLeft { 16 | animation-name: rotateInDownLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | transform: rotate(-90deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: rotate(0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpRight { 16 | animation-name: rotateInUpRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate(0); 5 | opacity: 1; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: rotate(90deg); 11 | opacity: 0; 12 | } 13 | } 14 | 15 | .rotateOutDownLeft { 16 | animation-name: rotateOutDownLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | transform: rotate(0); 5 | opacity: 1; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: rotate(90deg); 11 | opacity: 0; 12 | } 13 | } 14 | 15 | .rotateOutUpRight { 16 | animation-name: rotateOutUpRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/specials/rollIn.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollIn { 4 | 0% { 5 | opacity: 0; 6 | transform: translateX(-100%) rotate(-120deg); 7 | } 8 | 9 | 100% { 10 | opacity: 1; 11 | transform: translateX(0px) rotate(0deg); 12 | } 13 | } 14 | 15 | .rollIn { 16 | animation-name: rollIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/specials/rollOut.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollOut { 4 | 0% { 5 | opacity: 1; 6 | transform: translateX(0px) rotate(0deg); 7 | } 8 | 9 | 100% { 10 | opacity: 0; 11 | transform: translateX(100%) rotate(120deg); 12 | } 13 | } 14 | 15 | .rollOut { 16 | animation-name: rollOut; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutUp { 2 | 40% { 3 | opacity: 1; 4 | transform: scale(.475) translateY(60px); 5 | animation-timing-function: linear; 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale(.1) translateY(-2000px); 11 | transform-origin: center top; 12 | } 13 | } 14 | 15 | .zoomOutUp { 16 | animation-name: zoomOutUp; 17 | } -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOut.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOut { 2 | 0% { 3 | transform: scale(1); 4 | } 5 | 6 | 25% { 7 | transform: scale(.95); 8 | } 9 | 10 | 50% { 11 | opacity: 1; 12 | transform: scale(1.1); 13 | } 14 | 15 | 100% { 16 | opacity: 0; 17 | transform: scale(.3); 18 | } 19 | } 20 | 21 | .bounceOut { 22 | animation-name: bounceOut; 23 | } 24 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | transform: rotate(90deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: rotate(0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownRight { 16 | animation-name: rotateInDownRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | transform: rotate(0); 5 | opacity: 1; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: rotate(-90deg); 11 | opacity: 0; 12 | } 13 | } 14 | 15 | .rotateOutDownRight { 16 | animation-name: rotateOutDownRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: scale(.1) translateY(2000px); 5 | animation-timing-function: ease-in-out; 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale(.475) translateY(-60px); 11 | animation-timing-function: ease-out; 12 | } 13 | } 14 | 15 | .zoomInUp { 16 | animation-name: zoomInUp; 17 | } -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutLeft { 2 | 40% { 3 | opacity: 1; 4 | transform: scale(.475) translateX(42px); 5 | animation-timing-function: linear; 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale(.1) translateX(-2000px); 11 | transform-origin: left center; 12 | } 13 | } 14 | 15 | .zoomOutLeft { 16 | animation-name: zoomOutLeft; 17 | } -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutDown { 2 | 40% { 3 | opacity: 1; 4 | transform: scale(.475) translateY(-60px); 5 | animation-timing-function: linear; 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale(.1) translateY(2000px); 11 | transform-origin: center bottom; 12 | } 13 | } 14 | 15 | .zoomOutDown { 16 | animation-name: zoomOutDown; 17 | } -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutRight { 2 | 40% { 3 | opacity: 1; 4 | transform: scale(.475) translateX(-42px); 5 | animation-timing-function: linear; 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale(.1) translateX(2000px); 11 | transform-origin: right center; 12 | } 13 | } 14 | 15 | .zoomOutRight { 16 | animation-name: zoomOutRight; 17 | } -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInDown { 2 | 0% { 3 | opacity: 0; 4 | transform: scale(.1) translateY(-2000px); 5 | animation-timing-function: ease-in-out; 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale(.475) translateY(60px); 11 | animation-timing-function: ease-out; 12 | } 13 | } 14 | 15 | .zoomInDown { 16 | animation-name: zoomInDown; 17 | } -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInLeft { 2 | 0% { 3 | opacity: 0; 4 | transform: scale(.1) translateX(-2000px); 5 | animation-timing-function: ease-in-out; 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale(.475) translateX(48px); 11 | animation-timing-function: ease-out; 12 | } 13 | } 14 | 15 | .zoomInLeft { 16 | animation-name: zoomInLeft; 17 | } -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceIn.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceIn { 2 | 0% { 3 | opacity: 0; 4 | transform: scale(.3); 5 | } 6 | 7 | 50% { 8 | opacity: 1; 9 | transform: scale(1.05); 10 | } 11 | 12 | 70% { 13 | transform: scale(.9); 14 | } 15 | 16 | 100% { 17 | opacity: 1; 18 | transform: scale(1); 19 | } 20 | } 21 | 22 | .bounceIn { 23 | animation-name: bounceIn; 24 | } 25 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInRight { 2 | 0% { 3 | opacity: 0; 4 | transform: scale(.1) translateX(2000px); 5 | animation-timing-function: ease-in-out; 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale(.475) translateX(-48px); 11 | animation-timing-function: ease-out; 12 | } 13 | } 14 | 15 | .zoomInRight { 16 | animation-name: zoomInRight; 17 | } -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(2000px); 5 | } 6 | 7 | 60% { 8 | opacity: 1; 9 | transform: translateY(-30px); 10 | } 11 | 12 | 80% { 13 | transform: translateY(10px); 14 | } 15 | 16 | 100% { 17 | transform: translateY(0); 18 | } 19 | } 20 | 21 | .bounceInUp { 22 | animation-name: bounceInUp; 23 | } 24 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInDown { 2 | 0% { 3 | opacity: 0; 4 | transform: translateY(-2000px); 5 | } 6 | 7 | 60% { 8 | opacity: 1; 9 | transform: translateY(30px); 10 | } 11 | 12 | 80% { 13 | transform: translateY(-10px); 14 | } 15 | 16 | 100% { 17 | transform: translateY(0); 18 | } 19 | } 20 | 21 | .bounceInDown { 22 | animation-name: bounceInDown; 23 | } 24 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInLeft { 2 | 0% { 3 | opacity: 0; 4 | transform: translateX(-2000px); 5 | } 6 | 7 | 60% { 8 | opacity: 1; 9 | transform: translateX(30px); 10 | } 11 | 12 | 80% { 13 | transform: translateX(-10px); 14 | } 15 | 16 | 100% { 17 | transform: translateX(0); 18 | } 19 | } 20 | 21 | .bounceInLeft { 22 | animation-name: bounceInLeft; 23 | } 24 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInRight { 2 | 0% { 3 | opacity: 0; 4 | transform: translateX(2000px); 5 | } 6 | 7 | 60% { 8 | opacity: 1; 9 | transform: translateX(-30px); 10 | } 11 | 12 | 80% { 13 | transform: translateX(10px); 14 | } 15 | 16 | 100% { 17 | transform: translateX(0); 18 | } 19 | } 20 | 21 | .bounceInRight { 22 | animation-name: bounceInRight; 23 | } 24 | -------------------------------------------------------------------------------- /source/attention_seekers/swing.css: -------------------------------------------------------------------------------- 1 | @keyframes swing { 2 | 20% { 3 | transform: rotate(15deg); 4 | } 5 | 6 | 40% { 7 | transform: rotate(-10deg); 8 | } 9 | 10 | 60% { 11 | transform: rotate(5deg); 12 | } 13 | 14 | 80% { 15 | transform: rotate(-5deg); 16 | } 17 | 18 | 100% { 19 | transform: rotate(0deg); 20 | } 21 | } 22 | 23 | .swing { 24 | transform-origin: top center; 25 | animation-name: swing; 26 | } 27 | -------------------------------------------------------------------------------- /source/attention_seekers/rubberBand.css: -------------------------------------------------------------------------------- 1 | @keyframes rubberBand { 2 | 0% { 3 | transform: scale(1); 4 | } 5 | 6 | 30% { 7 | transform: scaleX(1.25) scaleY(0.75); 8 | } 9 | 10 | 40% { 11 | transform: scaleX(0.75) scaleY(1.25); 12 | } 13 | 14 | 60% { 15 | transform: scaleX(1.15) scaleY(0.85); 16 | } 17 | 18 | 100% { 19 | transform: scale(1); 20 | } 21 | } 22 | 23 | .rubberBand { 24 | animation-name: rubberBand; 25 | } 26 | -------------------------------------------------------------------------------- /source/attention_seekers/tada.css: -------------------------------------------------------------------------------- 1 | @keyframes tada { 2 | 0% { 3 | transform: scale(1); 4 | } 5 | 6 | 10%, 20% { 7 | transform: scale(0.9) rotate(-3deg); 8 | } 9 | 10 | 30%, 50%, 70%, 90% { 11 | transform: scale(1.1) rotate(3deg); 12 | } 13 | 14 | 40%, 60%, 80% { 15 | transform: scale(1.1) rotate(-3deg); 16 | } 17 | 18 | 100% { 19 | transform: scale(1) rotate(0); 20 | } 21 | } 22 | 23 | .tada { 24 | animation-name: tada; 25 | } 26 | -------------------------------------------------------------------------------- /source/flippers/flipInX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInX { 2 | 0% { 3 | transform: perspective(400px) rotateX(90deg); 4 | opacity: 0; 5 | } 6 | 7 | 40% { 8 | transform: perspective(400px) rotateX(-10deg); 9 | } 10 | 11 | 70% { 12 | transform: perspective(400px) rotateX(10deg); 13 | } 14 | 15 | 100% { 16 | transform: perspective(400px) rotateX(0deg); 17 | opacity: 1; 18 | } 19 | } 20 | 21 | .flipInX { 22 | backface-visibility: visible !important; 23 | animation-name: flipInX; 24 | } 25 | -------------------------------------------------------------------------------- /source/flippers/flipInY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInY { 2 | 0% { 3 | transform: perspective(400px) rotateY(90deg); 4 | opacity: 0; 5 | } 6 | 7 | 40% { 8 | transform: perspective(400px) rotateY(-10deg); 9 | } 10 | 11 | 70% { 12 | transform: perspective(400px) rotateY(10deg); 13 | } 14 | 15 | 100% { 16 | transform: perspective(400px) rotateY(0deg); 17 | opacity: 1; 18 | } 19 | } 20 | 21 | .flipInY { 22 | backface-visibility: visible !important; 23 | animation-name: flipInY; 24 | } 25 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedIn.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedIn { 2 | 0% { 3 | transform: translateX(100%) skewX(-30deg); 4 | opacity: 0; 5 | } 6 | 7 | 60% { 8 | transform: translateX(-20%) skewX(30deg); 9 | opacity: 1; 10 | } 11 | 12 | 80% { 13 | transform: translateX(0%) skewX(-15deg); 14 | opacity: 1; 15 | } 16 | 17 | 100% { 18 | transform: translateX(0%) skewX(0deg); 19 | opacity: 1; 20 | } 21 | } 22 | 23 | .lightSpeedIn { 24 | animation-name: lightSpeedIn; 25 | animation-timing-function: ease-out; 26 | } 27 | -------------------------------------------------------------------------------- /source/attention_seekers/wobble.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes wobble { 4 | 0% { 5 | transform: translateX(0%); 6 | } 7 | 8 | 15% { 9 | transform: translateX(-25%) rotate(-5deg); 10 | } 11 | 12 | 30% { 13 | transform: translateX(20%) rotate(3deg); 14 | } 15 | 16 | 45% { 17 | transform: translateX(-15%) rotate(-3deg); 18 | } 19 | 20 | 60% { 21 | transform: translateX(10%) rotate(2deg); 22 | } 23 | 24 | 75% { 25 | transform: translateX(-5%) rotate(-1deg); 26 | } 27 | 28 | 100% { 29 | transform: translateX(0%); 30 | } 31 | } 32 | 33 | .wobble { 34 | animation-name: wobble; 35 | } 36 | -------------------------------------------------------------------------------- /source/specials/hinge.css: -------------------------------------------------------------------------------- 1 | @keyframes hinge { 2 | 0% { 3 | transform: rotate(0); 4 | transform-origin: top left; 5 | animation-timing-function: ease-in-out; 6 | } 7 | 8 | 20%, 60% { 9 | transform: rotate(80deg); 10 | transform-origin: top left; 11 | animation-timing-function: ease-in-out; 12 | } 13 | 14 | 40% { 15 | transform: rotate(60deg); 16 | transform-origin: top left; 17 | animation-timing-function: ease-in-out; 18 | } 19 | 20 | 80% { 21 | transform: rotate(60deg) translateY(0); 22 | transform-origin: top left; 23 | animation-timing-function: ease-in-out; 24 | opacity: 1; 25 | } 26 | 27 | 100% { 28 | transform: translateY(700px); 29 | opacity: 0; 30 | } 31 | } 32 | 33 | .hinge { 34 | animation-name: hinge; 35 | } 36 | -------------------------------------------------------------------------------- /source/flippers/flip.css: -------------------------------------------------------------------------------- 1 | @keyframes flip { 2 | 0% { 3 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 4 | animation-timing-function: ease-out; 5 | } 6 | 7 | 40% { 8 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 9 | animation-timing-function: ease-out; 10 | } 11 | 12 | 50% { 13 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 14 | animation-timing-function: ease-in; 15 | } 16 | 17 | 80% { 18 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 19 | animation-timing-function: ease-in; 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 24 | animation-timing-function: ease-in; 25 | } 26 | } 27 | 28 | .animated.flip { 29 | backface-visibility: visible; 30 | animation-name: flip; 31 | } 32 | -------------------------------------------------------------------------------- /source/_base.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | Animate.css - http://daneden.me/animate 4 | Licensed under the MIT license 5 | 6 | Copyright (c) 2013 Daniel Eden 7 | 8 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 11 | 12 | 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. 13 | */ 14 | 15 | .animated { 16 | animation-duration: 1s; 17 | animation-fill-mode: both; 18 | } 19 | 20 | .animated.infinite { 21 | animation-iteration-count: infinite; 22 | } 23 | 24 | .animated.hinge { 25 | animation-duration: 2s; 26 | } 27 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | require('load-grunt-tasks')(grunt); 4 | 5 | var concatAnim; 6 | 7 | grunt.initConfig({ 8 | 9 | pkg: grunt.file.readJSON('package.json'), 10 | 11 | concat: { 12 | dist: { 13 | src: [ 'source/_base.css', 'source/**/*.css' ], // _base.css required for .animated helper class 14 | dest: 'animate.css' 15 | } 16 | }, 17 | 18 | autoprefixer: { // https://github.com/nDmitry/grunt-autoprefixer 19 | options: { 20 | browsers: ['last 3 versions', 'bb 10', 'android 3'] 21 | }, 22 | no_dest: { 23 | src: 'animate.css' // output file 24 | } 25 | }, 26 | 27 | cssmin: { 28 | minify: { 29 | src: ['animate.css'], 30 | dest: 'animate.min.css', 31 | } 32 | }, 33 | 34 | watch: { 35 | css: { 36 | files: [ 'source/**/*', 'animate-config.json' ], 37 | tasks: ['default'] 38 | } 39 | } 40 | 41 | }); 42 | 43 | // fuction to perform custom task 44 | concatAnim = function () { 45 | 46 | var categories = grunt.file.readJSON('animate-config.json'), 47 | category, files, file, 48 | target = [ 'source/_base.css' ], 49 | count = 0; 50 | 51 | for ( category in categories ) { 52 | if ( categories.hasOwnProperty(category) ) { 53 | files = categories[category] 54 | for (file in files) { 55 | if ( files.hasOwnProperty(file) && files[file] ) { 56 | target.push('source/' + category + '/' + file + '.css'); 57 | count += 1; 58 | } 59 | } 60 | } 61 | } 62 | 63 | if (!count) { 64 | grunt.log.writeln('No animations activated.'); 65 | } else { 66 | grunt.log.writeln(count + (count > 1 ? ' animations' : ' animation') + ' activated.'); 67 | } 68 | 69 | grunt.config('concat', { 'animate.css': target }); 70 | grunt.task.run('concat'); 71 | 72 | }; 73 | 74 | // register task 75 | grunt.registerTask('concat-anim', 'Concatenates activated animations', concatAnim); // custom task 76 | grunt.registerTask('default', ['concat-anim', 'autoprefixer', 'cssmin']); 77 | grunt.registerTask('dev', ['watch']); 78 | 79 | }; 80 | -------------------------------------------------------------------------------- /animate-config.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "attention_seekers": { 4 | "bounce": true, 5 | "flash": true, 6 | "pulse": true, 7 | "rubberBand": true, 8 | "shake": true, 9 | "swing": true, 10 | "tada": true, 11 | "wobble": true 12 | }, 13 | 14 | "bouncing_entrances": { 15 | "bounceIn": true, 16 | "bounceInDown": true, 17 | "bounceInLeft": true, 18 | "bounceInRight": true, 19 | "bounceInUp": true 20 | }, 21 | 22 | "bouncing_exits": { 23 | "bounceOut": true, 24 | "bounceOutDown": true, 25 | "bounceOutLeft": true, 26 | "bounceOutRight": true, 27 | "bounceOutUp": true 28 | }, 29 | 30 | "fading_entrances": { 31 | "fadeIn": true, 32 | "fadeInDown": true, 33 | "fadeInDownBig": true, 34 | "fadeInLeft": true, 35 | "fadeInLeftBig": true, 36 | "fadeInRight": true, 37 | "fadeInRightBig": true, 38 | "fadeInUp": true, 39 | "fadeInUpBig": true 40 | }, 41 | 42 | "fading_exits": { 43 | "fadeOut": true, 44 | "fadeOutDown": true, 45 | "fadeOutDownBig": true, 46 | "fadeOutLeft": true, 47 | "fadeOutLeftBig": true, 48 | "fadeOutRight": true, 49 | "fadeOutRightBig": true, 50 | "fadeOutUp": true, 51 | "fadeOutUpBig": true 52 | }, 53 | 54 | "flippers": { 55 | "flip": true, 56 | "flipInX": true, 57 | "flipInY": true, 58 | "flipOutX": true, 59 | "flipOutY": true 60 | }, 61 | 62 | "lightspeed": { 63 | "lightspeedIn": true, 64 | "lightspeedOut": true 65 | }, 66 | 67 | "rotating_entrances": { 68 | "rotateIn": true, 69 | "rotateInDownLeft": true, 70 | "rotateInDownRight": true, 71 | "rotateInUpLeft": true, 72 | "rotateInUpRight": true 73 | }, 74 | 75 | "rotating_exits": { 76 | "rotateOut": true, 77 | "rotateOutDownLeft": true, 78 | "rotateOutDownRight": true, 79 | "rotateOutUpLeft": true, 80 | "rotateOutUpRight": true 81 | }, 82 | 83 | "sliders": { 84 | "slideInDown": true, 85 | "slideInLeft": true, 86 | "slideInRight": true, 87 | "slideOutLeft": true, 88 | "slideOutRight": true, 89 | "slideOutUp": true, 90 | "slideInUp": true, 91 | "slideOutDown": true 92 | }, 93 | 94 | "specials": { 95 | "hinge": true, 96 | "rollIn": true, 97 | "rollOut": true 98 | }, 99 | 100 | "zooming_entrances": { 101 | "zoomIn": true, 102 | "zoomInDown": true, 103 | "zoomInLeft": true, 104 | "zoomInRight": true, 105 | "zoomInUp": true 106 | }, 107 | 108 | "zooming_exits": { 109 | "zoomOut": true, 110 | "zoomOutDown": true, 111 | "zoomOutLeft": true, 112 | "zoomOutRight": true, 113 | "zoomOutUp": true 114 | } 115 | 116 | } 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Animate.css 2 | *Just-add-water CSS animation* 3 | 4 | `animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. 5 | 6 | ##Usage 7 | To use animate.css in your website, simply drop the stylesheet into your document's ``, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super! 8 | 9 | ```html 10 | 11 | 12 | 13 | ``` 14 | 15 | You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease: 16 | 17 | ```javascript 18 | $('#yourElement').addClass('animated bounceOutLeft'); 19 | ``` 20 | 21 | You can also detect when an animation ends: 22 | 23 | 28 | 29 | ```javascript 30 | $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); 31 | ``` 32 | 33 | **Note:** `jQuery#one` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/). 34 | 35 | You can change the duration of your animations, add a delay or change the number of times that it plays: 36 | 37 | ```css 38 | #yourElement { 39 | -vendor-animation-duration: 3s; 40 | -vendor-animation-delay: 2s; 41 | -vendor-animation-iteration-count: infinite; 42 | } 43 | ``` 44 | 45 | *Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)* 46 | 47 | ## Custom Builds 48 | Animate.css is powered by [Grunt](http://gruntjs.com), and you can create custom builds pretty easily. First of all, you’ll need Grunt and all other dependencies: 49 | 50 | ```sh 51 | $ cd path/to/animate.css/ 52 | $ sudo npm install 53 | ``` 54 | 55 | Next, run `grunt watch` to watch for changes and compile your custom builds. For example, if you want only some of the the “attention seekers”, simply edit the `animate-config.json` file to select only the animations you want to use. 56 | 57 | ```javascript 58 | "attention_seekers": { 59 | "bounce": true, 60 | "flash": false, 61 | "pulse": false, 62 | "shake": true, 63 | "swing": true, 64 | "tada": true, 65 | "wobble": true 66 | } 67 | ``` 68 | 69 | ## License 70 | Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT) 71 | 72 | ## Contributing 73 | Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). That last one is important. 74 | -------------------------------------------------------------------------------- /animate.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | Animate.css - http://daneden.me/animate 3 | Licensed under the MIT license 4 | 5 | Copyright (c) 2013 Daniel Eden 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 8 | 9 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 10 | 11 | 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. 12 | */.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes rubberBand{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);-ms-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);-ms-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);-ms-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}@keyframes wobble{0%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);-ms-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);-ms-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);-ms-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);-ms-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);-ms-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}@keyframes bounceOut{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes bounceOutDown{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes bounceOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes bounceOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(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 slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}@keyframes hinge{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-ms-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);-ms-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);-ms-transform:translateY(700px);transform:translateY(700px);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}@keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);-ms-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);-ms-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);-ms-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);-ms-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);-ms-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);-ms-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);-ms-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);-ms-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);-ms-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);-ms-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp} -------------------------------------------------------------------------------- /animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | Animate.css - http://daneden.me/animate 5 | Licensed under the MIT license 6 | 7 | Copyright (c) 2013 Daniel Eden 8 | 9 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 12 | 13 | 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. 14 | */ 15 | 16 | .animated { 17 | -webkit-animation-duration: 1s; 18 | animation-duration: 1s; 19 | -webkit-animation-fill-mode: both; 20 | animation-fill-mode: both; 21 | } 22 | 23 | .animated.infinite { 24 | -webkit-animation-iteration-count: infinite; 25 | animation-iteration-count: infinite; 26 | } 27 | 28 | .animated.hinge { 29 | -webkit-animation-duration: 2s; 30 | animation-duration: 2s; 31 | } 32 | 33 | @-webkit-keyframes bounce { 34 | 0%, 20%, 50%, 80%, 100% { 35 | -webkit-transform: translateY(0); 36 | transform: translateY(0); 37 | } 38 | 39 | 40% { 40 | -webkit-transform: translateY(-30px); 41 | transform: translateY(-30px); 42 | } 43 | 44 | 60% { 45 | -webkit-transform: translateY(-15px); 46 | transform: translateY(-15px); 47 | } 48 | } 49 | 50 | @keyframes bounce { 51 | 0%, 20%, 50%, 80%, 100% { 52 | -webkit-transform: translateY(0); 53 | -ms-transform: translateY(0); 54 | transform: translateY(0); 55 | } 56 | 57 | 40% { 58 | -webkit-transform: translateY(-30px); 59 | -ms-transform: translateY(-30px); 60 | transform: translateY(-30px); 61 | } 62 | 63 | 60% { 64 | -webkit-transform: translateY(-15px); 65 | -ms-transform: translateY(-15px); 66 | transform: translateY(-15px); 67 | } 68 | } 69 | 70 | .bounce { 71 | -webkit-animation-name: bounce; 72 | animation-name: bounce; 73 | } 74 | 75 | @-webkit-keyframes flash { 76 | 0%, 50%, 100% { 77 | opacity: 1; 78 | } 79 | 80 | 25%, 75% { 81 | opacity: 0; 82 | } 83 | } 84 | 85 | @keyframes flash { 86 | 0%, 50%, 100% { 87 | opacity: 1; 88 | } 89 | 90 | 25%, 75% { 91 | opacity: 0; 92 | } 93 | } 94 | 95 | .flash { 96 | -webkit-animation-name: flash; 97 | animation-name: flash; 98 | } 99 | 100 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 101 | 102 | @-webkit-keyframes pulse { 103 | 0% { 104 | -webkit-transform: scale(1); 105 | transform: scale(1); 106 | } 107 | 108 | 50% { 109 | -webkit-transform: scale(1.1); 110 | transform: scale(1.1); 111 | } 112 | 113 | 100% { 114 | -webkit-transform: scale(1); 115 | transform: scale(1); 116 | } 117 | } 118 | 119 | @keyframes pulse { 120 | 0% { 121 | -webkit-transform: scale(1); 122 | -ms-transform: scale(1); 123 | transform: scale(1); 124 | } 125 | 126 | 50% { 127 | -webkit-transform: scale(1.1); 128 | -ms-transform: scale(1.1); 129 | transform: scale(1.1); 130 | } 131 | 132 | 100% { 133 | -webkit-transform: scale(1); 134 | -ms-transform: scale(1); 135 | transform: scale(1); 136 | } 137 | } 138 | 139 | .pulse { 140 | -webkit-animation-name: pulse; 141 | animation-name: pulse; 142 | } 143 | 144 | @-webkit-keyframes rubberBand { 145 | 0% { 146 | -webkit-transform: scale(1); 147 | transform: scale(1); 148 | } 149 | 150 | 30% { 151 | -webkit-transform: scaleX(1.25) scaleY(0.75); 152 | transform: scaleX(1.25) scaleY(0.75); 153 | } 154 | 155 | 40% { 156 | -webkit-transform: scaleX(0.75) scaleY(1.25); 157 | transform: scaleX(0.75) scaleY(1.25); 158 | } 159 | 160 | 60% { 161 | -webkit-transform: scaleX(1.15) scaleY(0.85); 162 | transform: scaleX(1.15) scaleY(0.85); 163 | } 164 | 165 | 100% { 166 | -webkit-transform: scale(1); 167 | transform: scale(1); 168 | } 169 | } 170 | 171 | @keyframes rubberBand { 172 | 0% { 173 | -webkit-transform: scale(1); 174 | -ms-transform: scale(1); 175 | transform: scale(1); 176 | } 177 | 178 | 30% { 179 | -webkit-transform: scaleX(1.25) scaleY(0.75); 180 | -ms-transform: scaleX(1.25) scaleY(0.75); 181 | transform: scaleX(1.25) scaleY(0.75); 182 | } 183 | 184 | 40% { 185 | -webkit-transform: scaleX(0.75) scaleY(1.25); 186 | -ms-transform: scaleX(0.75) scaleY(1.25); 187 | transform: scaleX(0.75) scaleY(1.25); 188 | } 189 | 190 | 60% { 191 | -webkit-transform: scaleX(1.15) scaleY(0.85); 192 | -ms-transform: scaleX(1.15) scaleY(0.85); 193 | transform: scaleX(1.15) scaleY(0.85); 194 | } 195 | 196 | 100% { 197 | -webkit-transform: scale(1); 198 | -ms-transform: scale(1); 199 | transform: scale(1); 200 | } 201 | } 202 | 203 | .rubberBand { 204 | -webkit-animation-name: rubberBand; 205 | animation-name: rubberBand; 206 | } 207 | 208 | @-webkit-keyframes shake { 209 | 0%, 100% { 210 | -webkit-transform: translateX(0); 211 | transform: translateX(0); 212 | } 213 | 214 | 10%, 30%, 50%, 70%, 90% { 215 | -webkit-transform: translateX(-10px); 216 | transform: translateX(-10px); 217 | } 218 | 219 | 20%, 40%, 60%, 80% { 220 | -webkit-transform: translateX(10px); 221 | transform: translateX(10px); 222 | } 223 | } 224 | 225 | @keyframes shake { 226 | 0%, 100% { 227 | -webkit-transform: translateX(0); 228 | -ms-transform: translateX(0); 229 | transform: translateX(0); 230 | } 231 | 232 | 10%, 30%, 50%, 70%, 90% { 233 | -webkit-transform: translateX(-10px); 234 | -ms-transform: translateX(-10px); 235 | transform: translateX(-10px); 236 | } 237 | 238 | 20%, 40%, 60%, 80% { 239 | -webkit-transform: translateX(10px); 240 | -ms-transform: translateX(10px); 241 | transform: translateX(10px); 242 | } 243 | } 244 | 245 | .shake { 246 | -webkit-animation-name: shake; 247 | animation-name: shake; 248 | } 249 | 250 | @-webkit-keyframes swing { 251 | 20% { 252 | -webkit-transform: rotate(15deg); 253 | transform: rotate(15deg); 254 | } 255 | 256 | 40% { 257 | -webkit-transform: rotate(-10deg); 258 | transform: rotate(-10deg); 259 | } 260 | 261 | 60% { 262 | -webkit-transform: rotate(5deg); 263 | transform: rotate(5deg); 264 | } 265 | 266 | 80% { 267 | -webkit-transform: rotate(-5deg); 268 | transform: rotate(-5deg); 269 | } 270 | 271 | 100% { 272 | -webkit-transform: rotate(0deg); 273 | transform: rotate(0deg); 274 | } 275 | } 276 | 277 | @keyframes swing { 278 | 20% { 279 | -webkit-transform: rotate(15deg); 280 | -ms-transform: rotate(15deg); 281 | transform: rotate(15deg); 282 | } 283 | 284 | 40% { 285 | -webkit-transform: rotate(-10deg); 286 | -ms-transform: rotate(-10deg); 287 | transform: rotate(-10deg); 288 | } 289 | 290 | 60% { 291 | -webkit-transform: rotate(5deg); 292 | -ms-transform: rotate(5deg); 293 | transform: rotate(5deg); 294 | } 295 | 296 | 80% { 297 | -webkit-transform: rotate(-5deg); 298 | -ms-transform: rotate(-5deg); 299 | transform: rotate(-5deg); 300 | } 301 | 302 | 100% { 303 | -webkit-transform: rotate(0deg); 304 | -ms-transform: rotate(0deg); 305 | transform: rotate(0deg); 306 | } 307 | } 308 | 309 | .swing { 310 | -webkit-transform-origin: top center; 311 | -ms-transform-origin: top center; 312 | transform-origin: top center; 313 | -webkit-animation-name: swing; 314 | animation-name: swing; 315 | } 316 | 317 | @-webkit-keyframes tada { 318 | 0% { 319 | -webkit-transform: scale(1); 320 | transform: scale(1); 321 | } 322 | 323 | 10%, 20% { 324 | -webkit-transform: scale(0.9) rotate(-3deg); 325 | transform: scale(0.9) rotate(-3deg); 326 | } 327 | 328 | 30%, 50%, 70%, 90% { 329 | -webkit-transform: scale(1.1) rotate(3deg); 330 | transform: scale(1.1) rotate(3deg); 331 | } 332 | 333 | 40%, 60%, 80% { 334 | -webkit-transform: scale(1.1) rotate(-3deg); 335 | transform: scale(1.1) rotate(-3deg); 336 | } 337 | 338 | 100% { 339 | -webkit-transform: scale(1) rotate(0); 340 | transform: scale(1) rotate(0); 341 | } 342 | } 343 | 344 | @keyframes tada { 345 | 0% { 346 | -webkit-transform: scale(1); 347 | -ms-transform: scale(1); 348 | transform: scale(1); 349 | } 350 | 351 | 10%, 20% { 352 | -webkit-transform: scale(0.9) rotate(-3deg); 353 | -ms-transform: scale(0.9) rotate(-3deg); 354 | transform: scale(0.9) rotate(-3deg); 355 | } 356 | 357 | 30%, 50%, 70%, 90% { 358 | -webkit-transform: scale(1.1) rotate(3deg); 359 | -ms-transform: scale(1.1) rotate(3deg); 360 | transform: scale(1.1) rotate(3deg); 361 | } 362 | 363 | 40%, 60%, 80% { 364 | -webkit-transform: scale(1.1) rotate(-3deg); 365 | -ms-transform: scale(1.1) rotate(-3deg); 366 | transform: scale(1.1) rotate(-3deg); 367 | } 368 | 369 | 100% { 370 | -webkit-transform: scale(1) rotate(0); 371 | -ms-transform: scale(1) rotate(0); 372 | transform: scale(1) rotate(0); 373 | } 374 | } 375 | 376 | .tada { 377 | -webkit-animation-name: tada; 378 | animation-name: tada; 379 | } 380 | 381 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 382 | 383 | @-webkit-keyframes wobble { 384 | 0% { 385 | -webkit-transform: translateX(0%); 386 | transform: translateX(0%); 387 | } 388 | 389 | 15% { 390 | -webkit-transform: translateX(-25%) rotate(-5deg); 391 | transform: translateX(-25%) rotate(-5deg); 392 | } 393 | 394 | 30% { 395 | -webkit-transform: translateX(20%) rotate(3deg); 396 | transform: translateX(20%) rotate(3deg); 397 | } 398 | 399 | 45% { 400 | -webkit-transform: translateX(-15%) rotate(-3deg); 401 | transform: translateX(-15%) rotate(-3deg); 402 | } 403 | 404 | 60% { 405 | -webkit-transform: translateX(10%) rotate(2deg); 406 | transform: translateX(10%) rotate(2deg); 407 | } 408 | 409 | 75% { 410 | -webkit-transform: translateX(-5%) rotate(-1deg); 411 | transform: translateX(-5%) rotate(-1deg); 412 | } 413 | 414 | 100% { 415 | -webkit-transform: translateX(0%); 416 | transform: translateX(0%); 417 | } 418 | } 419 | 420 | @keyframes wobble { 421 | 0% { 422 | -webkit-transform: translateX(0%); 423 | -ms-transform: translateX(0%); 424 | transform: translateX(0%); 425 | } 426 | 427 | 15% { 428 | -webkit-transform: translateX(-25%) rotate(-5deg); 429 | -ms-transform: translateX(-25%) rotate(-5deg); 430 | transform: translateX(-25%) rotate(-5deg); 431 | } 432 | 433 | 30% { 434 | -webkit-transform: translateX(20%) rotate(3deg); 435 | -ms-transform: translateX(20%) rotate(3deg); 436 | transform: translateX(20%) rotate(3deg); 437 | } 438 | 439 | 45% { 440 | -webkit-transform: translateX(-15%) rotate(-3deg); 441 | -ms-transform: translateX(-15%) rotate(-3deg); 442 | transform: translateX(-15%) rotate(-3deg); 443 | } 444 | 445 | 60% { 446 | -webkit-transform: translateX(10%) rotate(2deg); 447 | -ms-transform: translateX(10%) rotate(2deg); 448 | transform: translateX(10%) rotate(2deg); 449 | } 450 | 451 | 75% { 452 | -webkit-transform: translateX(-5%) rotate(-1deg); 453 | -ms-transform: translateX(-5%) rotate(-1deg); 454 | transform: translateX(-5%) rotate(-1deg); 455 | } 456 | 457 | 100% { 458 | -webkit-transform: translateX(0%); 459 | -ms-transform: translateX(0%); 460 | transform: translateX(0%); 461 | } 462 | } 463 | 464 | .wobble { 465 | -webkit-animation-name: wobble; 466 | animation-name: wobble; 467 | } 468 | 469 | @-webkit-keyframes bounceIn { 470 | 0% { 471 | opacity: 0; 472 | -webkit-transform: scale(.3); 473 | transform: scale(.3); 474 | } 475 | 476 | 50% { 477 | opacity: 1; 478 | -webkit-transform: scale(1.05); 479 | transform: scale(1.05); 480 | } 481 | 482 | 70% { 483 | -webkit-transform: scale(.9); 484 | transform: scale(.9); 485 | } 486 | 487 | 100% { 488 | opacity: 1; 489 | -webkit-transform: scale(1); 490 | transform: scale(1); 491 | } 492 | } 493 | 494 | @keyframes bounceIn { 495 | 0% { 496 | opacity: 0; 497 | -webkit-transform: scale(.3); 498 | -ms-transform: scale(.3); 499 | transform: scale(.3); 500 | } 501 | 502 | 50% { 503 | opacity: 1; 504 | -webkit-transform: scale(1.05); 505 | -ms-transform: scale(1.05); 506 | transform: scale(1.05); 507 | } 508 | 509 | 70% { 510 | -webkit-transform: scale(.9); 511 | -ms-transform: scale(.9); 512 | transform: scale(.9); 513 | } 514 | 515 | 100% { 516 | opacity: 1; 517 | -webkit-transform: scale(1); 518 | -ms-transform: scale(1); 519 | transform: scale(1); 520 | } 521 | } 522 | 523 | .bounceIn { 524 | -webkit-animation-name: bounceIn; 525 | animation-name: bounceIn; 526 | } 527 | 528 | @-webkit-keyframes bounceInDown { 529 | 0% { 530 | opacity: 0; 531 | -webkit-transform: translateY(-2000px); 532 | transform: translateY(-2000px); 533 | } 534 | 535 | 60% { 536 | opacity: 1; 537 | -webkit-transform: translateY(30px); 538 | transform: translateY(30px); 539 | } 540 | 541 | 80% { 542 | -webkit-transform: translateY(-10px); 543 | transform: translateY(-10px); 544 | } 545 | 546 | 100% { 547 | -webkit-transform: translateY(0); 548 | transform: translateY(0); 549 | } 550 | } 551 | 552 | @keyframes bounceInDown { 553 | 0% { 554 | opacity: 0; 555 | -webkit-transform: translateY(-2000px); 556 | -ms-transform: translateY(-2000px); 557 | transform: translateY(-2000px); 558 | } 559 | 560 | 60% { 561 | opacity: 1; 562 | -webkit-transform: translateY(30px); 563 | -ms-transform: translateY(30px); 564 | transform: translateY(30px); 565 | } 566 | 567 | 80% { 568 | -webkit-transform: translateY(-10px); 569 | -ms-transform: translateY(-10px); 570 | transform: translateY(-10px); 571 | } 572 | 573 | 100% { 574 | -webkit-transform: translateY(0); 575 | -ms-transform: translateY(0); 576 | transform: translateY(0); 577 | } 578 | } 579 | 580 | .bounceInDown { 581 | -webkit-animation-name: bounceInDown; 582 | animation-name: bounceInDown; 583 | } 584 | 585 | @-webkit-keyframes bounceInLeft { 586 | 0% { 587 | opacity: 0; 588 | -webkit-transform: translateX(-2000px); 589 | transform: translateX(-2000px); 590 | } 591 | 592 | 60% { 593 | opacity: 1; 594 | -webkit-transform: translateX(30px); 595 | transform: translateX(30px); 596 | } 597 | 598 | 80% { 599 | -webkit-transform: translateX(-10px); 600 | transform: translateX(-10px); 601 | } 602 | 603 | 100% { 604 | -webkit-transform: translateX(0); 605 | transform: translateX(0); 606 | } 607 | } 608 | 609 | @keyframes bounceInLeft { 610 | 0% { 611 | opacity: 0; 612 | -webkit-transform: translateX(-2000px); 613 | -ms-transform: translateX(-2000px); 614 | transform: translateX(-2000px); 615 | } 616 | 617 | 60% { 618 | opacity: 1; 619 | -webkit-transform: translateX(30px); 620 | -ms-transform: translateX(30px); 621 | transform: translateX(30px); 622 | } 623 | 624 | 80% { 625 | -webkit-transform: translateX(-10px); 626 | -ms-transform: translateX(-10px); 627 | transform: translateX(-10px); 628 | } 629 | 630 | 100% { 631 | -webkit-transform: translateX(0); 632 | -ms-transform: translateX(0); 633 | transform: translateX(0); 634 | } 635 | } 636 | 637 | .bounceInLeft { 638 | -webkit-animation-name: bounceInLeft; 639 | animation-name: bounceInLeft; 640 | } 641 | 642 | @-webkit-keyframes bounceInRight { 643 | 0% { 644 | opacity: 0; 645 | -webkit-transform: translateX(2000px); 646 | transform: translateX(2000px); 647 | } 648 | 649 | 60% { 650 | opacity: 1; 651 | -webkit-transform: translateX(-30px); 652 | transform: translateX(-30px); 653 | } 654 | 655 | 80% { 656 | -webkit-transform: translateX(10px); 657 | transform: translateX(10px); 658 | } 659 | 660 | 100% { 661 | -webkit-transform: translateX(0); 662 | transform: translateX(0); 663 | } 664 | } 665 | 666 | @keyframes bounceInRight { 667 | 0% { 668 | opacity: 0; 669 | -webkit-transform: translateX(2000px); 670 | -ms-transform: translateX(2000px); 671 | transform: translateX(2000px); 672 | } 673 | 674 | 60% { 675 | opacity: 1; 676 | -webkit-transform: translateX(-30px); 677 | -ms-transform: translateX(-30px); 678 | transform: translateX(-30px); 679 | } 680 | 681 | 80% { 682 | -webkit-transform: translateX(10px); 683 | -ms-transform: translateX(10px); 684 | transform: translateX(10px); 685 | } 686 | 687 | 100% { 688 | -webkit-transform: translateX(0); 689 | -ms-transform: translateX(0); 690 | transform: translateX(0); 691 | } 692 | } 693 | 694 | .bounceInRight { 695 | -webkit-animation-name: bounceInRight; 696 | animation-name: bounceInRight; 697 | } 698 | 699 | @-webkit-keyframes bounceInUp { 700 | 0% { 701 | opacity: 0; 702 | -webkit-transform: translateY(2000px); 703 | transform: translateY(2000px); 704 | } 705 | 706 | 60% { 707 | opacity: 1; 708 | -webkit-transform: translateY(-30px); 709 | transform: translateY(-30px); 710 | } 711 | 712 | 80% { 713 | -webkit-transform: translateY(10px); 714 | transform: translateY(10px); 715 | } 716 | 717 | 100% { 718 | -webkit-transform: translateY(0); 719 | transform: translateY(0); 720 | } 721 | } 722 | 723 | @keyframes bounceInUp { 724 | 0% { 725 | opacity: 0; 726 | -webkit-transform: translateY(2000px); 727 | -ms-transform: translateY(2000px); 728 | transform: translateY(2000px); 729 | } 730 | 731 | 60% { 732 | opacity: 1; 733 | -webkit-transform: translateY(-30px); 734 | -ms-transform: translateY(-30px); 735 | transform: translateY(-30px); 736 | } 737 | 738 | 80% { 739 | -webkit-transform: translateY(10px); 740 | -ms-transform: translateY(10px); 741 | transform: translateY(10px); 742 | } 743 | 744 | 100% { 745 | -webkit-transform: translateY(0); 746 | -ms-transform: translateY(0); 747 | transform: translateY(0); 748 | } 749 | } 750 | 751 | .bounceInUp { 752 | -webkit-animation-name: bounceInUp; 753 | animation-name: bounceInUp; 754 | } 755 | 756 | @-webkit-keyframes bounceOut { 757 | 0% { 758 | -webkit-transform: scale(1); 759 | transform: scale(1); 760 | } 761 | 762 | 25% { 763 | -webkit-transform: scale(.95); 764 | transform: scale(.95); 765 | } 766 | 767 | 50% { 768 | opacity: 1; 769 | -webkit-transform: scale(1.1); 770 | transform: scale(1.1); 771 | } 772 | 773 | 100% { 774 | opacity: 0; 775 | -webkit-transform: scale(.3); 776 | transform: scale(.3); 777 | } 778 | } 779 | 780 | @keyframes bounceOut { 781 | 0% { 782 | -webkit-transform: scale(1); 783 | -ms-transform: scale(1); 784 | transform: scale(1); 785 | } 786 | 787 | 25% { 788 | -webkit-transform: scale(.95); 789 | -ms-transform: scale(.95); 790 | transform: scale(.95); 791 | } 792 | 793 | 50% { 794 | opacity: 1; 795 | -webkit-transform: scale(1.1); 796 | -ms-transform: scale(1.1); 797 | transform: scale(1.1); 798 | } 799 | 800 | 100% { 801 | opacity: 0; 802 | -webkit-transform: scale(.3); 803 | -ms-transform: scale(.3); 804 | transform: scale(.3); 805 | } 806 | } 807 | 808 | .bounceOut { 809 | -webkit-animation-name: bounceOut; 810 | animation-name: bounceOut; 811 | } 812 | 813 | @-webkit-keyframes bounceOutDown { 814 | 0% { 815 | -webkit-transform: translateY(0); 816 | transform: translateY(0); 817 | } 818 | 819 | 20% { 820 | opacity: 1; 821 | -webkit-transform: translateY(-20px); 822 | transform: translateY(-20px); 823 | } 824 | 825 | 100% { 826 | opacity: 0; 827 | -webkit-transform: translateY(2000px); 828 | transform: translateY(2000px); 829 | } 830 | } 831 | 832 | @keyframes bounceOutDown { 833 | 0% { 834 | -webkit-transform: translateY(0); 835 | -ms-transform: translateY(0); 836 | transform: translateY(0); 837 | } 838 | 839 | 20% { 840 | opacity: 1; 841 | -webkit-transform: translateY(-20px); 842 | -ms-transform: translateY(-20px); 843 | transform: translateY(-20px); 844 | } 845 | 846 | 100% { 847 | opacity: 0; 848 | -webkit-transform: translateY(2000px); 849 | -ms-transform: translateY(2000px); 850 | transform: translateY(2000px); 851 | } 852 | } 853 | 854 | .bounceOutDown { 855 | -webkit-animation-name: bounceOutDown; 856 | animation-name: bounceOutDown; 857 | } 858 | 859 | @-webkit-keyframes bounceOutLeft { 860 | 0% { 861 | -webkit-transform: translateX(0); 862 | transform: translateX(0); 863 | } 864 | 865 | 20% { 866 | opacity: 1; 867 | -webkit-transform: translateX(20px); 868 | transform: translateX(20px); 869 | } 870 | 871 | 100% { 872 | opacity: 0; 873 | -webkit-transform: translateX(-2000px); 874 | transform: translateX(-2000px); 875 | } 876 | } 877 | 878 | @keyframes bounceOutLeft { 879 | 0% { 880 | -webkit-transform: translateX(0); 881 | -ms-transform: translateX(0); 882 | transform: translateX(0); 883 | } 884 | 885 | 20% { 886 | opacity: 1; 887 | -webkit-transform: translateX(20px); 888 | -ms-transform: translateX(20px); 889 | transform: translateX(20px); 890 | } 891 | 892 | 100% { 893 | opacity: 0; 894 | -webkit-transform: translateX(-2000px); 895 | -ms-transform: translateX(-2000px); 896 | transform: translateX(-2000px); 897 | } 898 | } 899 | 900 | .bounceOutLeft { 901 | -webkit-animation-name: bounceOutLeft; 902 | animation-name: bounceOutLeft; 903 | } 904 | 905 | @-webkit-keyframes bounceOutRight { 906 | 0% { 907 | -webkit-transform: translateX(0); 908 | transform: translateX(0); 909 | } 910 | 911 | 20% { 912 | opacity: 1; 913 | -webkit-transform: translateX(-20px); 914 | transform: translateX(-20px); 915 | } 916 | 917 | 100% { 918 | opacity: 0; 919 | -webkit-transform: translateX(2000px); 920 | transform: translateX(2000px); 921 | } 922 | } 923 | 924 | @keyframes bounceOutRight { 925 | 0% { 926 | -webkit-transform: translateX(0); 927 | -ms-transform: translateX(0); 928 | transform: translateX(0); 929 | } 930 | 931 | 20% { 932 | opacity: 1; 933 | -webkit-transform: translateX(-20px); 934 | -ms-transform: translateX(-20px); 935 | transform: translateX(-20px); 936 | } 937 | 938 | 100% { 939 | opacity: 0; 940 | -webkit-transform: translateX(2000px); 941 | -ms-transform: translateX(2000px); 942 | transform: translateX(2000px); 943 | } 944 | } 945 | 946 | .bounceOutRight { 947 | -webkit-animation-name: bounceOutRight; 948 | animation-name: bounceOutRight; 949 | } 950 | 951 | @-webkit-keyframes bounceOutUp { 952 | 0% { 953 | -webkit-transform: translateY(0); 954 | transform: translateY(0); 955 | } 956 | 957 | 20% { 958 | opacity: 1; 959 | -webkit-transform: translateY(20px); 960 | transform: translateY(20px); 961 | } 962 | 963 | 100% { 964 | opacity: 0; 965 | -webkit-transform: translateY(-2000px); 966 | transform: translateY(-2000px); 967 | } 968 | } 969 | 970 | @keyframes bounceOutUp { 971 | 0% { 972 | -webkit-transform: translateY(0); 973 | -ms-transform: translateY(0); 974 | transform: translateY(0); 975 | } 976 | 977 | 20% { 978 | opacity: 1; 979 | -webkit-transform: translateY(20px); 980 | -ms-transform: translateY(20px); 981 | transform: translateY(20px); 982 | } 983 | 984 | 100% { 985 | opacity: 0; 986 | -webkit-transform: translateY(-2000px); 987 | -ms-transform: translateY(-2000px); 988 | transform: translateY(-2000px); 989 | } 990 | } 991 | 992 | .bounceOutUp { 993 | -webkit-animation-name: bounceOutUp; 994 | animation-name: bounceOutUp; 995 | } 996 | 997 | @-webkit-keyframes fadeIn { 998 | 0% { 999 | opacity: 0; 1000 | } 1001 | 1002 | 100% { 1003 | opacity: 1; 1004 | } 1005 | } 1006 | 1007 | @keyframes fadeIn { 1008 | 0% { 1009 | opacity: 0; 1010 | } 1011 | 1012 | 100% { 1013 | opacity: 1; 1014 | } 1015 | } 1016 | 1017 | .fadeIn { 1018 | -webkit-animation-name: fadeIn; 1019 | animation-name: fadeIn; 1020 | } 1021 | 1022 | @-webkit-keyframes fadeInDown { 1023 | 0% { 1024 | opacity: 0; 1025 | -webkit-transform: translateY(-20px); 1026 | transform: translateY(-20px); 1027 | } 1028 | 1029 | 100% { 1030 | opacity: 1; 1031 | -webkit-transform: translateY(0); 1032 | transform: translateY(0); 1033 | } 1034 | } 1035 | 1036 | @keyframes fadeInDown { 1037 | 0% { 1038 | opacity: 0; 1039 | -webkit-transform: translateY(-20px); 1040 | -ms-transform: translateY(-20px); 1041 | transform: translateY(-20px); 1042 | } 1043 | 1044 | 100% { 1045 | opacity: 1; 1046 | -webkit-transform: translateY(0); 1047 | -ms-transform: translateY(0); 1048 | transform: translateY(0); 1049 | } 1050 | } 1051 | 1052 | .fadeInDown { 1053 | -webkit-animation-name: fadeInDown; 1054 | animation-name: fadeInDown; 1055 | } 1056 | 1057 | @-webkit-keyframes fadeInDownBig { 1058 | 0% { 1059 | opacity: 0; 1060 | -webkit-transform: translateY(-2000px); 1061 | transform: translateY(-2000px); 1062 | } 1063 | 1064 | 100% { 1065 | opacity: 1; 1066 | -webkit-transform: translateY(0); 1067 | transform: translateY(0); 1068 | } 1069 | } 1070 | 1071 | @keyframes fadeInDownBig { 1072 | 0% { 1073 | opacity: 0; 1074 | -webkit-transform: translateY(-2000px); 1075 | -ms-transform: translateY(-2000px); 1076 | transform: translateY(-2000px); 1077 | } 1078 | 1079 | 100% { 1080 | opacity: 1; 1081 | -webkit-transform: translateY(0); 1082 | -ms-transform: translateY(0); 1083 | transform: translateY(0); 1084 | } 1085 | } 1086 | 1087 | .fadeInDownBig { 1088 | -webkit-animation-name: fadeInDownBig; 1089 | animation-name: fadeInDownBig; 1090 | } 1091 | 1092 | @-webkit-keyframes fadeInLeft { 1093 | 0% { 1094 | opacity: 0; 1095 | -webkit-transform: translateX(-20px); 1096 | transform: translateX(-20px); 1097 | } 1098 | 1099 | 100% { 1100 | opacity: 1; 1101 | -webkit-transform: translateX(0); 1102 | transform: translateX(0); 1103 | } 1104 | } 1105 | 1106 | @keyframes fadeInLeft { 1107 | 0% { 1108 | opacity: 0; 1109 | -webkit-transform: translateX(-20px); 1110 | -ms-transform: translateX(-20px); 1111 | transform: translateX(-20px); 1112 | } 1113 | 1114 | 100% { 1115 | opacity: 1; 1116 | -webkit-transform: translateX(0); 1117 | -ms-transform: translateX(0); 1118 | transform: translateX(0); 1119 | } 1120 | } 1121 | 1122 | .fadeInLeft { 1123 | -webkit-animation-name: fadeInLeft; 1124 | animation-name: fadeInLeft; 1125 | } 1126 | 1127 | @-webkit-keyframes fadeInLeftBig { 1128 | 0% { 1129 | opacity: 0; 1130 | -webkit-transform: translateX(-2000px); 1131 | transform: translateX(-2000px); 1132 | } 1133 | 1134 | 100% { 1135 | opacity: 1; 1136 | -webkit-transform: translateX(0); 1137 | transform: translateX(0); 1138 | } 1139 | } 1140 | 1141 | @keyframes fadeInLeftBig { 1142 | 0% { 1143 | opacity: 0; 1144 | -webkit-transform: translateX(-2000px); 1145 | -ms-transform: translateX(-2000px); 1146 | transform: translateX(-2000px); 1147 | } 1148 | 1149 | 100% { 1150 | opacity: 1; 1151 | -webkit-transform: translateX(0); 1152 | -ms-transform: translateX(0); 1153 | transform: translateX(0); 1154 | } 1155 | } 1156 | 1157 | .fadeInLeftBig { 1158 | -webkit-animation-name: fadeInLeftBig; 1159 | animation-name: fadeInLeftBig; 1160 | } 1161 | 1162 | @-webkit-keyframes fadeInRight { 1163 | 0% { 1164 | opacity: 0; 1165 | -webkit-transform: translateX(20px); 1166 | transform: translateX(20px); 1167 | } 1168 | 1169 | 100% { 1170 | opacity: 1; 1171 | -webkit-transform: translateX(0); 1172 | transform: translateX(0); 1173 | } 1174 | } 1175 | 1176 | @keyframes fadeInRight { 1177 | 0% { 1178 | opacity: 0; 1179 | -webkit-transform: translateX(20px); 1180 | -ms-transform: translateX(20px); 1181 | transform: translateX(20px); 1182 | } 1183 | 1184 | 100% { 1185 | opacity: 1; 1186 | -webkit-transform: translateX(0); 1187 | -ms-transform: translateX(0); 1188 | transform: translateX(0); 1189 | } 1190 | } 1191 | 1192 | .fadeInRight { 1193 | -webkit-animation-name: fadeInRight; 1194 | animation-name: fadeInRight; 1195 | } 1196 | 1197 | @-webkit-keyframes fadeInRightBig { 1198 | 0% { 1199 | opacity: 0; 1200 | -webkit-transform: translateX(2000px); 1201 | transform: translateX(2000px); 1202 | } 1203 | 1204 | 100% { 1205 | opacity: 1; 1206 | -webkit-transform: translateX(0); 1207 | transform: translateX(0); 1208 | } 1209 | } 1210 | 1211 | @keyframes fadeInRightBig { 1212 | 0% { 1213 | opacity: 0; 1214 | -webkit-transform: translateX(2000px); 1215 | -ms-transform: translateX(2000px); 1216 | transform: translateX(2000px); 1217 | } 1218 | 1219 | 100% { 1220 | opacity: 1; 1221 | -webkit-transform: translateX(0); 1222 | -ms-transform: translateX(0); 1223 | transform: translateX(0); 1224 | } 1225 | } 1226 | 1227 | .fadeInRightBig { 1228 | -webkit-animation-name: fadeInRightBig; 1229 | animation-name: fadeInRightBig; 1230 | } 1231 | 1232 | @-webkit-keyframes fadeInUp { 1233 | 0% { 1234 | opacity: 0; 1235 | -webkit-transform: translateY(20px); 1236 | transform: translateY(20px); 1237 | } 1238 | 1239 | 100% { 1240 | opacity: 1; 1241 | -webkit-transform: translateY(0); 1242 | transform: translateY(0); 1243 | } 1244 | } 1245 | 1246 | @keyframes fadeInUp { 1247 | 0% { 1248 | opacity: 0; 1249 | -webkit-transform: translateY(20px); 1250 | -ms-transform: translateY(20px); 1251 | transform: translateY(20px); 1252 | } 1253 | 1254 | 100% { 1255 | opacity: 1; 1256 | -webkit-transform: translateY(0); 1257 | -ms-transform: translateY(0); 1258 | transform: translateY(0); 1259 | } 1260 | } 1261 | 1262 | .fadeInUp { 1263 | -webkit-animation-name: fadeInUp; 1264 | animation-name: fadeInUp; 1265 | } 1266 | 1267 | @-webkit-keyframes fadeInUpBig { 1268 | 0% { 1269 | opacity: 0; 1270 | -webkit-transform: translateY(2000px); 1271 | transform: translateY(2000px); 1272 | } 1273 | 1274 | 100% { 1275 | opacity: 1; 1276 | -webkit-transform: translateY(0); 1277 | transform: translateY(0); 1278 | } 1279 | } 1280 | 1281 | @keyframes fadeInUpBig { 1282 | 0% { 1283 | opacity: 0; 1284 | -webkit-transform: translateY(2000px); 1285 | -ms-transform: translateY(2000px); 1286 | transform: translateY(2000px); 1287 | } 1288 | 1289 | 100% { 1290 | opacity: 1; 1291 | -webkit-transform: translateY(0); 1292 | -ms-transform: translateY(0); 1293 | transform: translateY(0); 1294 | } 1295 | } 1296 | 1297 | .fadeInUpBig { 1298 | -webkit-animation-name: fadeInUpBig; 1299 | animation-name: fadeInUpBig; 1300 | } 1301 | 1302 | @-webkit-keyframes fadeOut { 1303 | 0% { 1304 | opacity: 1; 1305 | } 1306 | 1307 | 100% { 1308 | opacity: 0; 1309 | } 1310 | } 1311 | 1312 | @keyframes fadeOut { 1313 | 0% { 1314 | opacity: 1; 1315 | } 1316 | 1317 | 100% { 1318 | opacity: 0; 1319 | } 1320 | } 1321 | 1322 | .fadeOut { 1323 | -webkit-animation-name: fadeOut; 1324 | animation-name: fadeOut; 1325 | } 1326 | 1327 | @-webkit-keyframes fadeOutDown { 1328 | 0% { 1329 | opacity: 1; 1330 | -webkit-transform: translateY(0); 1331 | transform: translateY(0); 1332 | } 1333 | 1334 | 100% { 1335 | opacity: 0; 1336 | -webkit-transform: translateY(20px); 1337 | transform: translateY(20px); 1338 | } 1339 | } 1340 | 1341 | @keyframes fadeOutDown { 1342 | 0% { 1343 | opacity: 1; 1344 | -webkit-transform: translateY(0); 1345 | -ms-transform: translateY(0); 1346 | transform: translateY(0); 1347 | } 1348 | 1349 | 100% { 1350 | opacity: 0; 1351 | -webkit-transform: translateY(20px); 1352 | -ms-transform: translateY(20px); 1353 | transform: translateY(20px); 1354 | } 1355 | } 1356 | 1357 | .fadeOutDown { 1358 | -webkit-animation-name: fadeOutDown; 1359 | animation-name: fadeOutDown; 1360 | } 1361 | 1362 | @-webkit-keyframes fadeOutDownBig { 1363 | 0% { 1364 | opacity: 1; 1365 | -webkit-transform: translateY(0); 1366 | transform: translateY(0); 1367 | } 1368 | 1369 | 100% { 1370 | opacity: 0; 1371 | -webkit-transform: translateY(2000px); 1372 | transform: translateY(2000px); 1373 | } 1374 | } 1375 | 1376 | @keyframes fadeOutDownBig { 1377 | 0% { 1378 | opacity: 1; 1379 | -webkit-transform: translateY(0); 1380 | -ms-transform: translateY(0); 1381 | transform: translateY(0); 1382 | } 1383 | 1384 | 100% { 1385 | opacity: 0; 1386 | -webkit-transform: translateY(2000px); 1387 | -ms-transform: translateY(2000px); 1388 | transform: translateY(2000px); 1389 | } 1390 | } 1391 | 1392 | .fadeOutDownBig { 1393 | -webkit-animation-name: fadeOutDownBig; 1394 | animation-name: fadeOutDownBig; 1395 | } 1396 | 1397 | @-webkit-keyframes fadeOutLeft { 1398 | 0% { 1399 | opacity: 1; 1400 | -webkit-transform: translateX(0); 1401 | transform: translateX(0); 1402 | } 1403 | 1404 | 100% { 1405 | opacity: 0; 1406 | -webkit-transform: translateX(-20px); 1407 | transform: translateX(-20px); 1408 | } 1409 | } 1410 | 1411 | @keyframes fadeOutLeft { 1412 | 0% { 1413 | opacity: 1; 1414 | -webkit-transform: translateX(0); 1415 | -ms-transform: translateX(0); 1416 | transform: translateX(0); 1417 | } 1418 | 1419 | 100% { 1420 | opacity: 0; 1421 | -webkit-transform: translateX(-20px); 1422 | -ms-transform: translateX(-20px); 1423 | transform: translateX(-20px); 1424 | } 1425 | } 1426 | 1427 | .fadeOutLeft { 1428 | -webkit-animation-name: fadeOutLeft; 1429 | animation-name: fadeOutLeft; 1430 | } 1431 | 1432 | @-webkit-keyframes fadeOutLeftBig { 1433 | 0% { 1434 | opacity: 1; 1435 | -webkit-transform: translateX(0); 1436 | transform: translateX(0); 1437 | } 1438 | 1439 | 100% { 1440 | opacity: 0; 1441 | -webkit-transform: translateX(-2000px); 1442 | transform: translateX(-2000px); 1443 | } 1444 | } 1445 | 1446 | @keyframes fadeOutLeftBig { 1447 | 0% { 1448 | opacity: 1; 1449 | -webkit-transform: translateX(0); 1450 | -ms-transform: translateX(0); 1451 | transform: translateX(0); 1452 | } 1453 | 1454 | 100% { 1455 | opacity: 0; 1456 | -webkit-transform: translateX(-2000px); 1457 | -ms-transform: translateX(-2000px); 1458 | transform: translateX(-2000px); 1459 | } 1460 | } 1461 | 1462 | .fadeOutLeftBig { 1463 | -webkit-animation-name: fadeOutLeftBig; 1464 | animation-name: fadeOutLeftBig; 1465 | } 1466 | 1467 | @-webkit-keyframes fadeOutRight { 1468 | 0% { 1469 | opacity: 1; 1470 | -webkit-transform: translateX(0); 1471 | transform: translateX(0); 1472 | } 1473 | 1474 | 100% { 1475 | opacity: 0; 1476 | -webkit-transform: translateX(20px); 1477 | transform: translateX(20px); 1478 | } 1479 | } 1480 | 1481 | @keyframes fadeOutRight { 1482 | 0% { 1483 | opacity: 1; 1484 | -webkit-transform: translateX(0); 1485 | -ms-transform: translateX(0); 1486 | transform: translateX(0); 1487 | } 1488 | 1489 | 100% { 1490 | opacity: 0; 1491 | -webkit-transform: translateX(20px); 1492 | -ms-transform: translateX(20px); 1493 | transform: translateX(20px); 1494 | } 1495 | } 1496 | 1497 | .fadeOutRight { 1498 | -webkit-animation-name: fadeOutRight; 1499 | animation-name: fadeOutRight; 1500 | } 1501 | 1502 | @-webkit-keyframes fadeOutRightBig { 1503 | 0% { 1504 | opacity: 1; 1505 | -webkit-transform: translateX(0); 1506 | transform: translateX(0); 1507 | } 1508 | 1509 | 100% { 1510 | opacity: 0; 1511 | -webkit-transform: translateX(2000px); 1512 | transform: translateX(2000px); 1513 | } 1514 | } 1515 | 1516 | @keyframes fadeOutRightBig { 1517 | 0% { 1518 | opacity: 1; 1519 | -webkit-transform: translateX(0); 1520 | -ms-transform: translateX(0); 1521 | transform: translateX(0); 1522 | } 1523 | 1524 | 100% { 1525 | opacity: 0; 1526 | -webkit-transform: translateX(2000px); 1527 | -ms-transform: translateX(2000px); 1528 | transform: translateX(2000px); 1529 | } 1530 | } 1531 | 1532 | .fadeOutRightBig { 1533 | -webkit-animation-name: fadeOutRightBig; 1534 | animation-name: fadeOutRightBig; 1535 | } 1536 | 1537 | @-webkit-keyframes fadeOutUp { 1538 | 0% { 1539 | opacity: 1; 1540 | -webkit-transform: translateY(0); 1541 | transform: translateY(0); 1542 | } 1543 | 1544 | 100% { 1545 | opacity: 0; 1546 | -webkit-transform: translateY(-20px); 1547 | transform: translateY(-20px); 1548 | } 1549 | } 1550 | 1551 | @keyframes fadeOutUp { 1552 | 0% { 1553 | opacity: 1; 1554 | -webkit-transform: translateY(0); 1555 | -ms-transform: translateY(0); 1556 | transform: translateY(0); 1557 | } 1558 | 1559 | 100% { 1560 | opacity: 0; 1561 | -webkit-transform: translateY(-20px); 1562 | -ms-transform: translateY(-20px); 1563 | transform: translateY(-20px); 1564 | } 1565 | } 1566 | 1567 | .fadeOutUp { 1568 | -webkit-animation-name: fadeOutUp; 1569 | animation-name: fadeOutUp; 1570 | } 1571 | 1572 | @-webkit-keyframes fadeOutUpBig { 1573 | 0% { 1574 | opacity: 1; 1575 | -webkit-transform: translateY(0); 1576 | transform: translateY(0); 1577 | } 1578 | 1579 | 100% { 1580 | opacity: 0; 1581 | -webkit-transform: translateY(-2000px); 1582 | transform: translateY(-2000px); 1583 | } 1584 | } 1585 | 1586 | @keyframes fadeOutUpBig { 1587 | 0% { 1588 | opacity: 1; 1589 | -webkit-transform: translateY(0); 1590 | -ms-transform: translateY(0); 1591 | transform: translateY(0); 1592 | } 1593 | 1594 | 100% { 1595 | opacity: 0; 1596 | -webkit-transform: translateY(-2000px); 1597 | -ms-transform: translateY(-2000px); 1598 | transform: translateY(-2000px); 1599 | } 1600 | } 1601 | 1602 | .fadeOutUpBig { 1603 | -webkit-animation-name: fadeOutUpBig; 1604 | animation-name: fadeOutUpBig; 1605 | } 1606 | 1607 | @-webkit-keyframes flip { 1608 | 0% { 1609 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1610 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1611 | -webkit-animation-timing-function: ease-out; 1612 | animation-timing-function: ease-out; 1613 | } 1614 | 1615 | 40% { 1616 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1617 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1618 | -webkit-animation-timing-function: ease-out; 1619 | animation-timing-function: ease-out; 1620 | } 1621 | 1622 | 50% { 1623 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1624 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1625 | -webkit-animation-timing-function: ease-in; 1626 | animation-timing-function: ease-in; 1627 | } 1628 | 1629 | 80% { 1630 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1631 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1632 | -webkit-animation-timing-function: ease-in; 1633 | animation-timing-function: ease-in; 1634 | } 1635 | 1636 | 100% { 1637 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1638 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1639 | -webkit-animation-timing-function: ease-in; 1640 | animation-timing-function: ease-in; 1641 | } 1642 | } 1643 | 1644 | @keyframes flip { 1645 | 0% { 1646 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1647 | -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1648 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1649 | -webkit-animation-timing-function: ease-out; 1650 | animation-timing-function: ease-out; 1651 | } 1652 | 1653 | 40% { 1654 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1655 | -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1656 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1657 | -webkit-animation-timing-function: ease-out; 1658 | animation-timing-function: ease-out; 1659 | } 1660 | 1661 | 50% { 1662 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1663 | -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1664 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1665 | -webkit-animation-timing-function: ease-in; 1666 | animation-timing-function: ease-in; 1667 | } 1668 | 1669 | 80% { 1670 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1671 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1672 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1673 | -webkit-animation-timing-function: ease-in; 1674 | animation-timing-function: ease-in; 1675 | } 1676 | 1677 | 100% { 1678 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1679 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1680 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1681 | -webkit-animation-timing-function: ease-in; 1682 | animation-timing-function: ease-in; 1683 | } 1684 | } 1685 | 1686 | .animated.flip { 1687 | -webkit-backface-visibility: visible; 1688 | -ms-backface-visibility: visible; 1689 | backface-visibility: visible; 1690 | -webkit-animation-name: flip; 1691 | animation-name: flip; 1692 | } 1693 | 1694 | @-webkit-keyframes flipInX { 1695 | 0% { 1696 | -webkit-transform: perspective(400px) rotateX(90deg); 1697 | transform: perspective(400px) rotateX(90deg); 1698 | opacity: 0; 1699 | } 1700 | 1701 | 40% { 1702 | -webkit-transform: perspective(400px) rotateX(-10deg); 1703 | transform: perspective(400px) rotateX(-10deg); 1704 | } 1705 | 1706 | 70% { 1707 | -webkit-transform: perspective(400px) rotateX(10deg); 1708 | transform: perspective(400px) rotateX(10deg); 1709 | } 1710 | 1711 | 100% { 1712 | -webkit-transform: perspective(400px) rotateX(0deg); 1713 | transform: perspective(400px) rotateX(0deg); 1714 | opacity: 1; 1715 | } 1716 | } 1717 | 1718 | @keyframes flipInX { 1719 | 0% { 1720 | -webkit-transform: perspective(400px) rotateX(90deg); 1721 | -ms-transform: perspective(400px) rotateX(90deg); 1722 | transform: perspective(400px) rotateX(90deg); 1723 | opacity: 0; 1724 | } 1725 | 1726 | 40% { 1727 | -webkit-transform: perspective(400px) rotateX(-10deg); 1728 | -ms-transform: perspective(400px) rotateX(-10deg); 1729 | transform: perspective(400px) rotateX(-10deg); 1730 | } 1731 | 1732 | 70% { 1733 | -webkit-transform: perspective(400px) rotateX(10deg); 1734 | -ms-transform: perspective(400px) rotateX(10deg); 1735 | transform: perspective(400px) rotateX(10deg); 1736 | } 1737 | 1738 | 100% { 1739 | -webkit-transform: perspective(400px) rotateX(0deg); 1740 | -ms-transform: perspective(400px) rotateX(0deg); 1741 | transform: perspective(400px) rotateX(0deg); 1742 | opacity: 1; 1743 | } 1744 | } 1745 | 1746 | .flipInX { 1747 | -webkit-backface-visibility: visible !important; 1748 | -ms-backface-visibility: visible !important; 1749 | backface-visibility: visible !important; 1750 | -webkit-animation-name: flipInX; 1751 | animation-name: flipInX; 1752 | } 1753 | 1754 | @-webkit-keyframes flipInY { 1755 | 0% { 1756 | -webkit-transform: perspective(400px) rotateY(90deg); 1757 | transform: perspective(400px) rotateY(90deg); 1758 | opacity: 0; 1759 | } 1760 | 1761 | 40% { 1762 | -webkit-transform: perspective(400px) rotateY(-10deg); 1763 | transform: perspective(400px) rotateY(-10deg); 1764 | } 1765 | 1766 | 70% { 1767 | -webkit-transform: perspective(400px) rotateY(10deg); 1768 | transform: perspective(400px) rotateY(10deg); 1769 | } 1770 | 1771 | 100% { 1772 | -webkit-transform: perspective(400px) rotateY(0deg); 1773 | transform: perspective(400px) rotateY(0deg); 1774 | opacity: 1; 1775 | } 1776 | } 1777 | 1778 | @keyframes flipInY { 1779 | 0% { 1780 | -webkit-transform: perspective(400px) rotateY(90deg); 1781 | -ms-transform: perspective(400px) rotateY(90deg); 1782 | transform: perspective(400px) rotateY(90deg); 1783 | opacity: 0; 1784 | } 1785 | 1786 | 40% { 1787 | -webkit-transform: perspective(400px) rotateY(-10deg); 1788 | -ms-transform: perspective(400px) rotateY(-10deg); 1789 | transform: perspective(400px) rotateY(-10deg); 1790 | } 1791 | 1792 | 70% { 1793 | -webkit-transform: perspective(400px) rotateY(10deg); 1794 | -ms-transform: perspective(400px) rotateY(10deg); 1795 | transform: perspective(400px) rotateY(10deg); 1796 | } 1797 | 1798 | 100% { 1799 | -webkit-transform: perspective(400px) rotateY(0deg); 1800 | -ms-transform: perspective(400px) rotateY(0deg); 1801 | transform: perspective(400px) rotateY(0deg); 1802 | opacity: 1; 1803 | } 1804 | } 1805 | 1806 | .flipInY { 1807 | -webkit-backface-visibility: visible !important; 1808 | -ms-backface-visibility: visible !important; 1809 | backface-visibility: visible !important; 1810 | -webkit-animation-name: flipInY; 1811 | animation-name: flipInY; 1812 | } 1813 | 1814 | @-webkit-keyframes flipOutX { 1815 | 0% { 1816 | -webkit-transform: perspective(400px) rotateX(0deg); 1817 | transform: perspective(400px) rotateX(0deg); 1818 | opacity: 1; 1819 | } 1820 | 1821 | 100% { 1822 | -webkit-transform: perspective(400px) rotateX(90deg); 1823 | transform: perspective(400px) rotateX(90deg); 1824 | opacity: 0; 1825 | } 1826 | } 1827 | 1828 | @keyframes flipOutX { 1829 | 0% { 1830 | -webkit-transform: perspective(400px) rotateX(0deg); 1831 | -ms-transform: perspective(400px) rotateX(0deg); 1832 | transform: perspective(400px) rotateX(0deg); 1833 | opacity: 1; 1834 | } 1835 | 1836 | 100% { 1837 | -webkit-transform: perspective(400px) rotateX(90deg); 1838 | -ms-transform: perspective(400px) rotateX(90deg); 1839 | transform: perspective(400px) rotateX(90deg); 1840 | opacity: 0; 1841 | } 1842 | } 1843 | 1844 | .flipOutX { 1845 | -webkit-animation-name: flipOutX; 1846 | animation-name: flipOutX; 1847 | -webkit-backface-visibility: visible !important; 1848 | -ms-backface-visibility: visible !important; 1849 | backface-visibility: visible !important; 1850 | } 1851 | 1852 | @-webkit-keyframes flipOutY { 1853 | 0% { 1854 | -webkit-transform: perspective(400px) rotateY(0deg); 1855 | transform: perspective(400px) rotateY(0deg); 1856 | opacity: 1; 1857 | } 1858 | 1859 | 100% { 1860 | -webkit-transform: perspective(400px) rotateY(90deg); 1861 | transform: perspective(400px) rotateY(90deg); 1862 | opacity: 0; 1863 | } 1864 | } 1865 | 1866 | @keyframes flipOutY { 1867 | 0% { 1868 | -webkit-transform: perspective(400px) rotateY(0deg); 1869 | -ms-transform: perspective(400px) rotateY(0deg); 1870 | transform: perspective(400px) rotateY(0deg); 1871 | opacity: 1; 1872 | } 1873 | 1874 | 100% { 1875 | -webkit-transform: perspective(400px) rotateY(90deg); 1876 | -ms-transform: perspective(400px) rotateY(90deg); 1877 | transform: perspective(400px) rotateY(90deg); 1878 | opacity: 0; 1879 | } 1880 | } 1881 | 1882 | .flipOutY { 1883 | -webkit-backface-visibility: visible !important; 1884 | -ms-backface-visibility: visible !important; 1885 | backface-visibility: visible !important; 1886 | -webkit-animation-name: flipOutY; 1887 | animation-name: flipOutY; 1888 | } 1889 | 1890 | @-webkit-keyframes lightSpeedIn { 1891 | 0% { 1892 | -webkit-transform: translateX(100%) skewX(-30deg); 1893 | transform: translateX(100%) skewX(-30deg); 1894 | opacity: 0; 1895 | } 1896 | 1897 | 60% { 1898 | -webkit-transform: translateX(-20%) skewX(30deg); 1899 | transform: translateX(-20%) skewX(30deg); 1900 | opacity: 1; 1901 | } 1902 | 1903 | 80% { 1904 | -webkit-transform: translateX(0%) skewX(-15deg); 1905 | transform: translateX(0%) skewX(-15deg); 1906 | opacity: 1; 1907 | } 1908 | 1909 | 100% { 1910 | -webkit-transform: translateX(0%) skewX(0deg); 1911 | transform: translateX(0%) skewX(0deg); 1912 | opacity: 1; 1913 | } 1914 | } 1915 | 1916 | @keyframes lightSpeedIn { 1917 | 0% { 1918 | -webkit-transform: translateX(100%) skewX(-30deg); 1919 | -ms-transform: translateX(100%) skewX(-30deg); 1920 | transform: translateX(100%) skewX(-30deg); 1921 | opacity: 0; 1922 | } 1923 | 1924 | 60% { 1925 | -webkit-transform: translateX(-20%) skewX(30deg); 1926 | -ms-transform: translateX(-20%) skewX(30deg); 1927 | transform: translateX(-20%) skewX(30deg); 1928 | opacity: 1; 1929 | } 1930 | 1931 | 80% { 1932 | -webkit-transform: translateX(0%) skewX(-15deg); 1933 | -ms-transform: translateX(0%) skewX(-15deg); 1934 | transform: translateX(0%) skewX(-15deg); 1935 | opacity: 1; 1936 | } 1937 | 1938 | 100% { 1939 | -webkit-transform: translateX(0%) skewX(0deg); 1940 | -ms-transform: translateX(0%) skewX(0deg); 1941 | transform: translateX(0%) skewX(0deg); 1942 | opacity: 1; 1943 | } 1944 | } 1945 | 1946 | .lightSpeedIn { 1947 | -webkit-animation-name: lightSpeedIn; 1948 | animation-name: lightSpeedIn; 1949 | -webkit-animation-timing-function: ease-out; 1950 | animation-timing-function: ease-out; 1951 | } 1952 | 1953 | @-webkit-keyframes lightSpeedOut { 1954 | 0% { 1955 | -webkit-transform: translateX(0%) skewX(0deg); 1956 | transform: translateX(0%) skewX(0deg); 1957 | opacity: 1; 1958 | } 1959 | 1960 | 100% { 1961 | -webkit-transform: translateX(100%) skewX(-30deg); 1962 | transform: translateX(100%) skewX(-30deg); 1963 | opacity: 0; 1964 | } 1965 | } 1966 | 1967 | @keyframes lightSpeedOut { 1968 | 0% { 1969 | -webkit-transform: translateX(0%) skewX(0deg); 1970 | -ms-transform: translateX(0%) skewX(0deg); 1971 | transform: translateX(0%) skewX(0deg); 1972 | opacity: 1; 1973 | } 1974 | 1975 | 100% { 1976 | -webkit-transform: translateX(100%) skewX(-30deg); 1977 | -ms-transform: translateX(100%) skewX(-30deg); 1978 | transform: translateX(100%) skewX(-30deg); 1979 | opacity: 0; 1980 | } 1981 | } 1982 | 1983 | .lightSpeedOut { 1984 | -webkit-animation-name: lightSpeedOut; 1985 | animation-name: lightSpeedOut; 1986 | -webkit-animation-timing-function: ease-in; 1987 | animation-timing-function: ease-in; 1988 | } 1989 | 1990 | @-webkit-keyframes rotateIn { 1991 | 0% { 1992 | -webkit-transform-origin: center center; 1993 | transform-origin: center center; 1994 | -webkit-transform: rotate(-200deg); 1995 | transform: rotate(-200deg); 1996 | opacity: 0; 1997 | } 1998 | 1999 | 100% { 2000 | -webkit-transform-origin: center center; 2001 | transform-origin: center center; 2002 | -webkit-transform: rotate(0); 2003 | transform: rotate(0); 2004 | opacity: 1; 2005 | } 2006 | } 2007 | 2008 | @keyframes rotateIn { 2009 | 0% { 2010 | -webkit-transform-origin: center center; 2011 | -ms-transform-origin: center center; 2012 | transform-origin: center center; 2013 | -webkit-transform: rotate(-200deg); 2014 | -ms-transform: rotate(-200deg); 2015 | transform: rotate(-200deg); 2016 | opacity: 0; 2017 | } 2018 | 2019 | 100% { 2020 | -webkit-transform-origin: center center; 2021 | -ms-transform-origin: center center; 2022 | transform-origin: center center; 2023 | -webkit-transform: rotate(0); 2024 | -ms-transform: rotate(0); 2025 | transform: rotate(0); 2026 | opacity: 1; 2027 | } 2028 | } 2029 | 2030 | .rotateIn { 2031 | -webkit-animation-name: rotateIn; 2032 | animation-name: rotateIn; 2033 | } 2034 | 2035 | @-webkit-keyframes rotateInDownLeft { 2036 | 0% { 2037 | -webkit-transform-origin: left bottom; 2038 | transform-origin: left bottom; 2039 | -webkit-transform: rotate(-90deg); 2040 | transform: rotate(-90deg); 2041 | opacity: 0; 2042 | } 2043 | 2044 | 100% { 2045 | -webkit-transform-origin: left bottom; 2046 | transform-origin: left bottom; 2047 | -webkit-transform: rotate(0); 2048 | transform: rotate(0); 2049 | opacity: 1; 2050 | } 2051 | } 2052 | 2053 | @keyframes rotateInDownLeft { 2054 | 0% { 2055 | -webkit-transform-origin: left bottom; 2056 | -ms-transform-origin: left bottom; 2057 | transform-origin: left bottom; 2058 | -webkit-transform: rotate(-90deg); 2059 | -ms-transform: rotate(-90deg); 2060 | transform: rotate(-90deg); 2061 | opacity: 0; 2062 | } 2063 | 2064 | 100% { 2065 | -webkit-transform-origin: left bottom; 2066 | -ms-transform-origin: left bottom; 2067 | transform-origin: left bottom; 2068 | -webkit-transform: rotate(0); 2069 | -ms-transform: rotate(0); 2070 | transform: rotate(0); 2071 | opacity: 1; 2072 | } 2073 | } 2074 | 2075 | .rotateInDownLeft { 2076 | -webkit-animation-name: rotateInDownLeft; 2077 | animation-name: rotateInDownLeft; 2078 | } 2079 | 2080 | @-webkit-keyframes rotateInDownRight { 2081 | 0% { 2082 | -webkit-transform-origin: right bottom; 2083 | transform-origin: right bottom; 2084 | -webkit-transform: rotate(90deg); 2085 | transform: rotate(90deg); 2086 | opacity: 0; 2087 | } 2088 | 2089 | 100% { 2090 | -webkit-transform-origin: right bottom; 2091 | transform-origin: right bottom; 2092 | -webkit-transform: rotate(0); 2093 | transform: rotate(0); 2094 | opacity: 1; 2095 | } 2096 | } 2097 | 2098 | @keyframes rotateInDownRight { 2099 | 0% { 2100 | -webkit-transform-origin: right bottom; 2101 | -ms-transform-origin: right bottom; 2102 | transform-origin: right bottom; 2103 | -webkit-transform: rotate(90deg); 2104 | -ms-transform: rotate(90deg); 2105 | transform: rotate(90deg); 2106 | opacity: 0; 2107 | } 2108 | 2109 | 100% { 2110 | -webkit-transform-origin: right bottom; 2111 | -ms-transform-origin: right bottom; 2112 | transform-origin: right bottom; 2113 | -webkit-transform: rotate(0); 2114 | -ms-transform: rotate(0); 2115 | transform: rotate(0); 2116 | opacity: 1; 2117 | } 2118 | } 2119 | 2120 | .rotateInDownRight { 2121 | -webkit-animation-name: rotateInDownRight; 2122 | animation-name: rotateInDownRight; 2123 | } 2124 | 2125 | @-webkit-keyframes rotateInUpLeft { 2126 | 0% { 2127 | -webkit-transform-origin: left bottom; 2128 | transform-origin: left bottom; 2129 | -webkit-transform: rotate(90deg); 2130 | transform: rotate(90deg); 2131 | opacity: 0; 2132 | } 2133 | 2134 | 100% { 2135 | -webkit-transform-origin: left bottom; 2136 | transform-origin: left bottom; 2137 | -webkit-transform: rotate(0); 2138 | transform: rotate(0); 2139 | opacity: 1; 2140 | } 2141 | } 2142 | 2143 | @keyframes rotateInUpLeft { 2144 | 0% { 2145 | -webkit-transform-origin: left bottom; 2146 | -ms-transform-origin: left bottom; 2147 | transform-origin: left bottom; 2148 | -webkit-transform: rotate(90deg); 2149 | -ms-transform: rotate(90deg); 2150 | transform: rotate(90deg); 2151 | opacity: 0; 2152 | } 2153 | 2154 | 100% { 2155 | -webkit-transform-origin: left bottom; 2156 | -ms-transform-origin: left bottom; 2157 | transform-origin: left bottom; 2158 | -webkit-transform: rotate(0); 2159 | -ms-transform: rotate(0); 2160 | transform: rotate(0); 2161 | opacity: 1; 2162 | } 2163 | } 2164 | 2165 | .rotateInUpLeft { 2166 | -webkit-animation-name: rotateInUpLeft; 2167 | animation-name: rotateInUpLeft; 2168 | } 2169 | 2170 | @-webkit-keyframes rotateInUpRight { 2171 | 0% { 2172 | -webkit-transform-origin: right bottom; 2173 | transform-origin: right bottom; 2174 | -webkit-transform: rotate(-90deg); 2175 | transform: rotate(-90deg); 2176 | opacity: 0; 2177 | } 2178 | 2179 | 100% { 2180 | -webkit-transform-origin: right bottom; 2181 | transform-origin: right bottom; 2182 | -webkit-transform: rotate(0); 2183 | transform: rotate(0); 2184 | opacity: 1; 2185 | } 2186 | } 2187 | 2188 | @keyframes rotateInUpRight { 2189 | 0% { 2190 | -webkit-transform-origin: right bottom; 2191 | -ms-transform-origin: right bottom; 2192 | transform-origin: right bottom; 2193 | -webkit-transform: rotate(-90deg); 2194 | -ms-transform: rotate(-90deg); 2195 | transform: rotate(-90deg); 2196 | opacity: 0; 2197 | } 2198 | 2199 | 100% { 2200 | -webkit-transform-origin: right bottom; 2201 | -ms-transform-origin: right bottom; 2202 | transform-origin: right bottom; 2203 | -webkit-transform: rotate(0); 2204 | -ms-transform: rotate(0); 2205 | transform: rotate(0); 2206 | opacity: 1; 2207 | } 2208 | } 2209 | 2210 | .rotateInUpRight { 2211 | -webkit-animation-name: rotateInUpRight; 2212 | animation-name: rotateInUpRight; 2213 | } 2214 | 2215 | @-webkit-keyframes rotateOut { 2216 | 0% { 2217 | -webkit-transform-origin: center center; 2218 | transform-origin: center center; 2219 | -webkit-transform: rotate(0); 2220 | transform: rotate(0); 2221 | opacity: 1; 2222 | } 2223 | 2224 | 100% { 2225 | -webkit-transform-origin: center center; 2226 | transform-origin: center center; 2227 | -webkit-transform: rotate(200deg); 2228 | transform: rotate(200deg); 2229 | opacity: 0; 2230 | } 2231 | } 2232 | 2233 | @keyframes rotateOut { 2234 | 0% { 2235 | -webkit-transform-origin: center center; 2236 | -ms-transform-origin: center center; 2237 | transform-origin: center center; 2238 | -webkit-transform: rotate(0); 2239 | -ms-transform: rotate(0); 2240 | transform: rotate(0); 2241 | opacity: 1; 2242 | } 2243 | 2244 | 100% { 2245 | -webkit-transform-origin: center center; 2246 | -ms-transform-origin: center center; 2247 | transform-origin: center center; 2248 | -webkit-transform: rotate(200deg); 2249 | -ms-transform: rotate(200deg); 2250 | transform: rotate(200deg); 2251 | opacity: 0; 2252 | } 2253 | } 2254 | 2255 | .rotateOut { 2256 | -webkit-animation-name: rotateOut; 2257 | animation-name: rotateOut; 2258 | } 2259 | 2260 | @-webkit-keyframes rotateOutDownLeft { 2261 | 0% { 2262 | -webkit-transform-origin: left bottom; 2263 | transform-origin: left bottom; 2264 | -webkit-transform: rotate(0); 2265 | transform: rotate(0); 2266 | opacity: 1; 2267 | } 2268 | 2269 | 100% { 2270 | -webkit-transform-origin: left bottom; 2271 | transform-origin: left bottom; 2272 | -webkit-transform: rotate(90deg); 2273 | transform: rotate(90deg); 2274 | opacity: 0; 2275 | } 2276 | } 2277 | 2278 | @keyframes rotateOutDownLeft { 2279 | 0% { 2280 | -webkit-transform-origin: left bottom; 2281 | -ms-transform-origin: left bottom; 2282 | transform-origin: left bottom; 2283 | -webkit-transform: rotate(0); 2284 | -ms-transform: rotate(0); 2285 | transform: rotate(0); 2286 | opacity: 1; 2287 | } 2288 | 2289 | 100% { 2290 | -webkit-transform-origin: left bottom; 2291 | -ms-transform-origin: left bottom; 2292 | transform-origin: left bottom; 2293 | -webkit-transform: rotate(90deg); 2294 | -ms-transform: rotate(90deg); 2295 | transform: rotate(90deg); 2296 | opacity: 0; 2297 | } 2298 | } 2299 | 2300 | .rotateOutDownLeft { 2301 | -webkit-animation-name: rotateOutDownLeft; 2302 | animation-name: rotateOutDownLeft; 2303 | } 2304 | 2305 | @-webkit-keyframes rotateOutDownRight { 2306 | 0% { 2307 | -webkit-transform-origin: right bottom; 2308 | transform-origin: right bottom; 2309 | -webkit-transform: rotate(0); 2310 | transform: rotate(0); 2311 | opacity: 1; 2312 | } 2313 | 2314 | 100% { 2315 | -webkit-transform-origin: right bottom; 2316 | transform-origin: right bottom; 2317 | -webkit-transform: rotate(-90deg); 2318 | transform: rotate(-90deg); 2319 | opacity: 0; 2320 | } 2321 | } 2322 | 2323 | @keyframes rotateOutDownRight { 2324 | 0% { 2325 | -webkit-transform-origin: right bottom; 2326 | -ms-transform-origin: right bottom; 2327 | transform-origin: right bottom; 2328 | -webkit-transform: rotate(0); 2329 | -ms-transform: rotate(0); 2330 | transform: rotate(0); 2331 | opacity: 1; 2332 | } 2333 | 2334 | 100% { 2335 | -webkit-transform-origin: right bottom; 2336 | -ms-transform-origin: right bottom; 2337 | transform-origin: right bottom; 2338 | -webkit-transform: rotate(-90deg); 2339 | -ms-transform: rotate(-90deg); 2340 | transform: rotate(-90deg); 2341 | opacity: 0; 2342 | } 2343 | } 2344 | 2345 | .rotateOutDownRight { 2346 | -webkit-animation-name: rotateOutDownRight; 2347 | animation-name: rotateOutDownRight; 2348 | } 2349 | 2350 | @-webkit-keyframes rotateOutUpLeft { 2351 | 0% { 2352 | -webkit-transform-origin: left bottom; 2353 | transform-origin: left bottom; 2354 | -webkit-transform: rotate(0); 2355 | transform: rotate(0); 2356 | opacity: 1; 2357 | } 2358 | 2359 | 100% { 2360 | -webkit-transform-origin: left bottom; 2361 | transform-origin: left bottom; 2362 | -webkit-transform: rotate(-90deg); 2363 | transform: rotate(-90deg); 2364 | opacity: 0; 2365 | } 2366 | } 2367 | 2368 | @keyframes rotateOutUpLeft { 2369 | 0% { 2370 | -webkit-transform-origin: left bottom; 2371 | -ms-transform-origin: left bottom; 2372 | transform-origin: left bottom; 2373 | -webkit-transform: rotate(0); 2374 | -ms-transform: rotate(0); 2375 | transform: rotate(0); 2376 | opacity: 1; 2377 | } 2378 | 2379 | 100% { 2380 | -webkit-transform-origin: left bottom; 2381 | -ms-transform-origin: left bottom; 2382 | transform-origin: left bottom; 2383 | -webkit-transform: rotate(-90deg); 2384 | -ms-transform: rotate(-90deg); 2385 | transform: rotate(-90deg); 2386 | opacity: 0; 2387 | } 2388 | } 2389 | 2390 | .rotateOutUpLeft { 2391 | -webkit-animation-name: rotateOutUpLeft; 2392 | animation-name: rotateOutUpLeft; 2393 | } 2394 | 2395 | @-webkit-keyframes rotateOutUpRight { 2396 | 0% { 2397 | -webkit-transform-origin: right bottom; 2398 | transform-origin: right bottom; 2399 | -webkit-transform: rotate(0); 2400 | transform: rotate(0); 2401 | opacity: 1; 2402 | } 2403 | 2404 | 100% { 2405 | -webkit-transform-origin: right bottom; 2406 | transform-origin: right bottom; 2407 | -webkit-transform: rotate(90deg); 2408 | transform: rotate(90deg); 2409 | opacity: 0; 2410 | } 2411 | } 2412 | 2413 | @keyframes rotateOutUpRight { 2414 | 0% { 2415 | -webkit-transform-origin: right bottom; 2416 | -ms-transform-origin: right bottom; 2417 | transform-origin: right bottom; 2418 | -webkit-transform: rotate(0); 2419 | -ms-transform: rotate(0); 2420 | transform: rotate(0); 2421 | opacity: 1; 2422 | } 2423 | 2424 | 100% { 2425 | -webkit-transform-origin: right bottom; 2426 | -ms-transform-origin: right bottom; 2427 | transform-origin: right bottom; 2428 | -webkit-transform: rotate(90deg); 2429 | -ms-transform: rotate(90deg); 2430 | transform: rotate(90deg); 2431 | opacity: 0; 2432 | } 2433 | } 2434 | 2435 | .rotateOutUpRight { 2436 | -webkit-animation-name: rotateOutUpRight; 2437 | animation-name: rotateOutUpRight; 2438 | } 2439 | 2440 | @-webkit-keyframes slideInDown { 2441 | 0% { 2442 | opacity: 0; 2443 | -webkit-transform: translateY(-2000px); 2444 | transform: translateY(-2000px); 2445 | } 2446 | 2447 | 100% { 2448 | -webkit-transform: translateY(0); 2449 | transform: translateY(0); 2450 | } 2451 | } 2452 | 2453 | @keyframes slideInDown { 2454 | 0% { 2455 | opacity: 0; 2456 | -webkit-transform: translateY(-2000px); 2457 | -ms-transform: translateY(-2000px); 2458 | transform: translateY(-2000px); 2459 | } 2460 | 2461 | 100% { 2462 | -webkit-transform: translateY(0); 2463 | -ms-transform: translateY(0); 2464 | transform: translateY(0); 2465 | } 2466 | } 2467 | 2468 | .slideInDown { 2469 | -webkit-animation-name: slideInDown; 2470 | animation-name: slideInDown; 2471 | } 2472 | 2473 | @-webkit-keyframes slideInLeft { 2474 | 0% { 2475 | opacity: 0; 2476 | -webkit-transform: translateX(-2000px); 2477 | transform: translateX(-2000px); 2478 | } 2479 | 2480 | 100% { 2481 | -webkit-transform: translateX(0); 2482 | transform: translateX(0); 2483 | } 2484 | } 2485 | 2486 | @keyframes slideInLeft { 2487 | 0% { 2488 | opacity: 0; 2489 | -webkit-transform: translateX(-2000px); 2490 | -ms-transform: translateX(-2000px); 2491 | transform: translateX(-2000px); 2492 | } 2493 | 2494 | 100% { 2495 | -webkit-transform: translateX(0); 2496 | -ms-transform: translateX(0); 2497 | transform: translateX(0); 2498 | } 2499 | } 2500 | 2501 | .slideInLeft { 2502 | -webkit-animation-name: slideInLeft; 2503 | animation-name: slideInLeft; 2504 | } 2505 | 2506 | @-webkit-keyframes slideInRight { 2507 | 0% { 2508 | opacity: 0; 2509 | -webkit-transform: translateX(2000px); 2510 | transform: translateX(2000px); 2511 | } 2512 | 2513 | 100% { 2514 | -webkit-transform: translateX(0); 2515 | transform: translateX(0); 2516 | } 2517 | } 2518 | 2519 | @keyframes slideInRight { 2520 | 0% { 2521 | opacity: 0; 2522 | -webkit-transform: translateX(2000px); 2523 | -ms-transform: translateX(2000px); 2524 | transform: translateX(2000px); 2525 | } 2526 | 2527 | 100% { 2528 | -webkit-transform: translateX(0); 2529 | -ms-transform: translateX(0); 2530 | transform: translateX(0); 2531 | } 2532 | } 2533 | 2534 | .slideInRight { 2535 | -webkit-animation-name: slideInRight; 2536 | animation-name: slideInRight; 2537 | } 2538 | 2539 | @-webkit-keyframes slideOutLeft { 2540 | 0% { 2541 | -webkit-transform: translateX(0); 2542 | transform: translateX(0); 2543 | } 2544 | 2545 | 100% { 2546 | opacity: 0; 2547 | -webkit-transform: translateX(-2000px); 2548 | transform: translateX(-2000px); 2549 | } 2550 | } 2551 | 2552 | @keyframes slideOutLeft { 2553 | 0% { 2554 | -webkit-transform: translateX(0); 2555 | -ms-transform: translateX(0); 2556 | transform: translateX(0); 2557 | } 2558 | 2559 | 100% { 2560 | opacity: 0; 2561 | -webkit-transform: translateX(-2000px); 2562 | -ms-transform: translateX(-2000px); 2563 | transform: translateX(-2000px); 2564 | } 2565 | } 2566 | 2567 | .slideOutLeft { 2568 | -webkit-animation-name: slideOutLeft; 2569 | animation-name: slideOutLeft; 2570 | } 2571 | 2572 | @-webkit-keyframes slideOutRight { 2573 | 0% { 2574 | -webkit-transform: translateX(0); 2575 | transform: translateX(0); 2576 | } 2577 | 2578 | 100% { 2579 | opacity: 0; 2580 | -webkit-transform: translateX(2000px); 2581 | transform: translateX(2000px); 2582 | } 2583 | } 2584 | 2585 | @keyframes slideOutRight { 2586 | 0% { 2587 | -webkit-transform: translateX(0); 2588 | -ms-transform: translateX(0); 2589 | transform: translateX(0); 2590 | } 2591 | 2592 | 100% { 2593 | opacity: 0; 2594 | -webkit-transform: translateX(2000px); 2595 | -ms-transform: translateX(2000px); 2596 | transform: translateX(2000px); 2597 | } 2598 | } 2599 | 2600 | .slideOutRight { 2601 | -webkit-animation-name: slideOutRight; 2602 | animation-name: slideOutRight; 2603 | } 2604 | 2605 | @-webkit-keyframes slideOutUp { 2606 | 0% { 2607 | -webkit-transform: translateY(0); 2608 | transform: translateY(0); 2609 | } 2610 | 2611 | 100% { 2612 | opacity: 0; 2613 | -webkit-transform: translateY(-2000px); 2614 | transform: translateY(-2000px); 2615 | } 2616 | } 2617 | 2618 | @keyframes slideOutUp { 2619 | 0% { 2620 | -webkit-transform: translateY(0); 2621 | -ms-transform: translateY(0); 2622 | transform: translateY(0); 2623 | } 2624 | 2625 | 100% { 2626 | opacity: 0; 2627 | -webkit-transform: translateY(-2000px); 2628 | -ms-transform: translateY(-2000px); 2629 | transform: translateY(-2000px); 2630 | } 2631 | } 2632 | 2633 | .slideOutUp { 2634 | -webkit-animation-name: slideOutUp; 2635 | animation-name: slideOutUp; 2636 | } 2637 | 2638 | @-webkit-keyframes slideInUp { 2639 | 0% { 2640 | opacity: 0; 2641 | -webkit-transform: translateY(2000px); 2642 | transform: translateY(2000px); 2643 | } 2644 | 2645 | 100% { 2646 | opacity: 1; 2647 | -webkit-transform: translateY(0); 2648 | transform: translateY(0); 2649 | } 2650 | } 2651 | 2652 | @keyframes slideInUp { 2653 | 0% { 2654 | opacity: 0; 2655 | -webkit-transform: translateY(2000px); 2656 | -ms-transform: translateY(2000px); 2657 | transform: translateY(2000px); 2658 | } 2659 | 2660 | 100% { 2661 | opacity: 1; 2662 | -webkit-transform: translateY(0); 2663 | -ms-transform: translateY(0); 2664 | transform: translateY(0); 2665 | } 2666 | } 2667 | 2668 | .slideInUp { 2669 | -webkit-animation-name: slideInUp; 2670 | animation-name: slideInUp; 2671 | } 2672 | 2673 | @-webkit-keyframes slideOutDown { 2674 | 0% { 2675 | -webkit-transform: translateY(0); 2676 | transform: translateY(0); 2677 | } 2678 | 2679 | 100% { 2680 | opacity: 0; 2681 | -webkit-transform: translateY(2000px); 2682 | transform: translateY(2000px); 2683 | } 2684 | } 2685 | 2686 | @keyframes slideOutDown { 2687 | 0% { 2688 | -webkit-transform: translateY(0); 2689 | -ms-transform: translateY(0); 2690 | transform: translateY(0); 2691 | } 2692 | 2693 | 100% { 2694 | opacity: 0; 2695 | -webkit-transform: translateY(2000px); 2696 | -ms-transform: translateY(2000px); 2697 | transform: translateY(2000px); 2698 | } 2699 | } 2700 | 2701 | .slideOutDown { 2702 | -webkit-animation-name: slideOutDown; 2703 | animation-name: slideOutDown; 2704 | } 2705 | 2706 | @-webkit-keyframes hinge { 2707 | 0% { 2708 | -webkit-transform: rotate(0); 2709 | transform: rotate(0); 2710 | -webkit-transform-origin: top left; 2711 | transform-origin: top left; 2712 | -webkit-animation-timing-function: ease-in-out; 2713 | animation-timing-function: ease-in-out; 2714 | } 2715 | 2716 | 20%, 60% { 2717 | -webkit-transform: rotate(80deg); 2718 | transform: rotate(80deg); 2719 | -webkit-transform-origin: top left; 2720 | transform-origin: top left; 2721 | -webkit-animation-timing-function: ease-in-out; 2722 | animation-timing-function: ease-in-out; 2723 | } 2724 | 2725 | 40% { 2726 | -webkit-transform: rotate(60deg); 2727 | transform: rotate(60deg); 2728 | -webkit-transform-origin: top left; 2729 | transform-origin: top left; 2730 | -webkit-animation-timing-function: ease-in-out; 2731 | animation-timing-function: ease-in-out; 2732 | } 2733 | 2734 | 80% { 2735 | -webkit-transform: rotate(60deg) translateY(0); 2736 | transform: rotate(60deg) translateY(0); 2737 | -webkit-transform-origin: top left; 2738 | transform-origin: top left; 2739 | -webkit-animation-timing-function: ease-in-out; 2740 | animation-timing-function: ease-in-out; 2741 | opacity: 1; 2742 | } 2743 | 2744 | 100% { 2745 | -webkit-transform: translateY(700px); 2746 | transform: translateY(700px); 2747 | opacity: 0; 2748 | } 2749 | } 2750 | 2751 | @keyframes hinge { 2752 | 0% { 2753 | -webkit-transform: rotate(0); 2754 | -ms-transform: rotate(0); 2755 | transform: rotate(0); 2756 | -webkit-transform-origin: top left; 2757 | -ms-transform-origin: top left; 2758 | transform-origin: top left; 2759 | -webkit-animation-timing-function: ease-in-out; 2760 | animation-timing-function: ease-in-out; 2761 | } 2762 | 2763 | 20%, 60% { 2764 | -webkit-transform: rotate(80deg); 2765 | -ms-transform: rotate(80deg); 2766 | transform: rotate(80deg); 2767 | -webkit-transform-origin: top left; 2768 | -ms-transform-origin: top left; 2769 | transform-origin: top left; 2770 | -webkit-animation-timing-function: ease-in-out; 2771 | animation-timing-function: ease-in-out; 2772 | } 2773 | 2774 | 40% { 2775 | -webkit-transform: rotate(60deg); 2776 | -ms-transform: rotate(60deg); 2777 | transform: rotate(60deg); 2778 | -webkit-transform-origin: top left; 2779 | -ms-transform-origin: top left; 2780 | transform-origin: top left; 2781 | -webkit-animation-timing-function: ease-in-out; 2782 | animation-timing-function: ease-in-out; 2783 | } 2784 | 2785 | 80% { 2786 | -webkit-transform: rotate(60deg) translateY(0); 2787 | -ms-transform: rotate(60deg) translateY(0); 2788 | transform: rotate(60deg) translateY(0); 2789 | -webkit-transform-origin: top left; 2790 | -ms-transform-origin: top left; 2791 | transform-origin: top left; 2792 | -webkit-animation-timing-function: ease-in-out; 2793 | animation-timing-function: ease-in-out; 2794 | opacity: 1; 2795 | } 2796 | 2797 | 100% { 2798 | -webkit-transform: translateY(700px); 2799 | -ms-transform: translateY(700px); 2800 | transform: translateY(700px); 2801 | opacity: 0; 2802 | } 2803 | } 2804 | 2805 | .hinge { 2806 | -webkit-animation-name: hinge; 2807 | animation-name: hinge; 2808 | } 2809 | 2810 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2811 | 2812 | @-webkit-keyframes rollIn { 2813 | 0% { 2814 | opacity: 0; 2815 | -webkit-transform: translateX(-100%) rotate(-120deg); 2816 | transform: translateX(-100%) rotate(-120deg); 2817 | } 2818 | 2819 | 100% { 2820 | opacity: 1; 2821 | -webkit-transform: translateX(0px) rotate(0deg); 2822 | transform: translateX(0px) rotate(0deg); 2823 | } 2824 | } 2825 | 2826 | @keyframes rollIn { 2827 | 0% { 2828 | opacity: 0; 2829 | -webkit-transform: translateX(-100%) rotate(-120deg); 2830 | -ms-transform: translateX(-100%) rotate(-120deg); 2831 | transform: translateX(-100%) rotate(-120deg); 2832 | } 2833 | 2834 | 100% { 2835 | opacity: 1; 2836 | -webkit-transform: translateX(0px) rotate(0deg); 2837 | -ms-transform: translateX(0px) rotate(0deg); 2838 | transform: translateX(0px) rotate(0deg); 2839 | } 2840 | } 2841 | 2842 | .rollIn { 2843 | -webkit-animation-name: rollIn; 2844 | animation-name: rollIn; 2845 | } 2846 | 2847 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2848 | 2849 | @-webkit-keyframes rollOut { 2850 | 0% { 2851 | opacity: 1; 2852 | -webkit-transform: translateX(0px) rotate(0deg); 2853 | transform: translateX(0px) rotate(0deg); 2854 | } 2855 | 2856 | 100% { 2857 | opacity: 0; 2858 | -webkit-transform: translateX(100%) rotate(120deg); 2859 | transform: translateX(100%) rotate(120deg); 2860 | } 2861 | } 2862 | 2863 | @keyframes rollOut { 2864 | 0% { 2865 | opacity: 1; 2866 | -webkit-transform: translateX(0px) rotate(0deg); 2867 | -ms-transform: translateX(0px) rotate(0deg); 2868 | transform: translateX(0px) rotate(0deg); 2869 | } 2870 | 2871 | 100% { 2872 | opacity: 0; 2873 | -webkit-transform: translateX(100%) rotate(120deg); 2874 | -ms-transform: translateX(100%) rotate(120deg); 2875 | transform: translateX(100%) rotate(120deg); 2876 | } 2877 | } 2878 | 2879 | .rollOut { 2880 | -webkit-animation-name: rollOut; 2881 | animation-name: rollOut; 2882 | } 2883 | 2884 | @-webkit-keyframes zoomIn { 2885 | 0% { 2886 | opacity: 0; 2887 | -webkit-transform: scale(.3); 2888 | transform: scale(.3); 2889 | } 2890 | 2891 | 50% { 2892 | opacity: 1; 2893 | } 2894 | } 2895 | 2896 | @keyframes zoomIn { 2897 | 0% { 2898 | opacity: 0; 2899 | -webkit-transform: scale(.3); 2900 | -ms-transform: scale(.3); 2901 | transform: scale(.3); 2902 | } 2903 | 2904 | 50% { 2905 | opacity: 1; 2906 | } 2907 | } 2908 | 2909 | .zoomIn { 2910 | -webkit-animation-name: zoomIn; 2911 | animation-name: zoomIn; 2912 | } 2913 | 2914 | @-webkit-keyframes zoomInDown { 2915 | 0% { 2916 | opacity: 0; 2917 | -webkit-transform: scale(.1) translateY(-2000px); 2918 | transform: scale(.1) translateY(-2000px); 2919 | -webkit-animation-timing-function: ease-in-out; 2920 | animation-timing-function: ease-in-out; 2921 | } 2922 | 2923 | 60% { 2924 | opacity: 1; 2925 | -webkit-transform: scale(.475) translateY(60px); 2926 | transform: scale(.475) translateY(60px); 2927 | -webkit-animation-timing-function: ease-out; 2928 | animation-timing-function: ease-out; 2929 | } 2930 | } 2931 | 2932 | @keyframes zoomInDown { 2933 | 0% { 2934 | opacity: 0; 2935 | -webkit-transform: scale(.1) translateY(-2000px); 2936 | -ms-transform: scale(.1) translateY(-2000px); 2937 | transform: scale(.1) translateY(-2000px); 2938 | -webkit-animation-timing-function: ease-in-out; 2939 | animation-timing-function: ease-in-out; 2940 | } 2941 | 2942 | 60% { 2943 | opacity: 1; 2944 | -webkit-transform: scale(.475) translateY(60px); 2945 | -ms-transform: scale(.475) translateY(60px); 2946 | transform: scale(.475) translateY(60px); 2947 | -webkit-animation-timing-function: ease-out; 2948 | animation-timing-function: ease-out; 2949 | } 2950 | } 2951 | 2952 | .zoomInDown { 2953 | -webkit-animation-name: zoomInDown; 2954 | animation-name: zoomInDown; 2955 | } 2956 | 2957 | @-webkit-keyframes zoomInLeft { 2958 | 0% { 2959 | opacity: 0; 2960 | -webkit-transform: scale(.1) translateX(-2000px); 2961 | transform: scale(.1) translateX(-2000px); 2962 | -webkit-animation-timing-function: ease-in-out; 2963 | animation-timing-function: ease-in-out; 2964 | } 2965 | 2966 | 60% { 2967 | opacity: 1; 2968 | -webkit-transform: scale(.475) translateX(48px); 2969 | transform: scale(.475) translateX(48px); 2970 | -webkit-animation-timing-function: ease-out; 2971 | animation-timing-function: ease-out; 2972 | } 2973 | } 2974 | 2975 | @keyframes zoomInLeft { 2976 | 0% { 2977 | opacity: 0; 2978 | -webkit-transform: scale(.1) translateX(-2000px); 2979 | -ms-transform: scale(.1) translateX(-2000px); 2980 | transform: scale(.1) translateX(-2000px); 2981 | -webkit-animation-timing-function: ease-in-out; 2982 | animation-timing-function: ease-in-out; 2983 | } 2984 | 2985 | 60% { 2986 | opacity: 1; 2987 | -webkit-transform: scale(.475) translateX(48px); 2988 | -ms-transform: scale(.475) translateX(48px); 2989 | transform: scale(.475) translateX(48px); 2990 | -webkit-animation-timing-function: ease-out; 2991 | animation-timing-function: ease-out; 2992 | } 2993 | } 2994 | 2995 | .zoomInLeft { 2996 | -webkit-animation-name: zoomInLeft; 2997 | animation-name: zoomInLeft; 2998 | } 2999 | 3000 | @-webkit-keyframes zoomInRight { 3001 | 0% { 3002 | opacity: 0; 3003 | -webkit-transform: scale(.1) translateX(2000px); 3004 | transform: scale(.1) translateX(2000px); 3005 | -webkit-animation-timing-function: ease-in-out; 3006 | animation-timing-function: ease-in-out; 3007 | } 3008 | 3009 | 60% { 3010 | opacity: 1; 3011 | -webkit-transform: scale(.475) translateX(-48px); 3012 | transform: scale(.475) translateX(-48px); 3013 | -webkit-animation-timing-function: ease-out; 3014 | animation-timing-function: ease-out; 3015 | } 3016 | } 3017 | 3018 | @keyframes zoomInRight { 3019 | 0% { 3020 | opacity: 0; 3021 | -webkit-transform: scale(.1) translateX(2000px); 3022 | -ms-transform: scale(.1) translateX(2000px); 3023 | transform: scale(.1) translateX(2000px); 3024 | -webkit-animation-timing-function: ease-in-out; 3025 | animation-timing-function: ease-in-out; 3026 | } 3027 | 3028 | 60% { 3029 | opacity: 1; 3030 | -webkit-transform: scale(.475) translateX(-48px); 3031 | -ms-transform: scale(.475) translateX(-48px); 3032 | transform: scale(.475) translateX(-48px); 3033 | -webkit-animation-timing-function: ease-out; 3034 | animation-timing-function: ease-out; 3035 | } 3036 | } 3037 | 3038 | .zoomInRight { 3039 | -webkit-animation-name: zoomInRight; 3040 | animation-name: zoomInRight; 3041 | } 3042 | 3043 | @-webkit-keyframes zoomInUp { 3044 | 0% { 3045 | opacity: 0; 3046 | -webkit-transform: scale(.1) translateY(2000px); 3047 | transform: scale(.1) translateY(2000px); 3048 | -webkit-animation-timing-function: ease-in-out; 3049 | animation-timing-function: ease-in-out; 3050 | } 3051 | 3052 | 60% { 3053 | opacity: 1; 3054 | -webkit-transform: scale(.475) translateY(-60px); 3055 | transform: scale(.475) translateY(-60px); 3056 | -webkit-animation-timing-function: ease-out; 3057 | animation-timing-function: ease-out; 3058 | } 3059 | } 3060 | 3061 | @keyframes zoomInUp { 3062 | 0% { 3063 | opacity: 0; 3064 | -webkit-transform: scale(.1) translateY(2000px); 3065 | -ms-transform: scale(.1) translateY(2000px); 3066 | transform: scale(.1) translateY(2000px); 3067 | -webkit-animation-timing-function: ease-in-out; 3068 | animation-timing-function: ease-in-out; 3069 | } 3070 | 3071 | 60% { 3072 | opacity: 1; 3073 | -webkit-transform: scale(.475) translateY(-60px); 3074 | -ms-transform: scale(.475) translateY(-60px); 3075 | transform: scale(.475) translateY(-60px); 3076 | -webkit-animation-timing-function: ease-out; 3077 | animation-timing-function: ease-out; 3078 | } 3079 | } 3080 | 3081 | .zoomInUp { 3082 | -webkit-animation-name: zoomInUp; 3083 | animation-name: zoomInUp; 3084 | } 3085 | 3086 | @-webkit-keyframes zoomOut { 3087 | 0% { 3088 | opacity: 1; 3089 | -webkit-transform: scale(1); 3090 | transform: scale(1); 3091 | } 3092 | 3093 | 50% { 3094 | opacity: 0; 3095 | -webkit-transform: scale(.3); 3096 | transform: scale(.3); 3097 | } 3098 | 3099 | 100% { 3100 | opacity: 0; 3101 | } 3102 | } 3103 | 3104 | @keyframes zoomOut { 3105 | 0% { 3106 | opacity: 1; 3107 | -webkit-transform: scale(1); 3108 | -ms-transform: scale(1); 3109 | transform: scale(1); 3110 | } 3111 | 3112 | 50% { 3113 | opacity: 0; 3114 | -webkit-transform: scale(.3); 3115 | -ms-transform: scale(.3); 3116 | transform: scale(.3); 3117 | } 3118 | 3119 | 100% { 3120 | opacity: 0; 3121 | } 3122 | } 3123 | 3124 | .zoomOut { 3125 | -webkit-animation-name: zoomOut; 3126 | animation-name: zoomOut; 3127 | } 3128 | 3129 | @-webkit-keyframes zoomOutDown { 3130 | 40% { 3131 | opacity: 1; 3132 | -webkit-transform: scale(.475) translateY(-60px); 3133 | transform: scale(.475) translateY(-60px); 3134 | -webkit-animation-timing-function: linear; 3135 | animation-timing-function: linear; 3136 | } 3137 | 3138 | 100% { 3139 | opacity: 0; 3140 | -webkit-transform: scale(.1) translateY(2000px); 3141 | transform: scale(.1) translateY(2000px); 3142 | -webkit-transform-origin: center bottom; 3143 | transform-origin: center bottom; 3144 | } 3145 | } 3146 | 3147 | @keyframes zoomOutDown { 3148 | 40% { 3149 | opacity: 1; 3150 | -webkit-transform: scale(.475) translateY(-60px); 3151 | -ms-transform: scale(.475) translateY(-60px); 3152 | transform: scale(.475) translateY(-60px); 3153 | -webkit-animation-timing-function: linear; 3154 | animation-timing-function: linear; 3155 | } 3156 | 3157 | 100% { 3158 | opacity: 0; 3159 | -webkit-transform: scale(.1) translateY(2000px); 3160 | -ms-transform: scale(.1) translateY(2000px); 3161 | transform: scale(.1) translateY(2000px); 3162 | -webkit-transform-origin: center bottom; 3163 | -ms-transform-origin: center bottom; 3164 | transform-origin: center bottom; 3165 | } 3166 | } 3167 | 3168 | .zoomOutDown { 3169 | -webkit-animation-name: zoomOutDown; 3170 | animation-name: zoomOutDown; 3171 | } 3172 | 3173 | @-webkit-keyframes zoomOutLeft { 3174 | 40% { 3175 | opacity: 1; 3176 | -webkit-transform: scale(.475) translateX(42px); 3177 | transform: scale(.475) translateX(42px); 3178 | -webkit-animation-timing-function: linear; 3179 | animation-timing-function: linear; 3180 | } 3181 | 3182 | 100% { 3183 | opacity: 0; 3184 | -webkit-transform: scale(.1) translateX(-2000px); 3185 | transform: scale(.1) translateX(-2000px); 3186 | -webkit-transform-origin: left center; 3187 | transform-origin: left center; 3188 | } 3189 | } 3190 | 3191 | @keyframes zoomOutLeft { 3192 | 40% { 3193 | opacity: 1; 3194 | -webkit-transform: scale(.475) translateX(42px); 3195 | -ms-transform: scale(.475) translateX(42px); 3196 | transform: scale(.475) translateX(42px); 3197 | -webkit-animation-timing-function: linear; 3198 | animation-timing-function: linear; 3199 | } 3200 | 3201 | 100% { 3202 | opacity: 0; 3203 | -webkit-transform: scale(.1) translateX(-2000px); 3204 | -ms-transform: scale(.1) translateX(-2000px); 3205 | transform: scale(.1) translateX(-2000px); 3206 | -webkit-transform-origin: left center; 3207 | -ms-transform-origin: left center; 3208 | transform-origin: left center; 3209 | } 3210 | } 3211 | 3212 | .zoomOutLeft { 3213 | -webkit-animation-name: zoomOutLeft; 3214 | animation-name: zoomOutLeft; 3215 | } 3216 | 3217 | @-webkit-keyframes zoomOutRight { 3218 | 40% { 3219 | opacity: 1; 3220 | -webkit-transform: scale(.475) translateX(-42px); 3221 | transform: scale(.475) translateX(-42px); 3222 | -webkit-animation-timing-function: linear; 3223 | animation-timing-function: linear; 3224 | } 3225 | 3226 | 100% { 3227 | opacity: 0; 3228 | -webkit-transform: scale(.1) translateX(2000px); 3229 | transform: scale(.1) translateX(2000px); 3230 | -webkit-transform-origin: right center; 3231 | transform-origin: right center; 3232 | } 3233 | } 3234 | 3235 | @keyframes zoomOutRight { 3236 | 40% { 3237 | opacity: 1; 3238 | -webkit-transform: scale(.475) translateX(-42px); 3239 | -ms-transform: scale(.475) translateX(-42px); 3240 | transform: scale(.475) translateX(-42px); 3241 | -webkit-animation-timing-function: linear; 3242 | animation-timing-function: linear; 3243 | } 3244 | 3245 | 100% { 3246 | opacity: 0; 3247 | -webkit-transform: scale(.1) translateX(2000px); 3248 | -ms-transform: scale(.1) translateX(2000px); 3249 | transform: scale(.1) translateX(2000px); 3250 | -webkit-transform-origin: right center; 3251 | -ms-transform-origin: right center; 3252 | transform-origin: right center; 3253 | } 3254 | } 3255 | 3256 | .zoomOutRight { 3257 | -webkit-animation-name: zoomOutRight; 3258 | animation-name: zoomOutRight; 3259 | } 3260 | 3261 | @-webkit-keyframes zoomOutUp { 3262 | 40% { 3263 | opacity: 1; 3264 | -webkit-transform: scale(.475) translateY(60px); 3265 | transform: scale(.475) translateY(60px); 3266 | -webkit-animation-timing-function: linear; 3267 | animation-timing-function: linear; 3268 | } 3269 | 3270 | 100% { 3271 | opacity: 0; 3272 | -webkit-transform: scale(.1) translateY(-2000px); 3273 | transform: scale(.1) translateY(-2000px); 3274 | -webkit-transform-origin: center top; 3275 | transform-origin: center top; 3276 | } 3277 | } 3278 | 3279 | @keyframes zoomOutUp { 3280 | 40% { 3281 | opacity: 1; 3282 | -webkit-transform: scale(.475) translateY(60px); 3283 | -ms-transform: scale(.475) translateY(60px); 3284 | transform: scale(.475) translateY(60px); 3285 | -webkit-animation-timing-function: linear; 3286 | animation-timing-function: linear; 3287 | } 3288 | 3289 | 100% { 3290 | opacity: 0; 3291 | -webkit-transform: scale(.1) translateY(-2000px); 3292 | -ms-transform: scale(.1) translateY(-2000px); 3293 | transform: scale(.1) translateY(-2000px); 3294 | -webkit-transform-origin: center top; 3295 | -ms-transform-origin: center top; 3296 | transform-origin: center top; 3297 | } 3298 | } 3299 | 3300 | .zoomOutUp { 3301 | -webkit-animation-name: zoomOutUp; 3302 | animation-name: zoomOutUp; 3303 | } --------------------------------------------------------------------------------