├── .gitignore ├── 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 │ ├── shake.css │ ├── pulse.css │ ├── swing.css │ ├── tada.css │ ├── rubberBand.css │ ├── bounce.css │ └── wobble.css ├── zooming_entrances │ ├── zoomIn.css │ ├── zoomInUp.css │ ├── zoomInDown.css │ ├── zoomInLeft.css │ └── zoomInRight.css ├── sliding_entrances │ ├── slideInUp.css │ ├── slideInDown.css │ ├── slideInLeft.css │ └── slideInRight.css ├── sliding_exits │ ├── slideOutUp.css │ ├── slideOutDown.css │ ├── slideOutLeft.css │ └── slideOutRight.css ├── zooming_exits │ ├── zoomOut.css │ ├── zoomOutLeft.css │ ├── zoomOutRight.css │ ├── zoomOutUp.css │ └── zoomOutDown.css ├── bouncing_exits │ ├── bounceOutLeft.css │ ├── bounceOutRight.css │ ├── bounceOutUp.css │ ├── bounceOutDown.css │ └── bounceOut.css ├── lightspeed │ ├── lightSpeedOut.css │ └── lightSpeedIn.css ├── rotating_exits │ ├── rotateOut.css │ ├── rotateOutUpLeft.css │ ├── rotateOutDownLeft.css │ ├── rotateOutUpRight.css │ └── rotateOutDownRight.css ├── rotating_entrances │ ├── rotateIn.css │ ├── rotateInUpLeft.css │ ├── rotateInDownLeft.css │ ├── rotateInUpRight.css │ └── rotateInDownRight.css ├── specials │ ├── rollOut.css │ ├── rollIn.css │ └── hinge.css ├── _base.css ├── flippers │ ├── flipOutX.css │ ├── flipOutY.css │ ├── flipInX.css │ ├── flipInY.css │ └── flip.css └── bouncing_entrances │ ├── bounceInDown.css │ ├── bounceInLeft.css │ ├── bounceInRight.css │ ├── bounceInUp.css │ └── bounceIn.css ├── .editorconfig ├── bower.json ├── 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 | test/ 5 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.2.3", 4 | "main": "./animate.css", 5 | "ignore": [ 6 | ".*", 7 | "src", 8 | "*.yml", 9 | "Gemfile", 10 | "Gemfile.lock", 11 | "*.md" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomIn.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomIn { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.3, .3, .3); 5 | } 6 | 7 | 50% { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | .zoomIn { 13 | animation-name: zoomIn; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUp { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(0, -100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutUp { 13 | animation-name: fadeOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDown { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(0, 100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutDown { 13 | animation-name: fadeOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeft { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(-100%, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutLeft { 13 | animation-name: fadeOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRight { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(100%, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutRight { 13 | animation-name: fadeOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUpBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(0, -2000px, 0); 9 | } 10 | } 11 | 12 | .fadeOutUpBig { 13 | animation-name: fadeOutUpBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDownBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(0, 2000px, 0); 9 | } 10 | } 11 | 12 | .fadeOutDownBig { 13 | animation-name: fadeOutDownBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInUp { 2 | 0% { 3 | transform: translateY(100%); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translateY(0); 9 | } 10 | } 11 | 12 | .slideInUp { 13 | animation-name: slideInUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutUp { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translateY(-100%); 9 | } 10 | } 11 | 12 | .slideOutUp { 13 | animation-name: slideOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(0, 100%, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInUp { 14 | animation-name: fadeInUp; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeftBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(-2000px, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutLeftBig { 13 | animation-name: fadeOutLeftBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRightBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translate3d(2000px, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutRightBig { 13 | animation-name: fadeOutRightBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInDown { 2 | 0% { 3 | transform: translateY(-100%); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translateY(0); 9 | } 10 | } 11 | 12 | .slideInDown { 13 | animation-name: slideInDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInLeft { 2 | 0% { 3 | transform: translateX(-100%); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translateX(0); 9 | } 10 | } 11 | 12 | .slideInLeft { 13 | animation-name: slideInLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutDown { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translateY(100%); 9 | } 10 | } 11 | 12 | .slideOutDown { 13 | animation-name: slideOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutLeft { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translateX(-100%); 9 | } 10 | } 11 | 12 | .slideOutLeft { 13 | animation-name: slideOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutRight { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translateX(100%); 9 | } 10 | } 11 | 12 | .slideOutRight { 13 | animation-name: slideOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDown { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(0, -100%, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 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: translate3d(-100%, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInLeft { 14 | animation-name: fadeInLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInRight { 2 | 0% { 3 | transform: translateX(100%); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translateX(0); 9 | } 10 | } 11 | 12 | .slideInRight { 13 | animation-name: slideInRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRight { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(100%, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 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: translate3d(0, 2000px, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInUpBig { 14 | animation-name: fadeInUpBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOut.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOut { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 50% { 7 | opacity: 0; 8 | transform: scale3d(.3, .3, .3); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | } 14 | } 15 | 16 | .zoomOut { 17 | animation-name: zoomOut; 18 | } 19 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDownBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(0, -2000px, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 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: translate3d(-2000px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInLeftBig { 14 | animation-name: fadeInLeftBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRightBig { 2 | 0% { 3 | opacity: 0; 4 | transform: translate3d(2000px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInRightBig { 14 | animation-name: fadeInRightBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutLeft { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(20px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translate3d(-2000px, 0, 0); 10 | } 11 | } 12 | 13 | .bounceOutLeft { 14 | animation-name: bounceOutLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutRight { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(-20px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translate3d(2000px, 0, 0); 10 | } 11 | } 12 | 13 | .bounceOutRight { 14 | animation-name: bounceOutRight; 15 | } 16 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedOut.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedOut { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | transform: translate3d(100%, 0, 0) skewX(30deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .lightSpeedOut { 13 | animation-name: lightSpeedOut; 14 | animation-timing-function: ease-in; 15 | } 16 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOut.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOut { 2 | 0% { 3 | transform-origin: center; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: center; 9 | transform: rotate3d(0, 0, 1, 200deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOut { 15 | animation-name: rotateOut; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateIn.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateIn { 2 | 0% { 3 | transform-origin: center; 4 | transform: rotate3d(0, 0, 1, -200deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: center; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateIn { 16 | animation-name: rotateIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/shake.css: -------------------------------------------------------------------------------- 1 | @keyframes shake { 2 | 0%, 100% { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | 10%, 30%, 50%, 70%, 90% { 7 | transform: translate3d(-10px, 0, 0); 8 | } 9 | 10 | 20%, 40%, 60%, 80% { 11 | transform: translate3d(10px, 0, 0); 12 | } 13 | } 14 | 15 | .shake { 16 | animation-name: shake; 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 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 11 | } 12 | } 13 | 14 | .rollOut { 15 | animation-name: rollOut; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: left bottom; 9 | transform: rotate3d(0, 0, 1, -45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutUpLeft { 15 | animation-name: rotateOutUpLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: left bottom; 9 | transform: rotate3d(0, 0, 1, 45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutDownLeft { 15 | animation-name: rotateOutDownLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: right bottom; 9 | transform: rotate3d(0, 0, 1, 90deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutUpRight { 15 | animation-name: rotateOutUpRight; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: right bottom; 9 | transform: rotate3d(0, 0, 1, -45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutDownRight { 15 | animation-name: rotateOutDownRight; 16 | } 17 | -------------------------------------------------------------------------------- /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: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 7 | } 8 | 9 | 100% { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } 14 | 15 | .rollIn { 16 | animation-name: rollIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpLeft { 16 | animation-name: rotateInUpLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutLeft { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: scale(.1) translate3d(-2000px, 0, 0); 10 | transform-origin: left center; 11 | } 12 | } 13 | 14 | .zoomOutLeft { 15 | animation-name: zoomOutLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutUp { 2 | 20% { 3 | transform: translate3d(0, -10px, 0); 4 | } 5 | 6 | 40%, 45% { 7 | opacity: 1; 8 | transform: translate3d(0, 20px, 0); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translate3d(0, -2000px, 0); 14 | } 15 | } 16 | 17 | .bounceOutUp { 18 | animation-name: bounceOutUp; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, -45deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: none; 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: rotate3d(0, 0, 1, -90deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpRight { 16 | animation-name: rotateInUpRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutRight { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: scale(.1) translate3d(2000px, 0, 0); 10 | transform-origin: right center; 11 | } 12 | } 13 | 14 | .zoomOutRight { 15 | animation-name: zoomOutRight; 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: scale3d(1, 1, 1); 6 | } 7 | 8 | 50% { 9 | transform: scale3d(1.05, 1.05, 1.05); 10 | } 11 | 12 | 100% { 13 | transform: scale3d(1, 1, 1); 14 | } 15 | } 16 | 17 | .pulse { 18 | animation-name: pulse; 19 | } 20 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutDown { 2 | 20% { 3 | transform: translate3d(0, 10px, 0); 4 | } 5 | 6 | 40%, 45% { 7 | opacity: 1; 8 | transform: translate3d(0, -20px, 0); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translate3d(0, 2000px, 0); 14 | } 15 | } 16 | 17 | .bounceOutDown { 18 | animation-name: bounceOutDown; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownRight { 16 | animation-name: rotateInDownRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOut.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOut { 2 | 20% { 3 | transform: scale3d(.9, .9, .9); 4 | } 5 | 6 | 50%, 55% { 7 | opacity: 1; 8 | transform: scale3d(1.1, 1.1, 1.1); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: scale3d(.3, .3, .3); 14 | } 15 | } 16 | 17 | .bounceOut { 18 | animation-name: bounceOut; 19 | animation-duration: .75s; 20 | } 21 | -------------------------------------------------------------------------------- /source/_base.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | Animate.css - http://daneden.me/animate 4 | Licensed under the MIT license - http://opensource.org/licenses/MIT 5 | 6 | Copyright (c) 2015 Daniel Eden 7 | */ 8 | 9 | .animated { 10 | animation-duration: 1s; 11 | animation-fill-mode: both; 12 | } 13 | 14 | .animated.infinite { 15 | animation-iteration-count: infinite; 16 | } 17 | 18 | .animated.hinge { 19 | animation-duration: 2s; 20 | } 21 | -------------------------------------------------------------------------------- /source/flippers/flipOutX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutX { 2 | 0% { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 8 | opacity: 1; 9 | } 10 | 11 | 100% { 12 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .flipOutX { 18 | animation-name: flipOutX; 19 | animation-duration: .75s; 20 | backface-visibility: visible !important; 21 | } 22 | -------------------------------------------------------------------------------- /source/flippers/flipOutY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutY { 2 | 0% { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 8 | opacity: 1; 9 | } 10 | 11 | 100% { 12 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .flipOutY { 18 | backface-visibility: visible !important; 19 | animation-name: flipOutY; 20 | animation-duration: .75s; 21 | } 22 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInUp { 16 | animation-name: zoomInUp; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/swing.css: -------------------------------------------------------------------------------- 1 | @keyframes swing { 2 | 20% { 3 | transform: rotate3d(0, 0, 1, 15deg); 4 | } 5 | 6 | 40% { 7 | transform: rotate3d(0, 0, 1, -10deg); 8 | } 9 | 10 | 60% { 11 | transform: rotate3d(0, 0, 1, 5deg); 12 | } 13 | 14 | 80% { 15 | transform: rotate3d(0, 0, 1, -5deg); 16 | } 17 | 18 | 100% { 19 | transform: rotate3d(0, 0, 1, 0deg); 20 | } 21 | } 22 | 23 | .swing { 24 | transform-origin: top center; 25 | animation-name: swing; 26 | } 27 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInDown { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInDown { 16 | animation-name: zoomInDown; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInLeft { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInLeft { 16 | animation-name: zoomInLeft; 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.2.3", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/daneden/animate.css.git" 7 | }, 8 | "devDependencies": { 9 | "grunt": "~0.4.1", 10 | "grunt-autoprefixer": "~0.4.0", 11 | "grunt-contrib-watch": "~0.5.3", 12 | "grunt-contrib-concat": "~0.3.0", 13 | "grunt-contrib-cssmin": "~0.8.0", 14 | "load-grunt-tasks": "~0.2.0" 15 | }, 16 | "spm": { 17 | "main": "./animate.css" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedIn.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedIn { 2 | 0% { 3 | transform: translate3d(100%, 0, 0) skewX(-30deg); 4 | opacity: 0; 5 | } 6 | 7 | 60% { 8 | transform: skewX(20deg); 9 | opacity: 1; 10 | } 11 | 12 | 80% { 13 | transform: skewX(-5deg); 14 | opacity: 1; 15 | } 16 | 17 | 100% { 18 | transform: none; 19 | opacity: 1; 20 | } 21 | } 22 | 23 | .lightSpeedIn { 24 | animation-name: lightSpeedIn; 25 | animation-timing-function: ease-out; 26 | } 27 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInRight { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInRight { 16 | animation-name: zoomInRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/tada.css: -------------------------------------------------------------------------------- 1 | @keyframes tada { 2 | 0% { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 10%, 20% { 7 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 8 | } 9 | 10 | 30%, 50%, 70%, 90% { 11 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 12 | } 13 | 14 | 40%, 60%, 80% { 15 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 16 | } 17 | 18 | 100% { 19 | transform: scale3d(1, 1, 1); 20 | } 21 | } 22 | 23 | .tada { 24 | animation-name: tada; 25 | } 26 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutUp { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 13 | } 14 | } 15 | 16 | .zoomOutUp { 17 | animation-name: zoomOutUp; 18 | } 19 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutDown { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 13 | } 14 | } 15 | 16 | .zoomOutDown { 17 | animation-name: zoomOutDown; 18 | } 19 | -------------------------------------------------------------------------------- /source/attention_seekers/rubberBand.css: -------------------------------------------------------------------------------- 1 | @keyframes rubberBand { 2 | 0% { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 30% { 7 | transform: scale3d(1.25, 0.75, 1); 8 | } 9 | 10 | 40% { 11 | transform: scale3d(0.75, 1.25, 1); 12 | } 13 | 14 | 50% { 15 | transform: scale3d(1.15, 0.85, 1); 16 | } 17 | 18 | 65% { 19 | transform: scale3d(.95, 1.05, 1); 20 | } 21 | 22 | 75% { 23 | transform: scale3d(1.05, .95, 1); 24 | } 25 | 26 | 100% { 27 | transform: scale3d(1, 1, 1); 28 | } 29 | } 30 | 31 | .rubberBand { 32 | animation-name: rubberBand; 33 | } 34 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInDown { 2 | 0%, 60%, 75%, 90%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(0, -3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, 25px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, -10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, 5px, 0); 22 | } 23 | 24 | 100% { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInDown { 30 | animation-name: bounceInDown; 31 | } 32 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInLeft { 2 | 0%, 60%, 75%, 90%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(-3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(-10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(5px, 0, 0); 22 | } 23 | 24 | 100% { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInLeft { 30 | animation-name: bounceInLeft; 31 | } 32 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInRight { 2 | 0%, 60%, 75%, 90%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(-25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(-5px, 0, 0); 22 | } 23 | 24 | 100% { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInRight { 30 | animation-name: bounceInRight; 31 | } 32 | -------------------------------------------------------------------------------- /source/specials/hinge.css: -------------------------------------------------------------------------------- 1 | @keyframes hinge { 2 | 0% { 3 | transform-origin: top left; 4 | animation-timing-function: ease-in-out; 5 | } 6 | 7 | 20%, 60% { 8 | transform: rotate3d(0, 0, 1, 80deg); 9 | transform-origin: top left; 10 | animation-timing-function: ease-in-out; 11 | } 12 | 13 | 40%, 80% { 14 | transform: rotate3d(0, 0, 1, 60deg); 15 | transform-origin: top left; 16 | animation-timing-function: ease-in-out; 17 | opacity: 1; 18 | } 19 | 20 | 100% { 21 | transform: translate3d(0, 700px, 0); 22 | opacity: 0; 23 | } 24 | } 25 | 26 | .hinge { 27 | animation-name: hinge; 28 | } 29 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInUp { 2 | 0%, 60%, 75%, 90%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(0, 3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, -20px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, 10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, -5px, 0); 22 | } 23 | 24 | 100% { 25 | transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | 29 | .bounceInUp { 30 | animation-name: bounceInUp; 31 | } 32 | -------------------------------------------------------------------------------- /source/attention_seekers/bounce.css: -------------------------------------------------------------------------------- 1 | @keyframes bounce { 2 | 0%, 20%, 53%, 80%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | transform: translate3d(0,0,0); 5 | } 6 | 7 | 40%, 43% { 8 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | transform: translate3d(0, -30px, 0); 10 | } 11 | 12 | 70% { 13 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 14 | transform: translate3d(0, -15px, 0); 15 | } 16 | 17 | 90% { 18 | transform: translate3d(0,-4px,0); 19 | } 20 | } 21 | 22 | .bounce { 23 | animation-name: bounce; 24 | transform-origin: center bottom; 25 | } 26 | -------------------------------------------------------------------------------- /source/flippers/flipInX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInX { 2 | 0% { 3 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 4 | transition-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 10 | transition-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInX { 28 | backface-visibility: visible !important; 29 | animation-name: flipInX; 30 | } 31 | -------------------------------------------------------------------------------- /source/flippers/flipInY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInY { 2 | 0% { 3 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 4 | transition-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 10 | transition-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInY { 28 | backface-visibility: visible !important; 29 | animation-name: flipInY; 30 | } 31 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceIn.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceIn { 2 | 0%, 20%, 40%, 60%, 80%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: scale3d(.3, .3, .3); 9 | } 10 | 11 | 20% { 12 | transform: scale3d(1.1, 1.1, 1.1); 13 | } 14 | 15 | 40% { 16 | transform: scale3d(.9, .9, .9); 17 | } 18 | 19 | 60% { 20 | opacity: 1; 21 | transform: scale3d(1.03, 1.03, 1.03); 22 | } 23 | 24 | 80% { 25 | transform: scale3d(.97, .97, .97); 26 | } 27 | 28 | 100% { 29 | opacity: 1; 30 | transform: scale3d(1, 1, 1); 31 | } 32 | } 33 | 34 | .bounceIn { 35 | animation-name: bounceIn; 36 | animation-duration: .75s; 37 | } 38 | -------------------------------------------------------------------------------- /source/attention_seekers/wobble.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes wobble { 4 | 0% { 5 | transform: none; 6 | } 7 | 8 | 15% { 9 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 10 | } 11 | 12 | 30% { 13 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 14 | } 15 | 16 | 45% { 17 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 18 | } 19 | 20 | 60% { 21 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 22 | } 23 | 24 | 75% { 25 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 26 | } 27 | 28 | 100% { 29 | transform: none; 30 | } 31 | } 32 | 33 | .wobble { 34 | animation-name: wobble; 35 | } 36 | -------------------------------------------------------------------------------- /source/flippers/flip.css: -------------------------------------------------------------------------------- 1 | @keyframes flip { 2 | 0% { 3 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 4 | animation-timing-function: ease-out; 5 | } 6 | 7 | 40% { 8 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 9 | animation-timing-function: ease-out; 10 | } 11 | 12 | 50% { 13 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 14 | animation-timing-function: ease-in; 15 | } 16 | 17 | 80% { 18 | transform: perspective(400px) scale3d(.95, .95, .95); 19 | animation-timing-function: ease-in; 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px); 24 | animation-timing-function: ease-in; 25 | } 26 | } 27 | 28 | .animated.flip { 29 | backface-visibility: visible; 30 | animation-name: flip; 31 | } 32 | -------------------------------------------------------------------------------- /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 | "specials": { 84 | "hinge": true, 85 | "rollIn": true, 86 | "rollOut": true 87 | }, 88 | 89 | "zooming_entrances": { 90 | "zoomIn": true, 91 | "zoomInDown": true, 92 | "zoomInLeft": true, 93 | "zoomInRight": true, 94 | "zoomInUp": true 95 | }, 96 | 97 | "zooming_exits": { 98 | "zoomOut": true, 99 | "zoomOutDown": true, 100 | "zoomOutLeft": true, 101 | "zoomOutRight": true, 102 | "zoomOutUp": true 103 | }, 104 | 105 | "sliding_entrances": { 106 | "slideInDown": true, 107 | "slideInLeft": true, 108 | "slideInRight": true, 109 | "slideInUp": true 110 | }, 111 | 112 | "sliding_exits": { 113 | "slideOutDown": true, 114 | "slideOutLeft": true, 115 | "slideOutRight": true, 116 | "slideOutUp": true 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /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 | ##Basic Usage 7 | 1. Include the stylesheet on your document's `` 8 | 9 | ```html 10 | 11 | 12 | 13 | ``` 14 | 2. Add the class `animated` to the element you want to animate. 15 | You may also want to include the class `infinite` for an infinite loop. 16 | 17 | 3. Finally you need to add one of the following classes: 18 | 19 | * `bounce` 20 | * `flash` 21 | * `pulse` 22 | * `rubberBand` 23 | * `shake` 24 | * `swing` 25 | * `tada` 26 | * `wobble` 27 | * `bounceIn` 28 | * `bounceInDown` 29 | * `bounceInLeft` 30 | * `bounceInRight` 31 | * `bounceInUp` 32 | * `bounceOut` 33 | * `bounceOutDown` 34 | * `bounceOutLeft` 35 | * `bounceOutRight` 36 | * `bounceOutUp` 37 | * `fadeIn` 38 | * `fadeInDown` 39 | * `fadeInDownBig` 40 | * `fadeInLeft` 41 | * `fadeInLeftBig` 42 | * `fadeInRight` 43 | * `fadeInRightBig` 44 | * `fadeInUp` 45 | * `fadeInUpBig` 46 | * `fadeOut` 47 | * `fadeOutDown` 48 | * `fadeOutDownBig` 49 | * `fadeOutLeft` 50 | * `fadeOutLeftBig` 51 | * `fadeOutRight` 52 | * `fadeOutRightBig` 53 | * `fadeOutUp` 54 | * `fadeOutUpBig` 55 | * `flipInX` 56 | * `flipInY` 57 | * `flipOutX` 58 | * `flipOutY` 59 | * `lightSpeedIn` 60 | * `lightSpeedOut` 61 | * `rotateIn` 62 | * `rotateInDownLeft` 63 | * `rotateInDownRight` 64 | * `rotateInUpLeft` 65 | * `rotateInUpRight` 66 | * `rotateOut` 67 | * `rotateOutDownLeft` 68 | * `rotateOutDownRight` 69 | * `rotateOutUpLeft` 70 | * `rotateOutUpRight` 71 | * `hinge` 72 | * `rollIn` 73 | * `rollOut` 74 | * `zoomIn` 75 | * `zoomInDown` 76 | * `zoomInLeft` 77 | * `zoomInRight` 78 | * `zoomInUp` 79 | * `zoomOut` 80 | * `zoomOutDown` 81 | * `zoomOutLeft` 82 | * `zoomOutRight` 83 | * `zoomOutUp` 84 | * `slideInDown` 85 | * `slideInLeft` 86 | * `slideInRight` 87 | * `slideInUp` 88 | * `slideOutDown` 89 | * `slideOutLeft` 90 | * `slideOutRight` 91 | * `slideOutUp` 92 | 93 | Full example: 94 | ```html 95 |

Example

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