├── .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 │ ├── jello.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 │ ├── bounceOut.css │ ├── bounceOutUp.css │ └── bounceOutDown.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 ├── flippers │ ├── flipOutX.css │ ├── flipOutY.css │ ├── flipInX.css │ ├── flipInY.css │ └── flip.css ├── _base.css └── bouncing_entrances │ ├── bounceInDown.css │ ├── bounceInLeft.css │ ├── bounceInRight.css │ ├── bounceInUp.css │ └── bounceIn.css ├── bower.json ├── .editorconfig ├── package.json ├── Gruntfile.js ├── animate-config.json ├── README.md ├── animate.min.css └── animate.css /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules/ 3 | .DS_Store 4 | test/ 5 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeIn.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | from {opacity: 0;} 3 | to {opacity: 1;} 4 | } 5 | 6 | .fadeIn { 7 | animation-name: fadeIn; 8 | } 9 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOut.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOut { 2 | from {opacity: 1;} 3 | to {opacity: 0;} 4 | } 5 | 6 | .fadeOut { 7 | animation-name: fadeOut; 8 | } 9 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "main": "./animate.css", 4 | "ignore": [ 5 | ".*", 6 | "source", 7 | "*.yml", 8 | "Gemfile", 9 | "Gemfile.lock", 10 | "*.md" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /source/attention_seekers/flash.css: -------------------------------------------------------------------------------- 1 | @keyframes flash { 2 | from, 50%, to { 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 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomIn.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomIn { 2 | from { 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 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 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 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 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 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 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 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 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 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 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 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(0, 2000px, 0); 9 | } 10 | } 11 | 12 | .fadeOutDownBig { 13 | animation-name: fadeOutDownBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUp { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, 100%, 0); 5 | } 6 | 7 | to { 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 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 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 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(2000px, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutRightBig { 13 | animation-name: fadeOutRightBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDown { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, -100%, 0); 5 | } 6 | 7 | to { 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 | from { 3 | opacity: 0; 4 | transform: translate3d(-100%, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInLeft { 14 | animation-name: fadeInLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInUp { 2 | from { 3 | transform: translate3d(0, 100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInUp { 13 | animation-name: slideInUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutUp { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(0, -100%, 0); 9 | } 10 | } 11 | 12 | .slideOutUp { 13 | animation-name: slideOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRight { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(100%, 0, 0); 5 | } 6 | 7 | to { 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 | from { 3 | opacity: 0; 4 | transform: translate3d(0, 2000px, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInUpBig { 14 | animation-name: fadeInUpBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutDown { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(0, 100%, 0); 9 | } 10 | } 11 | 12 | .slideOutDown { 13 | animation-name: slideOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOut.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOut { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | 50% { 7 | opacity: 0; 8 | transform: scale3d(.3, .3, .3); 9 | } 10 | 11 | to { 12 | opacity: 0; 13 | } 14 | } 15 | 16 | .zoomOut { 17 | animation-name: zoomOut; 18 | } 19 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInDown { 2 | from { 3 | transform: translate3d(0, -100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInDown { 13 | animation-name: slideInDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInLeft { 2 | from { 3 | transform: translate3d(-100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInLeft { 13 | animation-name: slideInLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInRight { 2 | from { 3 | transform: translate3d(100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInRight { 13 | animation-name: slideInRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutLeft { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(-100%, 0, 0); 9 | } 10 | } 11 | 12 | .slideOutLeft { 13 | animation-name: slideOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutRight { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(100%, 0, 0); 9 | } 10 | } 11 | 12 | .slideOutRight { 13 | animation-name: slideOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDownBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, -2000px, 0); 5 | } 6 | 7 | to { 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 | from { 3 | opacity: 0; 4 | transform: translate3d(-2000px, 0, 0); 5 | } 6 | 7 | to { 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 | from { 3 | opacity: 0; 4 | transform: translate3d(2000px, 0, 0); 5 | } 6 | 7 | to { 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 | to { 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 | to { 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 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 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 | from { 3 | transform-origin: center; 4 | opacity: 1; 5 | } 6 | 7 | to { 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 | from { 3 | transform-origin: center; 4 | transform: rotate3d(0, 0, 1, -200deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 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 | from, to { 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 | from { 5 | opacity: 1; 6 | } 7 | 8 | to { 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 | from { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | to { 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/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 | to { 12 | opacity: 0; 13 | transform: scale3d(.3, .3, .3); 14 | } 15 | } 16 | 17 | .bounceOut { 18 | animation-name: bounceOut; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownLeft { 2 | from { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | to { 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 | from { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | to { 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 | from { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | to { 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 | from { 5 | opacity: 0; 6 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 7 | } 8 | 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } 14 | 15 | .rollIn { 16 | animation-name: rollIn; 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 | to { 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 | to { 12 | opacity: 0; 13 | transform: translate3d(0, -2000px, 0); 14 | } 15 | } 16 | 17 | .bounceOutUp { 18 | animation-name: bounceOutUp; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpLeft { 2 | from { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 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/zoomOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutRight { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 5 | } 6 | 7 | to { 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/rotating_entrances/rotateInDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownLeft { 2 | from { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, -45deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 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 | from { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, -90deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpRight { 16 | animation-name: rotateInUpRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/pulse.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes pulse { 4 | from { 5 | transform: scale3d(1, 1, 1); 6 | } 7 | 8 | 50% { 9 | transform: scale3d(1.05, 1.05, 1.05); 10 | } 11 | 12 | to { 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 | to { 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 | from { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownRight { 16 | animation-name: rotateInDownRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/flippers/flipOutX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutX { 2 | from { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 8 | opacity: 1; 9 | } 10 | 11 | to { 12 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .flipOutX { 18 | animation-name: flipOutX; 19 | backface-visibility: visible !important; 20 | } 21 | -------------------------------------------------------------------------------- /source/flippers/flipOutY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutY { 2 | from { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 8 | opacity: 1; 9 | } 10 | 11 | to { 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 | } 21 | -------------------------------------------------------------------------------- /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 | to { 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/zoomInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInUp { 2 | from { 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/zooming_entrances/zoomInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInDown { 2 | from { 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 | from { 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 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedIn.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedIn { 2 | from { 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 | to { 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 | from { 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 | from { 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 | to { 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 | to { 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 | to { 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 | from { 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 | to { 27 | transform: scale3d(1, 1, 1); 28 | } 29 | } 30 | 31 | .rubberBand { 32 | animation-name: rubberBand; 33 | } 34 | -------------------------------------------------------------------------------- /source/_base.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | Animate.css - http://daneden.me/animate 4 | Version - 3.4.0 5 | Licensed under the MIT license - http://opensource.org/licenses/MIT 6 | 7 | Copyright (c) 2015 Daniel Eden 8 | */ 9 | 10 | .animated { 11 | animation-duration: 1s; 12 | animation-fill-mode: both; 13 | } 14 | 15 | .animated.infinite { 16 | animation-iteration-count: infinite; 17 | } 18 | 19 | .animated.hinge { 20 | animation-duration: 2s; 21 | } 22 | 23 | .animated.flipOutX, 24 | .animated.flipOutY, 25 | .animated.bounceIn, 26 | .animated.bounceOut{ 27 | animation-duration: .75s; 28 | } 29 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInDown { 2 | from, 60%, 75%, 90%, to { 3 | animation-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 | to { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInDown { 30 | animation-name: bounceInDown; 31 | } 32 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInLeft { 2 | from, 60%, 75%, 90%, to { 3 | animation-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 | to { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInLeft { 30 | animation-name: bounceInLeft; 31 | } 32 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInRight { 2 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | from { 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 | to { 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 | to { 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 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | from { 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 | to { 25 | transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | 29 | .bounceInUp { 30 | animation-name: bounceInUp; 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.4.0", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/daneden/animate.css.git" 7 | }, 8 | "license": "MIT", 9 | "jspm": { 10 | "main": "animate.css!", 11 | "format": "global", 12 | "directories": { 13 | "lib": "./" 14 | } 15 | }, 16 | "devDependencies": { 17 | "grunt": "~0.4.1", 18 | "grunt-autoprefixer": "~0.4.0", 19 | "grunt-contrib-watch": "~0.5.3", 20 | "grunt-contrib-concat": "~0.3.0", 21 | "grunt-contrib-cssmin": "~0.8.0", 22 | "load-grunt-tasks": "~0.2.0" 23 | }, 24 | "spm": { 25 | "main": "./animate.css" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /source/attention_seekers/bounce.css: -------------------------------------------------------------------------------- 1 | @keyframes bounce { 2 | from, 20%, 53%, 80%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | transform: translate3d(0,0,0); 5 | } 6 | 7 | 40%, 43% { 8 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | transform: translate3d(0, -30px, 0); 10 | } 11 | 12 | 70% { 13 | animation-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 | from { 3 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 4 | animation-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 10 | animation-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 | to { 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 | from { 3 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 4 | animation-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 10 | animation-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 | to { 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 | from, 20%, 40%, 60%, 80%, to { 3 | animation-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 | to { 29 | opacity: 1; 30 | transform: scale3d(1, 1, 1); 31 | } 32 | } 33 | 34 | .bounceIn { 35 | animation-name: bounceIn; 36 | } 37 | -------------------------------------------------------------------------------- /source/attention_seekers/jello.css: -------------------------------------------------------------------------------- 1 | @keyframes jello { 2 | from, 11.1%, to { 3 | transform: none 4 | } 5 | 22.2% { 6 | transform: skewX(-12.5deg) skewY(-12.5deg) 7 | } 8 | 33.3% { 9 | transform: skewX(6.25deg) skewY(6.25deg) 10 | } 11 | 44.4% { 12 | transform: skewX(-3.125deg) skewY(-3.125deg) 13 | } 14 | 55.5% { 15 | transform: skewX(1.5625deg) skewY(1.5625deg) 16 | } 17 | 66.6% { 18 | transform: skewX(-0.78125deg) skewY(-0.78125deg) 19 | } 20 | 77.7% { 21 | transform: skewX(0.390625deg) skewY(0.390625deg) 22 | } 23 | 88.8% { 24 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg) 25 | } 26 | } 27 | 28 | 29 | 30 | .jello{ 31 | animation-name:jello; 32 | transform-origin: center 33 | } 34 | -------------------------------------------------------------------------------- /source/attention_seekers/wobble.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes wobble { 4 | from { 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 | to { 29 | transform: none; 30 | } 31 | } 32 | 33 | .wobble { 34 | animation-name: wobble; 35 | } 36 | -------------------------------------------------------------------------------- /source/flippers/flip.css: -------------------------------------------------------------------------------- 1 | @keyframes flip { 2 | from { 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 | to { 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 2 versions', 'bb 10'] 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 | "jello": true 13 | }, 14 | 15 | "bouncing_entrances": { 16 | "bounceIn": true, 17 | "bounceInDown": true, 18 | "bounceInLeft": true, 19 | "bounceInRight": true, 20 | "bounceInUp": true 21 | }, 22 | 23 | "bouncing_exits": { 24 | "bounceOut": true, 25 | "bounceOutDown": true, 26 | "bounceOutLeft": true, 27 | "bounceOutRight": true, 28 | "bounceOutUp": true 29 | }, 30 | 31 | "fading_entrances": { 32 | "fadeIn": true, 33 | "fadeInDown": true, 34 | "fadeInDownBig": true, 35 | "fadeInLeft": true, 36 | "fadeInLeftBig": true, 37 | "fadeInRight": true, 38 | "fadeInRightBig": true, 39 | "fadeInUp": true, 40 | "fadeInUpBig": true 41 | }, 42 | 43 | "fading_exits": { 44 | "fadeOut": true, 45 | "fadeOutDown": true, 46 | "fadeOutDownBig": true, 47 | "fadeOutLeft": true, 48 | "fadeOutLeftBig": true, 49 | "fadeOutRight": true, 50 | "fadeOutRightBig": true, 51 | "fadeOutUp": true, 52 | "fadeOutUpBig": true 53 | }, 54 | 55 | "flippers": { 56 | "flip": true, 57 | "flipInX": true, 58 | "flipInY": true, 59 | "flipOutX": true, 60 | "flipOutY": true 61 | }, 62 | 63 | "lightspeed": { 64 | "lightSpeedIn": true, 65 | "lightSpeedOut": true 66 | }, 67 | 68 | "rotating_entrances": { 69 | "rotateIn": true, 70 | "rotateInDownLeft": true, 71 | "rotateInDownRight": true, 72 | "rotateInUpLeft": true, 73 | "rotateInUpRight": true 74 | }, 75 | 76 | "rotating_exits": { 77 | "rotateOut": true, 78 | "rotateOutDownLeft": true, 79 | "rotateOutDownRight": true, 80 | "rotateOutUpLeft": true, 81 | "rotateOutUpRight": true 82 | }, 83 | 84 | "specials": { 85 | "hinge": true, 86 | "rollIn": true, 87 | "rollOut": true 88 | }, 89 | 90 | "zooming_entrances": { 91 | "zoomIn": true, 92 | "zoomInDown": true, 93 | "zoomInLeft": true, 94 | "zoomInRight": true, 95 | "zoomInUp": true 96 | }, 97 | 98 | "zooming_exits": { 99 | "zoomOut": true, 100 | "zoomOutDown": true, 101 | "zoomOutLeft": true, 102 | "zoomOutRight": true, 103 | "zoomOutUp": true 104 | }, 105 | 106 | "sliding_entrances": { 107 | "slideInDown": true, 108 | "slideInLeft": true, 109 | "slideInRight": true, 110 | "slideInUp": true 111 | }, 112 | 113 | "sliding_exits": { 114 | "slideOutDown": true, 115 | "slideOutLeft": true, 116 | "slideOutRight": true, 117 | "slideOutUp": true 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /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 | * `jello` 28 | * `bounceIn` 29 | * `bounceInDown` 30 | * `bounceInLeft` 31 | * `bounceInRight` 32 | * `bounceInUp` 33 | * `bounceOut` 34 | * `bounceOutDown` 35 | * `bounceOutLeft` 36 | * `bounceOutRight` 37 | * `bounceOutUp` 38 | * `fadeIn` 39 | * `fadeInDown` 40 | * `fadeInDownBig` 41 | * `fadeInLeft` 42 | * `fadeInLeftBig` 43 | * `fadeInRight` 44 | * `fadeInRightBig` 45 | * `fadeInUp` 46 | * `fadeInUpBig` 47 | * `fadeOut` 48 | * `fadeOutDown` 49 | * `fadeOutDownBig` 50 | * `fadeOutLeft` 51 | * `fadeOutLeftBig` 52 | * `fadeOutRight` 53 | * `fadeOutRightBig` 54 | * `fadeOutUp` 55 | * `fadeOutUpBig` 56 | * `flipInX` 57 | * `flipInY` 58 | * `flipOutX` 59 | * `flipOutY` 60 | * `lightSpeedIn` 61 | * `lightSpeedOut` 62 | * `rotateIn` 63 | * `rotateInDownLeft` 64 | * `rotateInDownRight` 65 | * `rotateInUpLeft` 66 | * `rotateInUpRight` 67 | * `rotateOut` 68 | * `rotateOutDownLeft` 69 | * `rotateOutDownRight` 70 | * `rotateOutUpLeft` 71 | * `rotateOutUpRight` 72 | * `hinge` 73 | * `rollIn` 74 | * `rollOut` 75 | * `zoomIn` 76 | * `zoomInDown` 77 | * `zoomInLeft` 78 | * `zoomInRight` 79 | * `zoomInUp` 80 | * `zoomOut` 81 | * `zoomOutDown` 82 | * `zoomOutLeft` 83 | * `zoomOutRight` 84 | * `zoomOutUp` 85 | * `slideInDown` 86 | * `slideInLeft` 87 | * `slideInRight` 88 | * `slideInUp` 89 | * `slideOutDown` 90 | * `slideOutLeft` 91 | * `slideOutRight` 92 | * `slideOutUp` 93 | 94 | Full example: 95 | ```html 96 |

Example

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