├── .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 │ ├── headShake.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 ├── _base.css ├── flippers │ ├── flipOutX.css │ ├── flipOutY.css │ ├── flipInX.css │ ├── flipInY.css │ └── flip.css └── bouncing_entrances │ ├── bounceInDown.css │ ├── bounceInLeft.css │ ├── bounceInRight.css │ ├── bounceInUp.css │ └── bounceIn.css ├── bower.json ├── .editorconfig ├── package.json ├── animate-config.json ├── Gruntfile.js ├── 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/_base.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! inject-banner */ 4 | 5 | .animated { 6 | animation-duration: 1s; 7 | animation-fill-mode: both; 8 | } 9 | 10 | .animated.infinite { 11 | animation-iteration-count: infinite; 12 | } 13 | 14 | .animated.hinge { 15 | animation-duration: 2s; 16 | } 17 | 18 | .animated.flipOutX, 19 | .animated.flipOutY, 20 | .animated.bounceIn, 21 | .animated.bounceOut{ 22 | animation-duration: .75s; 23 | } 24 | -------------------------------------------------------------------------------- /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/attention_seekers/headShake.css: -------------------------------------------------------------------------------- 1 | @keyframes headShake { 2 | 3 | 4 | 0 { 5 | transform: translateX(0) 6 | } 7 | 8 | 6.5% { 9 | transform: translateX(-6px) rotateY(-9deg) 10 | } 11 | 12 | 18.5% { 13 | transform: translateX(5px) rotateY(7deg) 14 | } 15 | 16 | 31.5% { 17 | transform: translateX(-3px) rotateY(-5deg) 18 | } 19 | 20 | 43.5% { 21 | transform: translateX(2px) rotateY(3deg) 22 | } 23 | 24 | 50% { 25 | transform: translateX(0) 26 | } 27 | } 28 | 29 | 30 | .headShake { 31 | animation-timing-function: ease-in-out; 32 | animation-name: headShake; 33 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.4.0", 4 | "main": "animate.css", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/daneden/animate.css.git" 8 | }, 9 | "author": { 10 | "name": "Daniel Eden" 11 | }, 12 | "homepage": "http://daneden.me/animate", 13 | "license": "MIT", 14 | "style": "./animate.css", 15 | "jspm": { 16 | "main": "animate.css!", 17 | "format": "global", 18 | "directories": { 19 | "lib": "./" 20 | } 21 | }, 22 | "devDependencies": { 23 | "grunt": "~0.4.1", 24 | "grunt-autoprefixer": "~0.4.0", 25 | "grunt-contrib-watch": "~0.5.3", 26 | "grunt-banner": "~0.6.0", 27 | "grunt-contrib-concat": "~0.3.0", 28 | "grunt-contrib-cssmin": "~0.8.0", 29 | "load-grunt-tasks": "~0.2.0" 30 | }, 31 | "spm": { 32 | "main": "./animate.css" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /animate-config.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "attention_seekers": { 4 | "bounce": true, 5 | "flash": true, 6 | "pulse": true, 7 | "rubberBand": true, 8 | "shake": true, 9 | "headShake": true, 10 | "swing": true, 11 | "tada": true, 12 | "wobble": true, 13 | "jello": true 14 | }, 15 | 16 | "bouncing_entrances": { 17 | "bounceIn": true, 18 | "bounceInDown": true, 19 | "bounceInLeft": true, 20 | "bounceInRight": true, 21 | "bounceInUp": true 22 | }, 23 | 24 | "bouncing_exits": { 25 | "bounceOut": true, 26 | "bounceOutDown": true, 27 | "bounceOutLeft": true, 28 | "bounceOutRight": true, 29 | "bounceOutUp": true 30 | }, 31 | 32 | "fading_entrances": { 33 | "fadeIn": true, 34 | "fadeInDown": true, 35 | "fadeInDownBig": true, 36 | "fadeInLeft": true, 37 | "fadeInLeftBig": true, 38 | "fadeInRight": true, 39 | "fadeInRightBig": true, 40 | "fadeInUp": true, 41 | "fadeInUpBig": true 42 | }, 43 | 44 | "fading_exits": { 45 | "fadeOut": true, 46 | "fadeOutDown": true, 47 | "fadeOutDownBig": true, 48 | "fadeOutLeft": true, 49 | "fadeOutLeftBig": true, 50 | "fadeOutRight": true, 51 | "fadeOutRightBig": true, 52 | "fadeOutUp": true, 53 | "fadeOutUpBig": true 54 | }, 55 | 56 | "flippers": { 57 | "flip": true, 58 | "flipInX": true, 59 | "flipInY": true, 60 | "flipOutX": true, 61 | "flipOutY": true 62 | }, 63 | 64 | "lightspeed": { 65 | "lightSpeedIn": true, 66 | "lightSpeedOut": true 67 | }, 68 | 69 | "rotating_entrances": { 70 | "rotateIn": true, 71 | "rotateInDownLeft": true, 72 | "rotateInDownRight": true, 73 | "rotateInUpLeft": true, 74 | "rotateInUpRight": true 75 | }, 76 | 77 | "rotating_exits": { 78 | "rotateOut": true, 79 | "rotateOutDownLeft": true, 80 | "rotateOutDownRight": true, 81 | "rotateOutUpLeft": true, 82 | "rotateOutUpRight": true 83 | }, 84 | 85 | "specials": { 86 | "hinge": true, 87 | "rollIn": true, 88 | "rollOut": true 89 | }, 90 | 91 | "zooming_entrances": { 92 | "zoomIn": true, 93 | "zoomInDown": true, 94 | "zoomInLeft": true, 95 | "zoomInRight": true, 96 | "zoomInUp": true 97 | }, 98 | 99 | "zooming_exits": { 100 | "zoomOut": true, 101 | "zoomOutDown": true, 102 | "zoomOutLeft": true, 103 | "zoomOutRight": true, 104 | "zoomOutUp": true 105 | }, 106 | 107 | "sliding_entrances": { 108 | "slideInDown": true, 109 | "slideInLeft": true, 110 | "slideInRight": true, 111 | "slideInUp": true 112 | }, 113 | 114 | "sliding_exits": { 115 | "slideOutDown": true, 116 | "slideOutLeft": true, 117 | "slideOutRight": true, 118 | "slideOutUp": true 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /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 | banner: [ 35 | '/*!', 36 | ' * <%= _.capitalize(pkg.name) %> -<%= pkg.homepage %>', 37 | ' * Version - <%= pkg.version %>', 38 | ' * Licensed under the MIT license - http://opensource.org/licenses/MIT', 39 | ' *', 40 | ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>', 41 | ' */', 42 | ].join('\n'), 43 | 44 | usebanner: { 45 | options: { 46 | position: 'replace', 47 | linebreak: false, 48 | replace: /\/\*!(\s+)?inject-banner(\s+)?\*\// 49 | }, 50 | development: { 51 | options: { 52 | banner: '<%= banner %>' 53 | }, 54 | files: { 55 | src: [ 'animate.css'] 56 | } 57 | }, 58 | production: { 59 | options: { 60 | banner: '\n<%= banner %>\n' 61 | }, 62 | files: { 63 | src: ['animate.min.css'] 64 | } 65 | } 66 | }, 67 | 68 | watch: { 69 | css: { 70 | files: [ 'source/**/*', 'animate-config.json' ], 71 | tasks: ['default'] 72 | } 73 | } 74 | 75 | }); 76 | 77 | // fuction to perform custom task 78 | concatAnim = function () { 79 | 80 | var categories = grunt.file.readJSON('animate-config.json'), 81 | category, files, file, 82 | target = [ 'source/_base.css' ], 83 | count = 0; 84 | 85 | for ( category in categories ) { 86 | if ( categories.hasOwnProperty(category) ) { 87 | files = categories[category] 88 | for (file in files) { 89 | if ( files.hasOwnProperty(file) && files[file] ) { 90 | target.push('source/' + category + '/' + file + '.css'); 91 | count += 1; 92 | } 93 | } 94 | } 95 | } 96 | 97 | if (!count) { 98 | grunt.log.writeln('No animations activated.'); 99 | } else { 100 | grunt.log.writeln(count + (count > 1 ? ' animations' : ' animation') + ' activated.'); 101 | } 102 | 103 | grunt.config('concat', { 'animate.css': target }); 104 | grunt.task.run('concat'); 105 | 106 | }; 107 | 108 | // register task 109 | grunt.registerTask('concat-anim', 'Concatenates activated animations', concatAnim); // custom task 110 | grunt.registerTask('default', ['concat-anim', 'autoprefixer', 'cssmin', 'usebanner']); 111 | grunt.registerTask('dev', ['watch']); 112 | 113 | }; 114 | -------------------------------------------------------------------------------- /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 | * `headShake` 25 | * `swing` 26 | * `tada` 27 | * `wobble` 28 | * `jello` 29 | * `bounceIn` 30 | * `bounceInDown` 31 | * `bounceInLeft` 32 | * `bounceInRight` 33 | * `bounceInUp` 34 | * `bounceOut` 35 | * `bounceOutDown` 36 | * `bounceOutLeft` 37 | * `bounceOutRight` 38 | * `bounceOutUp` 39 | * `fadeIn` 40 | * `fadeInDown` 41 | * `fadeInDownBig` 42 | * `fadeInLeft` 43 | * `fadeInLeftBig` 44 | * `fadeInRight` 45 | * `fadeInRightBig` 46 | * `fadeInUp` 47 | * `fadeInUpBig` 48 | * `fadeOut` 49 | * `fadeOutDown` 50 | * `fadeOutDownBig` 51 | * `fadeOutLeft` 52 | * `fadeOutLeftBig` 53 | * `fadeOutRight` 54 | * `fadeOutRightBig` 55 | * `fadeOutUp` 56 | * `fadeOutUpBig` 57 | * `flipInX` 58 | * `flipInY` 59 | * `flipOutX` 60 | * `flipOutY` 61 | * `lightSpeedIn` 62 | * `lightSpeedOut` 63 | * `rotateIn` 64 | * `rotateInDownLeft` 65 | * `rotateInDownRight` 66 | * `rotateInUpLeft` 67 | * `rotateInUpRight` 68 | * `rotateOut` 69 | * `rotateOutDownLeft` 70 | * `rotateOutDownRight` 71 | * `rotateOutUpLeft` 72 | * `rotateOutUpRight` 73 | * `hinge` 74 | * `rollIn` 75 | * `rollOut` 76 | * `zoomIn` 77 | * `zoomInDown` 78 | * `zoomInLeft` 79 | * `zoomInRight` 80 | * `zoomInUp` 81 | * `zoomOut` 82 | * `zoomOutDown` 83 | * `zoomOutLeft` 84 | * `zoomOutRight` 85 | * `zoomOutUp` 86 | * `slideInDown` 87 | * `slideInLeft` 88 | * `slideInRight` 89 | * `slideInUp` 90 | * `slideOutDown` 91 | * `slideOutLeft` 92 | * `slideOutRight` 93 | * `slideOutUp` 94 | 95 | Full example: 96 | ```html 97 |

Example

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