├── .prettierignore ├── .gitignore ├── .travis.yml ├── bower.json ├── source ├── fading_entrances │ ├── fadeIn.css │ ├── fadeInUp.css │ ├── fadeInDown.css │ ├── fadeInLeft.css │ ├── fadeInRight.css │ ├── fadeInUpBig.css │ ├── fadeInDownBig.css │ ├── fadeInLeftBig.css │ └── fadeInRightBig.css ├── fading_exits │ ├── fadeOut.css │ ├── fadeOutUp.css │ ├── fadeOutDown.css │ ├── fadeOutLeft.css │ ├── fadeOutRight.css │ ├── fadeOutUpBig.css │ ├── fadeOutDownBig.css │ ├── fadeOutLeftBig.css │ └── fadeOutRightBig.css ├── attention_seekers │ ├── flash.css │ ├── pulse.css │ ├── shake.css │ ├── heartBeat.css │ ├── swing.css │ ├── tada.css │ ├── headShake.css │ ├── rubberBand.css │ ├── bounce.css │ ├── wobble.css │ └── jello.css ├── zooming_entrances │ ├── zoomIn.css │ ├── zoomInUp.css │ ├── zoomInDown.css │ ├── zoomInLeft.css │ └── zoomInRight.css ├── sliding_entrances │ ├── slideInUp.css │ ├── slideInDown.css │ ├── slideInLeft.css │ └── slideInRight.css ├── sliding_exits │ ├── slideOutUp.css │ ├── slideOutDown.css │ ├── slideOutLeft.css │ └── slideOutRight.css ├── zooming_exits │ ├── zoomOut.css │ ├── zoomOutLeft.css │ ├── zoomOutRight.css │ ├── zoomOutUp.css │ └── zoomOutDown.css ├── bouncing_exits │ ├── bounceOutLeft.css │ ├── bounceOutRight.css │ ├── bounceOutUp.css │ ├── bounceOutDown.css │ └── bounceOut.css ├── lightspeed │ ├── lightSpeedOut.css │ └── lightSpeedIn.css ├── rotating_exits │ ├── rotateOut.css │ ├── rotateOutUpLeft.css │ ├── rotateOutDownLeft.css │ ├── rotateOutUpRight.css │ └── rotateOutDownRight.css ├── specials │ ├── rollOut.css │ ├── rollIn.css │ ├── jackInTheBox.css │ └── hinge.css ├── rotating_entrances │ ├── rotateIn.css │ ├── rotateInUpLeft.css │ ├── rotateInUpRight.css │ ├── rotateInDownLeft.css │ └── rotateInDownRight.css ├── flippers │ ├── flipOutX.css │ ├── flipOutY.css │ ├── flipInX.css │ ├── flipInY.css │ └── flip.css ├── bouncing_entrances │ ├── bounceInUp.css │ ├── bounceInDown.css │ ├── bounceInLeft.css │ ├── bounceInRight.css │ └── bounceIn.css └── _base.css ├── .editorconfig ├── LICENSE ├── package.json ├── animate-config.json ├── gulpfile.js ├── CODE_OF_CONDUCT.md ├── README.md ├── animate.min.css └── animate.css /.prettierignore: -------------------------------------------------------------------------------- 1 | animate.min.css 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .db 2 | .DS_Store 3 | .idea 4 | .ini 5 | .log 6 | .sass-cache 7 | node_modules/ 8 | test/ 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "10" 4 | before_script: 5 | - npm install -g gulp 6 | script: gulp -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "main": "./animate.css", 4 | "ignore": [".*", "*.yml", "Gemfile", "Gemfile.lock", "*.md"] 5 | } 6 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeIn.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | from { 3 | opacity: 0; 4 | } 5 | 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | .fadeIn { 12 | animation-name: fadeIn; 13 | } 14 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOut.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOut { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | .fadeOut { 12 | animation-name: fadeOut; 13 | } 14 | -------------------------------------------------------------------------------- /source/attention_seekers/flash.css: -------------------------------------------------------------------------------- 1 | @keyframes flash { 2 | from, 3 | 50%, 4 | to { 5 | opacity: 1; 6 | } 7 | 8 | 25%, 9 | 75% { 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .flash { 15 | animation-name: flash; 16 | } 17 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomIn.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomIn { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.3, 0.3, 0.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 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | max_line_length = 100 11 | tab_width = 2 12 | trim_trailing_whitespace = true 13 | -------------------------------------------------------------------------------- /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_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/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/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: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInUp { 14 | animation-name: fadeInUp; 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(0.3, 0.3, 0.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/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: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInLeft { 14 | animation-name: fadeInLeft; 15 | } 16 | -------------------------------------------------------------------------------- /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: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInUpBig { 14 | animation-name: fadeInUpBig; 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/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: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInLeftBig { 14 | animation-name: fadeInLeftBig; 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/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: translate3d(0, 0, 0); 10 | } 11 | } 12 | 13 | .fadeInRightBig { 14 | animation-name: fadeInRightBig; 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/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/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: translate3d(0, 0, 0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateIn { 16 | animation-name: rotateIn; 17 | } 18 | -------------------------------------------------------------------------------- /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/zooming_exits/zoomOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutLeft { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: scale(0.1) translate3d(-2000px, 0, 0); 10 | transform-origin: left center; 11 | } 12 | } 13 | 14 | .zoomOutLeft { 15 | animation-name: zoomOutLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutRight { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: scale(0.1) translate3d(2000px, 0, 0); 10 | transform-origin: right center; 11 | } 12 | } 13 | 14 | .zoomOutRight { 15 | animation-name: zoomOutRight; 16 | } 17 | -------------------------------------------------------------------------------- /source/attention_seekers/pulse.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes pulse { 4 | 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/bounceOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutUp { 2 | 20% { 3 | transform: translate3d(0, -10px, 0); 4 | } 5 | 6 | 40%, 7 | 45% { 8 | opacity: 1; 9 | transform: translate3d(0, 20px, 0); 10 | } 11 | 12 | to { 13 | opacity: 0; 14 | transform: translate3d(0, -2000px, 0); 15 | } 16 | } 17 | 18 | .bounceOutUp { 19 | animation-name: bounceOutUp; 20 | } 21 | -------------------------------------------------------------------------------- /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: translate3d(0, 0, 0); 12 | } 13 | } 14 | 15 | .rollIn { 16 | animation-name: rollIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutDown { 2 | 20% { 3 | transform: translate3d(0, 10px, 0); 4 | } 5 | 6 | 40%, 7 | 45% { 8 | opacity: 1; 9 | transform: translate3d(0, -20px, 0); 10 | } 11 | 12 | to { 13 | opacity: 0; 14 | transform: translate3d(0, 2000px, 0); 15 | } 16 | } 17 | 18 | .bounceOutDown { 19 | animation-name: bounceOutDown; 20 | } 21 | -------------------------------------------------------------------------------- /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: translate3d(0, 0, 0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpLeft { 16 | animation-name: rotateInUpLeft; 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: translate3d(0, 0, 0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpRight { 16 | animation-name: rotateInUpRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/shake.css: -------------------------------------------------------------------------------- 1 | @keyframes shake { 2 | from, 3 | to { 4 | transform: translate3d(0, 0, 0); 5 | } 6 | 7 | 10%, 8 | 30%, 9 | 50%, 10 | 70%, 11 | 90% { 12 | transform: translate3d(-10px, 0, 0); 13 | } 14 | 15 | 20%, 16 | 40%, 17 | 60%, 18 | 80% { 19 | transform: translate3d(10px, 0, 0); 20 | } 21 | } 22 | 23 | .shake { 24 | animation-name: shake; 25 | } 26 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOut.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOut { 2 | 20% { 3 | transform: scale3d(0.9, 0.9, 0.9); 4 | } 5 | 6 | 50%, 7 | 55% { 8 | opacity: 1; 9 | transform: scale3d(1.1, 1.1, 1.1); 10 | } 11 | 12 | to { 13 | opacity: 0; 14 | transform: scale3d(0.3, 0.3, 0.3); 15 | } 16 | } 17 | 18 | .bounceOut { 19 | animation-duration: 0.75s; 20 | animation-name: bounceOut; 21 | } 22 | -------------------------------------------------------------------------------- /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: translate3d(0, 0, 0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownLeft { 16 | animation-name: rotateInDownLeft; 17 | } 18 | -------------------------------------------------------------------------------- /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: translate3d(0, 0, 0); 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownRight { 16 | animation-name: rotateInDownRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/specials/jackInTheBox.css: -------------------------------------------------------------------------------- 1 | @keyframes jackInTheBox { 2 | from { 3 | opacity: 0; 4 | transform: scale(0.1) rotate(30deg); 5 | transform-origin: center bottom; 6 | } 7 | 8 | 50% { 9 | transform: rotate(-10deg); 10 | } 11 | 12 | 70% { 13 | transform: rotate(3deg); 14 | } 15 | 16 | to { 17 | opacity: 1; 18 | transform: scale(1); 19 | } 20 | } 21 | 22 | .jackInTheBox { 23 | animation-name: jackInTheBox; 24 | } 25 | -------------------------------------------------------------------------------- /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-duration: 0.75s; 19 | animation-name: flipOutX; 20 | backface-visibility: visible !important; 21 | } 22 | -------------------------------------------------------------------------------- /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 | animation-duration: 0.75s; 19 | backface-visibility: visible !important; 20 | animation-name: flipOutY; 21 | } 22 | -------------------------------------------------------------------------------- /source/attention_seekers/heartBeat.css: -------------------------------------------------------------------------------- 1 | @keyframes heartBeat { 2 | 0% { 3 | transform: scale(1); 4 | } 5 | 6 | 14% { 7 | transform: scale(1.3); 8 | } 9 | 10 | 28% { 11 | transform: scale(1); 12 | } 13 | 14 | 42% { 15 | transform: scale(1.3); 16 | } 17 | 18 | 70% { 19 | transform: scale(1); 20 | } 21 | } 22 | 23 | .heartBeat { 24 | animation-name: heartBeat; 25 | animation-duration: 1.3s; 26 | animation-timing-function: ease-in-out; 27 | } 28 | -------------------------------------------------------------------------------- /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 | } 15 | 16 | to { 17 | transform: translate3d(0, 0, 0); 18 | } 19 | } 20 | 21 | .lightSpeedIn { 22 | animation-name: lightSpeedIn; 23 | animation-timing-function: ease-out; 24 | } 25 | -------------------------------------------------------------------------------- /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(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 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(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 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(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 12 | } 13 | } 14 | 15 | .zoomInLeft { 16 | animation-name: zoomInLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInRight { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 12 | } 13 | } 14 | 15 | .zoomInRight { 16 | animation-name: zoomInRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutUp { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | to { 9 | opacity: 0; 10 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 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(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 5 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 6 | } 7 | 8 | to { 9 | opacity: 0; 10 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 13 | } 14 | } 15 | 16 | .zoomOutDown { 17 | animation-name: zoomOutDown; 18 | } 19 | -------------------------------------------------------------------------------- /source/attention_seekers/tada.css: -------------------------------------------------------------------------------- 1 | @keyframes tada { 2 | from { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 10%, 7 | 20% { 8 | transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); 9 | } 10 | 11 | 30%, 12 | 50%, 13 | 70%, 14 | 90% { 15 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 16 | } 17 | 18 | 40%, 19 | 60%, 20 | 80% { 21 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 22 | } 23 | 24 | to { 25 | transform: scale3d(1, 1, 1); 26 | } 27 | } 28 | 29 | .tada { 30 | animation-name: tada; 31 | } 32 | -------------------------------------------------------------------------------- /source/attention_seekers/headShake.css: -------------------------------------------------------------------------------- 1 | @keyframes headShake { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 6.5% { 7 | transform: translateX(-6px) rotateY(-9deg); 8 | } 9 | 10 | 18.5% { 11 | transform: translateX(5px) rotateY(7deg); 12 | } 13 | 14 | 31.5% { 15 | transform: translateX(-3px) rotateY(-5deg); 16 | } 17 | 18 | 43.5% { 19 | transform: translateX(2px) rotateY(3deg); 20 | } 21 | 22 | 50% { 23 | transform: translateX(0); 24 | } 25 | } 26 | 27 | .headShake { 28 | animation-timing-function: ease-in-out; 29 | animation-name: headShake; 30 | } 31 | -------------------------------------------------------------------------------- /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(0.95, 1.05, 1); 20 | } 21 | 22 | 75% { 23 | transform: scale3d(1.05, 0.95, 1); 24 | } 25 | 26 | to { 27 | transform: scale3d(1, 1, 1); 28 | } 29 | } 30 | 31 | .rubberBand { 32 | animation-name: rubberBand; 33 | } 34 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInUp { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | from { 11 | opacity: 0; 12 | transform: translate3d(0, 3000px, 0); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(0, -20px, 0); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(0, 10px, 0); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(0, -5px, 0); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .bounceInUp { 34 | animation-name: bounceInUp; 35 | } 36 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInDown { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | 0% { 11 | opacity: 0; 12 | transform: translate3d(0, -3000px, 0); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(0, 25px, 0); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(0, -10px, 0); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(0, 5px, 0); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .bounceInDown { 34 | animation-name: bounceInDown; 35 | } 36 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInLeft { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | 0% { 11 | opacity: 0; 12 | transform: translate3d(-3000px, 0, 0); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(25px, 0, 0); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(-10px, 0, 0); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(5px, 0, 0); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .bounceInLeft { 34 | animation-name: bounceInLeft; 35 | } 36 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInRight { 2 | from, 3 | 60%, 4 | 75%, 5 | 90%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | } 9 | 10 | from { 11 | opacity: 0; 12 | transform: translate3d(3000px, 0, 0); 13 | } 14 | 15 | 60% { 16 | opacity: 1; 17 | transform: translate3d(-25px, 0, 0); 18 | } 19 | 20 | 75% { 21 | transform: translate3d(10px, 0, 0); 22 | } 23 | 24 | 90% { 25 | transform: translate3d(-5px, 0, 0); 26 | } 27 | 28 | to { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .bounceInRight { 34 | animation-name: bounceInRight; 35 | } 36 | -------------------------------------------------------------------------------- /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%, 8 | 60% { 9 | transform: rotate3d(0, 0, 1, 80deg); 10 | transform-origin: top left; 11 | animation-timing-function: ease-in-out; 12 | } 13 | 14 | 40%, 15 | 80% { 16 | transform: rotate3d(0, 0, 1, 60deg); 17 | transform-origin: top left; 18 | animation-timing-function: ease-in-out; 19 | opacity: 1; 20 | } 21 | 22 | to { 23 | transform: translate3d(0, 700px, 0); 24 | opacity: 0; 25 | } 26 | } 27 | 28 | .hinge { 29 | animation-duration: 2s; 30 | animation-name: hinge; 31 | } 32 | -------------------------------------------------------------------------------- /source/attention_seekers/bounce.css: -------------------------------------------------------------------------------- 1 | @keyframes bounce { 2 | from, 3 | 20%, 4 | 53%, 5 | 80%, 6 | to { 7 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 8 | transform: translate3d(0, 0, 0); 9 | } 10 | 11 | 40%, 12 | 43% { 13 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 14 | transform: translate3d(0, -30px, 0); 15 | } 16 | 17 | 70% { 18 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 19 | transform: translate3d(0, -15px, 0); 20 | } 21 | 22 | 90% { 23 | transform: translate3d(0, -4px, 0); 24 | } 25 | } 26 | 27 | .bounce { 28 | animation-name: bounce; 29 | transform-origin: center bottom; 30 | } 31 | -------------------------------------------------------------------------------- /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, 3 | 20%, 4 | 40%, 5 | 60%, 6 | 80%, 7 | to { 8 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 9 | } 10 | 11 | 0% { 12 | opacity: 0; 13 | transform: scale3d(0.3, 0.3, 0.3); 14 | } 15 | 16 | 20% { 17 | transform: scale3d(1.1, 1.1, 1.1); 18 | } 19 | 20 | 40% { 21 | transform: scale3d(0.9, 0.9, 0.9); 22 | } 23 | 24 | 60% { 25 | opacity: 1; 26 | transform: scale3d(1.03, 1.03, 1.03); 27 | } 28 | 29 | 80% { 30 | transform: scale3d(0.97, 0.97, 0.97); 31 | } 32 | 33 | to { 34 | opacity: 1; 35 | transform: scale3d(1, 1, 1); 36 | } 37 | } 38 | 39 | .bounceIn { 40 | animation-duration: 0.75s; 41 | animation-name: bounceIn; 42 | } 43 | -------------------------------------------------------------------------------- /source/attention_seekers/wobble.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes wobble { 4 | from { 5 | transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); 30 | } 31 | } 32 | 33 | .wobble { 34 | animation-name: wobble; 35 | } 36 | -------------------------------------------------------------------------------- /source/attention_seekers/jello.css: -------------------------------------------------------------------------------- 1 | @keyframes jello { 2 | from, 3 | 11.1%, 4 | to { 5 | transform: translate3d(0, 0, 0); 6 | } 7 | 8 | 22.2% { 9 | transform: skewX(-12.5deg) skewY(-12.5deg); 10 | } 11 | 12 | 33.3% { 13 | transform: skewX(6.25deg) skewY(6.25deg); 14 | } 15 | 16 | 44.4% { 17 | transform: skewX(-3.125deg) skewY(-3.125deg); 18 | } 19 | 20 | 55.5% { 21 | transform: skewX(1.5625deg) skewY(1.5625deg); 22 | } 23 | 24 | 66.6% { 25 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 26 | } 27 | 28 | 77.7% { 29 | transform: skewX(0.390625deg) skewY(0.390625deg); 30 | } 31 | 32 | 88.8% { 33 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 34 | } 35 | } 36 | 37 | .jello { 38 | animation-name: jello; 39 | transform-origin: center; 40 | } 41 | -------------------------------------------------------------------------------- /source/_base.css: -------------------------------------------------------------------------------- 1 | .animated { 2 | animation-duration: 1s; 3 | animation-fill-mode: both; 4 | } 5 | 6 | .animated.infinite { 7 | animation-iteration-count: infinite; 8 | } 9 | 10 | .animated.delay-1s { 11 | animation-delay: 1s; 12 | } 13 | 14 | .animated.delay-2s { 15 | animation-delay: 2s; 16 | } 17 | 18 | .animated.delay-3s { 19 | animation-delay: 3s; 20 | } 21 | 22 | .animated.delay-4s { 23 | animation-delay: 4s; 24 | } 25 | 26 | .animated.delay-5s { 27 | animation-delay: 5s; 28 | } 29 | 30 | .animated.fast { 31 | animation-duration: 800ms; 32 | } 33 | 34 | .animated.faster { 35 | animation-duration: 500ms; 36 | } 37 | 38 | .animated.slow { 39 | animation-duration: 2s; 40 | } 41 | 42 | .animated.slower { 43 | animation-duration: 3s; 44 | } 45 | 46 | @media (print), (prefers-reduced-motion) { 47 | .animated { 48 | animation: unset !important; 49 | transition: none !important; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /source/flippers/flip.css: -------------------------------------------------------------------------------- 1 | @keyframes flip { 2 | from { 3 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); 4 | animation-timing-function: ease-out; 5 | } 6 | 7 | 40% { 8 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 9 | rotate3d(0, 1, 0, -190deg); 10 | animation-timing-function: ease-out; 11 | } 12 | 13 | 50% { 14 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) 15 | rotate3d(0, 1, 0, -170deg); 16 | animation-timing-function: ease-in; 17 | } 18 | 19 | 80% { 20 | transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) 21 | rotate3d(0, 1, 0, 0deg); 22 | animation-timing-function: ease-in; 23 | } 24 | 25 | to { 26 | transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); 27 | animation-timing-function: ease-in; 28 | } 29 | } 30 | 31 | .animated.flip { 32 | backface-visibility: visible; 33 | animation-name: flip; 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Daniel Eden 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.7.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": "https://daneden.github.io/animate.css/", 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 | "autoprefixer": "^9.0.1", 24 | "cssnano": "^4.0.3", 25 | "eslint": "^5.2.0", 26 | "gulp": "^4.0.0", 27 | "gulp-concat": "^2.6.1", 28 | "gulp-header": "^2.0.1", 29 | "gulp-postcss": "^8.0.0", 30 | "gulp-rename": "^1.2.2", 31 | "gulp-util": "^3.0.8", 32 | "husky": "^1.2.0", 33 | "lint-staged": "^8.1.0", 34 | "prettier": "^1.10.2", 35 | "run-sequence": "^2.2.1" 36 | }, 37 | "lint-staged": { 38 | "*.{js,json,md,css}": [ 39 | "prettier --write", 40 | "git add" 41 | ] 42 | }, 43 | "prettier": { 44 | "bracketSpacing": false, 45 | "proseWrap": "never", 46 | "singleQuote": true, 47 | "trailingComma": "all" 48 | }, 49 | "scripts": { 50 | "gulp": "./node_modules/gulp/bin/gulp.js", 51 | "start": "gulp", 52 | "prettier": "prettier --write \"**/*.{js,json,md,css}\"", 53 | "precommit": "lint-staged" 54 | }, 55 | "spm": { 56 | "main": "./animate.css" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /animate-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "attention_seekers": { 3 | "bounce": true, 4 | "flash": true, 5 | "pulse": true, 6 | "rubberBand": true, 7 | "shake": true, 8 | "headShake": true, 9 | "swing": true, 10 | "tada": true, 11 | "wobble": true, 12 | "jello": true, 13 | "heartBeat": 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 | "jackInTheBox": true, 88 | "rollIn": true, 89 | "rollOut": true 90 | }, 91 | 92 | "zooming_entrances": { 93 | "zoomIn": true, 94 | "zoomInDown": true, 95 | "zoomInLeft": true, 96 | "zoomInRight": true, 97 | "zoomInUp": true 98 | }, 99 | 100 | "zooming_exits": { 101 | "zoomOut": true, 102 | "zoomOutDown": true, 103 | "zoomOutLeft": true, 104 | "zoomOutRight": true, 105 | "zoomOutUp": true 106 | }, 107 | 108 | "sliding_entrances": { 109 | "slideInDown": true, 110 | "slideInLeft": true, 111 | "slideInRight": true, 112 | "slideInUp": true 113 | }, 114 | 115 | "sliding_exits": { 116 | "slideOutDown": true, 117 | "slideOutLeft": true, 118 | "slideOutRight": true, 119 | "slideOutUp": true 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Utilities 2 | var autoprefixer = require('autoprefixer'); 3 | var cssnano = require('cssnano'); 4 | var fs = require('fs'); 5 | 6 | // Gulp 7 | var gulp = require('gulp'); 8 | 9 | // Gulp plugins 10 | var concat = require('gulp-concat'); 11 | var gutil = require('gulp-util'); 12 | var header = require('gulp-header'); 13 | var postcss = require('gulp-postcss'); 14 | var rename = require('gulp-rename'); 15 | var runSequence = require('run-sequence'); 16 | 17 | // Misc/global vars 18 | var pkg = JSON.parse(fs.readFileSync('package.json')); 19 | var activatedAnimations = activateAnimations(); 20 | 21 | // Task options 22 | var opts = { 23 | destPath: './', 24 | concatName: 'animate.css', 25 | 26 | autoprefixer: { 27 | browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'], 28 | cascade: false, 29 | }, 30 | 31 | minRename: { 32 | suffix: '.min', 33 | }, 34 | 35 | banner: [ 36 | '@charset "UTF-8";\n', 37 | '/*!', 38 | ' * <%= name %> -<%= homepage %>', 39 | ' * Version - <%= version %>', 40 | ' * Licensed under the MIT license - http://opensource.org/licenses/MIT', 41 | ' *', 42 | ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>', 43 | ' */\n\n', 44 | ].join('\n'), 45 | }; 46 | 47 | // ---------------------------- 48 | // Gulp task definitions 49 | // ---------------------------- 50 | 51 | gulp.task('createCSS', function() { 52 | return gulp 53 | .src(activatedAnimations) 54 | .pipe(concat(opts.concatName)) 55 | .pipe(postcss([autoprefixer(opts.autoprefixer)])) 56 | .pipe(gulp.dest(opts.destPath)) 57 | .pipe(postcss([cssnano({reduceIdents: {keyframes: false}})])) 58 | .pipe(rename(opts.minRename)) 59 | .pipe(gulp.dest(opts.destPath)); 60 | }); 61 | 62 | gulp.task('addHeader', function() { 63 | return gulp 64 | .src('*.css') 65 | .pipe(header(opts.banner, pkg)) 66 | .pipe(gulp.dest(opts.destPath)); 67 | }); 68 | 69 | gulp.task('default', gulp.series('createCSS', 'addHeader')); 70 | 71 | // ---------------------------- 72 | // Helpers/functions 73 | // ---------------------------- 74 | 75 | // Read the config file and return an array of the animations to be activated 76 | function activateAnimations() { 77 | var categories = JSON.parse(fs.readFileSync('animate-config.json')), 78 | category, 79 | files, 80 | file, 81 | target = [], 82 | count = 0; 83 | 84 | for (category in categories) { 85 | if (categories.hasOwnProperty(category)) { 86 | files = categories[category]; 87 | 88 | for (file in files) { 89 | if (files[file]) { 90 | // marked as true 91 | target.push('source/' + category + '/' + file + '.css'); 92 | count += 1; 93 | } 94 | } 95 | } 96 | } 97 | // prepend base CSS 98 | target.push('source/_base.css'); 99 | 100 | if (!count) { 101 | gutil.log('No animations activated.'); 102 | } else { 103 | gutil.log(count + (count > 1 ? ' animations' : ' animation') + ' activated.'); 104 | } 105 | 106 | return target; 107 | } 108 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at callmeelton@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animate.css [![GitHub release](https://img.shields.io/github/release/daneden/animate.css.svg)](https://github.com/daneden/animate.css/releases) [![CDNJS](https://img.shields.io/cdnjs/v/animate.css.svg)](https://cdnjs.com/libraries/animate.css) [![Build Status](https://travis-ci.com/daneden/animate.css.svg?branch=master)](https://travis-ci.com/daneden/animate.css) [![devDependencies Status](https://david-dm.org/daneden/animate.css/dev-status.svg)](https://david-dm.org/daneden/animate.css?type=dev) [![chat](https://img.shields.io/badge/chat-gitter-green.svg)](https://gitter.im/animate-css/Lobby) [![npm version](https://badge.fury.io/js/animate.css.svg)](https://www.npmjs.com/package/animate.css) 2 | 3 | _Just-add-water CSS animation_ 4 | 5 | `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. 6 | 7 | 8 | ## Installation 9 | 10 | Install via npm: 11 | 12 | ```bash 13 | $ npm install animate.css --save 14 | ``` 15 | 16 | or yarn: 17 | 18 | ```bash 19 | $ yarn add animate.css 20 | ``` 21 | 22 | 23 | ## Usage 24 | 25 | 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! 26 | 27 | ```html 28 | 29 | 30 | 31 | ``` 32 | 33 | or use a CDN hosted version by [CDNJS](https://cdnjs.com/libraries/animate.css) 34 | 35 | ```html 36 | 37 | 38 | 39 | ``` 40 | 41 | 42 | ### Animations 43 | 44 | To animate an element, add the class `animated` to an element. You can include the class `infinite` for an infinite loop. Finally you need to add one of the following classes to the element: 45 | 46 | | Class Name | | | | 47 | | ----------------- | ------------------ | ------------------- | -------------------- | 48 | | `bounce` | `flash` | `pulse` | `rubberBand` | 49 | | `shake` | `headShake` | `swing` | `tada` | 50 | | `wobble` | `jello` | `bounceIn` | `bounceInDown` | 51 | | `bounceInLeft` | `bounceInRight` | `bounceInUp` | `bounceOut` | 52 | | `bounceOutDown` | `bounceOutLeft` | `bounceOutRight` | `bounceOutUp` | 53 | | `fadeIn` | `fadeInDown` | `fadeInDownBig` | `fadeInLeft` | 54 | | `fadeInLeftBig` | `fadeInRight` | `fadeInRightBig` | `fadeInUp` | 55 | | `fadeInUpBig` | `fadeOut` | `fadeOutDown` | `fadeOutDownBig` | 56 | | `fadeOutLeft` | `fadeOutLeftBig` | `fadeOutRight` | `fadeOutRightBig` | 57 | | `fadeOutUp` | `fadeOutUpBig` | `flipInX` | `flipInY` | 58 | | `flipOutX` | `flipOutY` | `lightSpeedIn` | `lightSpeedOut` | 59 | | `rotateIn` | `rotateInDownLeft` | `rotateInDownRight` | `rotateInUpLeft` | 60 | | `rotateInUpRight` | `rotateOut` | `rotateOutDownLeft` | `rotateOutDownRight` | 61 | | `rotateOutUpLeft` | `rotateOutUpRight` | `hinge` | `jackInTheBox` | 62 | | `rollIn` | `rollOut` | `zoomIn` | `zoomInDown` | 63 | | `zoomInLeft` | `zoomInRight` | `zoomInUp` | `zoomOut` | 64 | | `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` | 65 | | `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` | 66 | | `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` | 67 | | `heartBeat` | 68 | 69 | Full example: 70 | 71 | ```html 72 |

Example

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