├── .gitignore ├── bower.json ├── source ├── fading_entrances │ ├── fadeIn.css │ ├── fadeInUp.css │ ├── fadeInDown.css │ ├── fadeInLeft.css │ ├── fadeInDownBig.css │ ├── fadeInRight.css │ ├── fadeInUpBig.css │ ├── fadeInLeftBig.css │ └── fadeInRightBig.css ├── fading_exits │ ├── fadeOut.css │ ├── fadeOutUp.css │ ├── fadeOutDown.css │ ├── fadeOutLeft.css │ ├── fadeOutRight.css │ ├── fadeOutUpBig.css │ ├── fadeOutDownBig.css │ ├── fadeOutLeftBig.css │ └── fadeOutRightBig.css ├── attention_seekers │ ├── flash.css │ ├── shake.css │ ├── pulse.css │ ├── swing.css │ ├── tada.css │ ├── rubberBand.css │ ├── bounce.css │ └── wobble.css ├── zooming_entrances │ ├── zoomIn.css │ ├── zoomInUp.css │ ├── zoomInDown.css │ ├── zoomInLeft.css │ └── zoomInRight.css ├── sliding_entrances │ ├── slideInUp.css │ ├── slideInDown.css │ ├── slideInLeft.css │ └── slideInRight.css ├── sliding_exits │ ├── slideOutUp.css │ ├── slideOutDown.css │ ├── slideOutLeft.css │ └── slideOutRight.css ├── zooming_exits │ ├── zoomOut.css │ ├── zoomOutLeft.css │ ├── zoomOutRight.css │ ├── zoomOutUp.css │ └── zoomOutDown.css ├── bouncing_exits │ ├── bounceOutLeft.css │ ├── bounceOutRight.css │ ├── bounceOut.css │ ├── bounceOutUp.css │ └── bounceOutDown.css ├── lightspeed │ ├── lightSpeedOut.css │ └── lightSpeedIn.css ├── rotating_exits │ ├── rotateOut.css │ ├── rotateOutUpLeft.css │ ├── rotateOutDownLeft.css │ ├── rotateOutUpRight.css │ └── rotateOutDownRight.css ├── rotating_entrances │ ├── rotateIn.css │ ├── rotateInUpLeft.css │ ├── rotateInDownLeft.css │ ├── rotateInUpRight.css │ └── rotateInDownRight.css ├── specials │ ├── rollOut.css │ ├── rollIn.css │ └── hinge.css ├── flippers │ ├── flipOutY.css │ ├── flipOutX.css │ ├── flipInX.css │ ├── flipInY.css │ └── flip.css ├── _base.css └── bouncing_entrances │ ├── bounceInDown.css │ ├── bounceInLeft.css │ ├── bounceInRight.css │ ├── bounceInUp.css │ └── bounceIn.css ├── .editorconfig ├── package.json ├── Gruntfile.js ├── animate-config.json ├── README.md ├── animate.min.css └── animate.css /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules/ 3 | .DS_Store 4 | test/ 5 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.2.0", 4 | "main": "./animate.css" 5 | } 6 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeIn.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | 0% {opacity: 0;} 3 | 100% {opacity: 1;} 4 | } 5 | 6 | .fadeIn { 7 | animation-name: fadeIn; 8 | } 9 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOut.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOut { 2 | 0% {opacity: 1;} 3 | 100% {opacity: 0;} 4 | } 5 | 6 | .fadeOut { 7 | animation-name: fadeOut; 8 | } 9 | -------------------------------------------------------------------------------- /source/attention_seekers/flash.css: -------------------------------------------------------------------------------- 1 | @keyframes flash { 2 | 0%, 50%, 100% { 3 | opacity: 1; 4 | } 5 | 6 | 25%, 75% { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | .flash { 12 | animation-name: flash; 13 | } 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | tab_width = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomIn.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomIn { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.3, .3, .3); 5 | } 6 | 7 | 50% { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | .zoomIn { 13 | animation-name: zoomIn; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUp { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateY(-10px); 9 | } 10 | } 11 | 12 | .fadeOutUp { 13 | animation-name: fadeOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDown { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateY(10px); 9 | } 10 | } 11 | 12 | .fadeOutDown { 13 | animation-name: fadeOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeft { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateX(-10px); 9 | } 10 | } 11 | 12 | .fadeOutLeft { 13 | animation-name: fadeOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRight { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateX(10px); 9 | } 10 | } 11 | 12 | .fadeOutRight { 13 | animation-name: fadeOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUpBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateY(-50px); 9 | } 10 | } 11 | 12 | .fadeOutUpBig { 13 | animation-name: fadeOutUpBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDownBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateY(50px); 9 | } 10 | } 11 | 12 | .fadeOutDownBig { 13 | animation-name: fadeOutDownBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeftBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateX(-50px); 9 | } 10 | } 11 | 12 | .fadeOutLeftBig { 13 | animation-name: fadeOutLeftBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRightBig { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | opacity: 0; 8 | transform: translateX(50px); 9 | } 10 | } 11 | 12 | .fadeOutRightBig { 13 | animation-name: fadeOutRightBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInUp { 2 | 0% { 3 | transform: translateY(100%); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translateY(0); 9 | } 10 | } 11 | 12 | .slideInUp { 13 | animation-name: slideInUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutUp { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translateY(-100%); 9 | } 10 | } 11 | 12 | .slideOutUp { 13 | animation-name: slideOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInDown { 2 | 0% { 3 | transform: translateY(-100%); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translateY(0); 9 | } 10 | } 11 | 12 | .slideInDown { 13 | animation-name: slideInDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInLeft { 2 | 0% { 3 | transform: translateX(-100%); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translateX(0); 9 | } 10 | } 11 | 12 | .slideInLeft { 13 | animation-name: slideInLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutDown { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translateY(100%); 9 | } 10 | } 11 | 12 | .slideOutDown { 13 | animation-name: slideOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutLeft { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translateX(-100%); 9 | } 10 | } 11 | 12 | .slideOutLeft { 13 | animation-name: slideOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutRight { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 100% { 7 | visibility: hidden; 8 | transform: translateX(100%); 9 | } 10 | } 11 | 12 | .slideOutRight { 13 | animation-name: slideOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInRight { 2 | 0% { 3 | transform: translateX(100%); 4 | visibility: visible; 5 | } 6 | 7 | 100% { 8 | transform: translateX(0); 9 | } 10 | } 11 | 12 | .slideInRight { 13 | animation-name: slideInRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOut.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOut { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 50% { 7 | opacity: 0; 8 | transform: scale3d(.3, .3, .3); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | } 14 | } 15 | 16 | .zoomOut { 17 | animation-name: zoomOut; 18 | } 19 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutLeft { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(20px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translate3d(-2000px, 0, 0); 10 | } 11 | } 12 | 13 | .bounceOutLeft { 14 | animation-name: bounceOutLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUp { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 6 | 5% { 7 | opacity: 0; 8 | transform: translateY(10px); 9 | } 10 | 11 | 100% { 12 | opacity: 1; 13 | transform: none; 14 | } 15 | } 16 | 17 | .fadeInUp { 18 | animation-name: fadeInUp; 19 | } 20 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutRight { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(-20px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: translate3d(2000px, 0, 0); 10 | } 11 | } 12 | 13 | .bounceOutRight { 14 | animation-name: bounceOutRight; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDown { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 5% { 6 | opacity: 0; 7 | transform: translateY(-10px); 8 | } 9 | 10 | 100% { 11 | opacity: 1; 12 | transform: none; 13 | } 14 | } 15 | 16 | .fadeInDown { 17 | animation-name: fadeInDown; 18 | } 19 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedOut.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedOut { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 6 | 100% { 7 | transform: translate3d(100%, 0, 0) skewX(30deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .lightSpeedOut { 13 | animation-name: lightSpeedOut; 14 | animation-timing-function: ease-in; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeft { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 6 | 5% { 7 | opacity: 0; 8 | transform: translateX(-10px); 9 | } 10 | 11 | 100% { 12 | opacity: 1; 13 | transform: none; 14 | } 15 | } 16 | 17 | .fadeInLeft { 18 | animation-name: fadeInLeft; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOut.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOut { 2 | 0% { 3 | transform-origin: center; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: center; 9 | transform: rotate3d(0, 0, 1, 200deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOut { 15 | animation-name: rotateOut; 16 | } 17 | -------------------------------------------------------------------------------- /source/attention_seekers/shake.css: -------------------------------------------------------------------------------- 1 | @keyframes shake { 2 | 0%, 100% { 3 | transform: translateX(0); 4 | } 5 | 6 | 10%, 30%, 50%, 70%, 90% { 7 | transform: translateX(-10px); 8 | } 9 | 10 | 20%, 40%, 60%, 80% { 11 | transform: translateX(10px); 12 | } 13 | } 14 | 15 | .shake { 16 | animation-name: shake; 17 | } 18 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDownBig { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 5% { 6 | opacity: 0; 7 | transform: translateY(-50px); 8 | } 9 | 10 | 100% { 11 | opacity: 1; 12 | transform: none; 13 | } 14 | } 15 | 16 | .fadeInDownBig { 17 | animation-name: fadeInDownBig; 18 | } 19 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRight { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 6 | 5% { 7 | opacity: 0; 8 | transform: translateX(10px); 9 | } 10 | 11 | 100% { 12 | opacity: 1; 13 | transform: none; 14 | } 15 | } 16 | 17 | .fadeInRight { 18 | animation-name: fadeInRight; 19 | } 20 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUpBig { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 6 | 5% { 7 | opacity: 0; 8 | transform: translateY(50px); 9 | } 10 | 11 | 100% { 12 | opacity: 1; 13 | transform: none; 14 | } 15 | } 16 | 17 | .fadeInUpBig { 18 | animation-name: fadeInUpBig; 19 | } 20 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeftBig { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 6 | 5% { 7 | opacity: 0; 8 | transform: translateX(-10px); 9 | } 10 | 11 | 100% { 12 | opacity: 1; 13 | transform: none; 14 | } 15 | } 16 | 17 | .fadeInLeftBig { 18 | animation-name: fadeInLeftBig; 19 | } 20 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRightBig { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 6 | 5% { 7 | opacity: 0; 8 | transform: translateX(10px); 9 | } 10 | 11 | 100% { 12 | opacity: 1; 13 | transform: none; 14 | } 15 | } 16 | 17 | .fadeInRightBig { 18 | animation-name: fadeInRightBig; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateIn.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateIn { 2 | 0% { 3 | transform-origin: center; 4 | transform: rotate(-90deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: center; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateIn { 16 | animation-name: rotateIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/specials/rollOut.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollOut { 4 | 0% { 5 | opacity: 1; 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 11 | } 12 | } 13 | 14 | .rollOut { 15 | animation-name: rollOut; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: left bottom; 9 | transform: rotate3d(0, 0, 1, -45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutUpLeft { 15 | animation-name: rotateOutUpLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/attention_seekers/pulse.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes pulse { 4 | 0% { 5 | transform: scale(1); 6 | } 7 | 8 | 50% { 9 | transform: scale(1.05); 10 | } 11 | 12 | 100% { 13 | transform: scale(1); 14 | } 15 | } 16 | 17 | .pulse { 18 | animation-name: pulse; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: left bottom; 9 | transform: rotate3d(0, 0, 1, 45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutDownLeft { 15 | animation-name: rotateOutDownLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: right bottom; 9 | transform: rotate3d(0, 0, 1, 90deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutUpRight { 15 | animation-name: rotateOutUpRight; 16 | } 17 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOut.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOut { 2 | 20% { 3 | transform: scale(.9); 4 | } 5 | 6 | 50%, 55% { 7 | opacity: 1; 8 | transform: scale(1.1); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: scale(.3); 14 | } 15 | } 16 | 17 | .bounceOut { 18 | animation-name: bounceOut; 19 | animation-duration: .75s; 20 | } 21 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | transform-origin: right bottom; 9 | transform: rotate3d(0, 0, 1, -45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutDownRight { 15 | animation-name: rotateOutDownRight; 16 | } 17 | -------------------------------------------------------------------------------- /source/specials/rollIn.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollIn { 4 | 0% { 5 | opacity: 0; 6 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 7 | } 8 | 9 | 100% { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } 14 | 15 | .rollIn { 16 | animation-name: rollIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpLeft { 16 | animation-name: rotateInUpLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutLeft { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: scale(.1) translate3d(-2000px, 0, 0); 10 | transform-origin: left center; 11 | } 12 | } 13 | 14 | .zoomOutLeft { 15 | animation-name: zoomOutLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutUp { 2 | 20% { 3 | transform: translate3d(0, -10px, 0); 4 | } 5 | 6 | 40%, 45% { 7 | opacity: 1; 8 | transform: translate3d(0, 20px, 0); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translate3d(0, -2000px, 0); 14 | } 15 | } 16 | 17 | .bounceOutUp { 18 | animation-name: bounceOutUp; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownLeft { 2 | 0% { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, -45deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: left bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownLeft { 16 | animation-name: rotateInDownLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, -90deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpRight { 16 | animation-name: rotateInUpRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutRight { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | transform: scale(.1) translate3d(2000px, 0, 0); 10 | transform-origin: right center; 11 | } 12 | } 13 | 14 | .zoomOutRight { 15 | animation-name: zoomOutRight; 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.2.1", 4 | "devDependencies": { 5 | "grunt": "~0.4.1", 6 | "grunt-autoprefixer": "~0.4.0", 7 | "grunt-contrib-watch": "~0.5.3", 8 | "grunt-contrib-concat": "~0.3.0", 9 | "grunt-contrib-cssmin": "~0.8.0", 10 | "load-grunt-tasks": "~0.2.0" 11 | }, 12 | "spm": { 13 | "main": "./animate.css" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutDown { 2 | 20% { 3 | transform: translate3d(0, 10px, 0); 4 | } 5 | 6 | 40%, 45% { 7 | opacity: 1; 8 | transform: translate3d(0, -20px, 0); 9 | } 10 | 11 | 100% { 12 | opacity: 0; 13 | transform: translate3d(0, 2000px, 0); 14 | } 15 | } 16 | 17 | .bounceOutDown { 18 | animation-name: bounceOutDown; 19 | } 20 | -------------------------------------------------------------------------------- /source/flippers/flipOutY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutY { 2 | 0% { 3 | transform: perspective(400px) rotateY(90deg);; 4 | opacity: 1; 5 | } 6 | 7 | 8 | 100% { 9 | transform: perspective(400px) rotateY(90deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .flipOutY { 15 | backface-visibility: visible !important; 16 | animation-name: flipOutY; 17 | animation-duration: .75s; 18 | } 19 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownRight { 2 | 0% { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | 100% { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownRight { 16 | animation-name: rotateInDownRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/flippers/flipOutX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutX { 2 | 0% { 3 | transform: perspective(400px) rotateX(0deg); 4 | opacity: 1; 5 | } 6 | 7 | 8 | 9 | 100% { 10 | transform: perspective(400px) rotateX(90deg); 11 | opacity: 0; 12 | } 13 | } 14 | 15 | .flipOutX { 16 | animation-name: flipOutX; 17 | animation-duration: .75s; 18 | backface-visibility: visible !important; 19 | } 20 | -------------------------------------------------------------------------------- /source/attention_seekers/swing.css: -------------------------------------------------------------------------------- 1 | @keyframes swing { 2 | 20% { 3 | transform: rotate(15deg); 4 | } 5 | 6 | 40% { 7 | transform: rotate(-10deg); 8 | } 9 | 10 | 60% { 11 | transform: rotate(5deg); 12 | } 13 | 14 | 80% { 15 | transform: rotate(-5deg); 16 | } 17 | 18 | 100% { 19 | transform: rotate(0deg); 20 | } 21 | } 22 | 23 | .swing { 24 | transform-origin: top center; 25 | animation-name: swing; 26 | } 27 | -------------------------------------------------------------------------------- /source/attention_seekers/tada.css: -------------------------------------------------------------------------------- 1 | @keyframes tada { 2 | 0% { 3 | transform: scale(1); 4 | } 5 | 6 | 10%, 20% { 7 | transform: scale(.9) rotate(-3deg); 8 | } 9 | 10 | 30%, 50%, 70%, 90% { 11 | transform: scale(1.1) rotate(3deg); 12 | } 13 | 14 | 40%, 60%, 80% { 15 | transform: scale(1.1) rotate(-3deg); 16 | } 17 | 18 | 100% { 19 | transform: scale(1); 20 | } 21 | } 22 | 23 | .tada { 24 | animation-name: tada; 25 | } 26 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInUp { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInUp { 16 | animation-name: zoomInUp; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInDown { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInDown { 16 | animation-name: zoomInDown; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInLeft { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInLeft { 16 | animation-name: zoomInLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedIn.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedIn { 2 | 0% { 3 | transform: translate3d(100%, 0, 0) skewX(-30deg); 4 | opacity: 0; 5 | } 6 | 7 | 60% { 8 | transform: skewX(20deg); 9 | opacity: 1; 10 | } 11 | 12 | 80% { 13 | transform: skewX(-5deg); 14 | opacity: 1; 15 | } 16 | 17 | 100% { 18 | transform: none; 19 | opacity: 1; 20 | } 21 | } 22 | 23 | .lightSpeedIn { 24 | animation-name: lightSpeedIn; 25 | animation-timing-function: ease-out; 26 | } 27 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInRight { 2 | 0% { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInRight { 16 | animation-name: zoomInRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutUp { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 13 | } 14 | } 15 | 16 | .zoomOutUp { 17 | animation-name: zoomOutUp; 18 | } 19 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutDown { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 100% { 9 | opacity: 0; 10 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 13 | } 14 | } 15 | 16 | .zoomOutDown { 17 | animation-name: zoomOutDown; 18 | } 19 | -------------------------------------------------------------------------------- /source/_base.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | Animate.css - http://daneden.me/animate 4 | Licensed under the MIT license - http://opensource.org/licenses/MIT 5 | 6 | Copyright (c) 2014 Daniel Eden 7 | Custom version 2014-11-21T22:45:26+08:00 8 | 9 | */ 10 | 11 | .animated { 12 | animation-duration: 1s; 13 | animation-fill-mode: both; 14 | } 15 | 16 | .animated.infinite { 17 | animation-iteration-count: infinite; 18 | } 19 | 20 | .animated.hinge { 21 | animation-duration: 2s; 22 | } 23 | 24 | .animated.fast{ 25 | animation-duration: 0.2s; 26 | } 27 | -------------------------------------------------------------------------------- /source/attention_seekers/rubberBand.css: -------------------------------------------------------------------------------- 1 | @keyframes rubberBand { 2 | 0% { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 30% { 7 | transform: scale3d(1.25, 0.75, 1); 8 | } 9 | 10 | 40% { 11 | transform: scale3d(0.75, 1.25, 1); 12 | } 13 | 14 | 50% { 15 | transform: scale3d(1.15, 0.85, 1); 16 | } 17 | 18 | 65% { 19 | transform: scale3d(.95, 1.05, 1); 20 | } 21 | 22 | 75% { 23 | transform: scale3d(1.05, .95, 1); 24 | } 25 | 26 | 100% { 27 | transform: scale3d(1, 1, 1); 28 | } 29 | } 30 | 31 | .rubberBand { 32 | animation-name: rubberBand; 33 | } 34 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInDown { 2 | 0%, 60%, 75%, 90%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(0, -3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, 25px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, -10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, 5px, 0); 22 | } 23 | 24 | 100% { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInDown { 30 | animation-name: bounceInDown; 31 | } 32 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInLeft { 2 | 0%, 60%, 75%, 90%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(-3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(-10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(5px, 0, 0); 22 | } 23 | 24 | 100% { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInLeft { 30 | animation-name: bounceInLeft; 31 | } 32 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInRight { 2 | 0%, 60%, 75%, 90%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(-25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(-5px, 0, 0); 22 | } 23 | 24 | 100% { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInRight { 30 | animation-name: bounceInRight; 31 | } 32 | -------------------------------------------------------------------------------- /source/specials/hinge.css: -------------------------------------------------------------------------------- 1 | @keyframes hinge { 2 | 0% { 3 | transform-origin: top left; 4 | animation-timing-function: ease-in-out; 5 | } 6 | 7 | 20%, 60% { 8 | transform: rotate3d(0, 0, 1, 80deg); 9 | transform-origin: top left; 10 | animation-timing-function: ease-in-out; 11 | } 12 | 13 | 40%, 80% { 14 | transform: rotate3d(0, 0, 1, 60deg); 15 | transform-origin: top left; 16 | animation-timing-function: ease-in-out; 17 | opacity: 1; 18 | } 19 | 20 | 100% { 21 | transform: translate3d(0, 700px, 0); 22 | opacity: 0; 23 | } 24 | } 25 | 26 | .hinge { 27 | animation-name: hinge; 28 | } 29 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInUp { 2 | 0%, 60%, 75%, 90%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(0, 3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, -20px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, 10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, -5px, 0); 22 | } 23 | 24 | 100% { 25 | transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | 29 | .bounceInUp { 30 | animation-name: bounceInUp; 31 | } 32 | -------------------------------------------------------------------------------- /source/attention_seekers/bounce.css: -------------------------------------------------------------------------------- 1 | @keyframes bounce { 2 | 0%, 20%, 53%, 80%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | transform: translateY(0); 5 | } 6 | 7 | 40%, 43% { 8 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | transform: translateY(-30px); 10 | } 11 | 12 | 70% { 13 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 14 | transform: translateY(-15px); 15 | } 16 | 17 | 90% { 18 | transform: translateY(-4px); 19 | } 20 | } 21 | 22 | .bounce { 23 | animation-name: bounce; 24 | transform-origin: center bottom; 25 | } 26 | -------------------------------------------------------------------------------- /source/flippers/flipInX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInX { 2 | 0% { 3 | transform: perspective(400px) rotateX(90deg); 4 | transition-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotateX(-10deg); 10 | transition-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotateX(10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotateX(0deg); 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInX { 28 | backface-visibility: visible !important; 29 | animation-name: flipInX; 30 | } 31 | -------------------------------------------------------------------------------- /source/flippers/flipInY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInY { 2 | 0% { 3 | transform: perspective(400px) rotateY(90deg); 4 | transition-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotateY(-10deg); 10 | transition-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotateY(10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotateY(0deg); 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInY { 28 | backface-visibility: visible !important; 29 | animation-name: flipInY; 30 | } 31 | -------------------------------------------------------------------------------- /source/attention_seekers/wobble.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes wobble { 4 | 0% { 5 | transform: none; 6 | } 7 | 8 | 15% { 9 | transform: translateX(-25%) rotate(-5deg); 10 | } 11 | 12 | 30% { 13 | transform: translateX(20%) rotate(3deg); 14 | } 15 | 16 | 45% { 17 | transform: translateX(-15%) rotate(-3deg); 18 | } 19 | 20 | 60% { 21 | transform: translateX(10%) rotate(2deg); 22 | } 23 | 24 | 75% { 25 | transform: translateX(-5%) rotate(-1deg); 26 | } 27 | 28 | 100% { 29 | transform: none; 30 | } 31 | } 32 | 33 | .wobble { 34 | animation-name: wobble; 35 | } 36 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceIn.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceIn { 2 | 0%, 20%, 40%, 60%, 80%, 100% { 3 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: scale(.3); 9 | } 10 | 11 | 20% { 12 | transform: scale(1.1); 13 | } 14 | 15 | 40% { 16 | transform: scale(.9); 17 | } 18 | 19 | 60% { 20 | opacity: 1; 21 | transform: scale(1.03); 22 | } 23 | 24 | 80% { 25 | transform: scale(.97); 26 | } 27 | 28 | 100% { 29 | opacity: 1; 30 | transform: scale(1); 31 | } 32 | } 33 | 34 | .bounceIn { 35 | animation-name: bounceIn; 36 | animation-duration: .75s; 37 | } 38 | -------------------------------------------------------------------------------- /source/flippers/flip.css: -------------------------------------------------------------------------------- 1 | @keyframes flip { 2 | 0% { 3 | transform: perspective(400px) rotateY(0); 4 | animation-timing-function: ease-out; 5 | } 6 | 7 | 40% { 8 | transform: perspective(400px) translateZ(150px) rotateY(170deg); 9 | animation-timing-function: ease-out; 10 | } 11 | 12 | 50% { 13 | transform: perspective(400px) translateZ(150px) rotateY(190deg); 14 | animation-timing-function: ease-in; 15 | } 16 | 17 | 80% { 18 | transform: perspective(400px) rotateY(360deg) scale(.95); 19 | animation-timing-function: ease-in; 20 | } 21 | 22 | 100% { 23 | transform: perspective(400px) scale(1); 24 | animation-timing-function: ease-in; 25 | } 26 | } 27 | 28 | .animated.flip { 29 | backface-visibility: visible; 30 | animation-name: flip; 31 | } 32 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | require('load-grunt-tasks')(grunt); 4 | 5 | var concatAnim; 6 | 7 | grunt.initConfig({ 8 | 9 | pkg: grunt.file.readJSON('package.json'), 10 | 11 | concat: { 12 | dist: { 13 | src: [ 'source/_base.css', 'source/**/*.css' ], // _base.css required for .animated helper class 14 | dest: 'animate.css' 15 | } 16 | }, 17 | 18 | autoprefixer: { // https://github.com/nDmitry/grunt-autoprefixer 19 | options: { 20 | browsers: ['last 3 versions', 'bb 10', 'android 3'] 21 | }, 22 | no_dest: { 23 | src: 'animate.css' // output file 24 | } 25 | }, 26 | 27 | cssmin: { 28 | minify: { 29 | src: ['animate.css'], 30 | dest: 'animate.min.css', 31 | } 32 | }, 33 | 34 | watch: { 35 | css: { 36 | files: [ 'source/**/*', 'animate-config.json' ], 37 | tasks: ['default'] 38 | } 39 | } 40 | 41 | }); 42 | 43 | // fuction to perform custom task 44 | concatAnim = function () { 45 | 46 | var categories = grunt.file.readJSON('animate-config.json'), 47 | category, files, file, 48 | target = [ 'source/_base.css' ], 49 | count = 0; 50 | 51 | for ( category in categories ) { 52 | if ( categories.hasOwnProperty(category) ) { 53 | files = categories[category] 54 | for (file in files) { 55 | if ( files.hasOwnProperty(file) && files[file] ) { 56 | target.push('source/' + category + '/' + file + '.css'); 57 | count += 1; 58 | } 59 | } 60 | } 61 | } 62 | 63 | if (!count) { 64 | grunt.log.writeln('No animations activated.'); 65 | } else { 66 | grunt.log.writeln(count + (count > 1 ? ' animations' : ' animation') + ' activated.'); 67 | } 68 | 69 | grunt.config('concat', { 'animate.css': target }); 70 | grunt.task.run('concat'); 71 | 72 | }; 73 | 74 | // register task 75 | grunt.registerTask('concat-anim', 'Concatenates activated animations', concatAnim); // custom task 76 | grunt.registerTask('default', ['concat-anim', 'autoprefixer', 'cssmin']); 77 | grunt.registerTask('dev', ['watch']); 78 | 79 | }; 80 | -------------------------------------------------------------------------------- /animate-config.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "attention_seekers": { 4 | "bounce": true, 5 | "flash": true, 6 | "pulse": true, 7 | "rubberBand": true, 8 | "shake": true, 9 | "swing": true, 10 | "tada": true, 11 | "wobble": true 12 | }, 13 | 14 | "bouncing_entrances": { 15 | "bounceIn": true, 16 | "bounceInDown": false, 17 | "bounceInLeft": false, 18 | "bounceInRight": false, 19 | "bounceInUp": false 20 | }, 21 | 22 | "bouncing_exits": { 23 | "bounceOut": true, 24 | "bounceOutDown": false, 25 | "bounceOutLeft": false, 26 | "bounceOutRight": false, 27 | "bounceOutUp": false 28 | }, 29 | 30 | "fading_entrances": { 31 | "fadeIn": true, 32 | "fadeInDown": true, 33 | "fadeInDownBig": true, 34 | "fadeInLeft": true, 35 | "fadeInLeftBig": true, 36 | "fadeInRight": true, 37 | "fadeInRightBig": true, 38 | "fadeInUp": true, 39 | "fadeInUpBig": true 40 | }, 41 | 42 | "fading_exits": { 43 | "fadeOut": true, 44 | "fadeOutDown": true, 45 | "fadeOutDownBig": true, 46 | "fadeOutLeft": true, 47 | "fadeOutLeftBig": true, 48 | "fadeOutRight": true, 49 | "fadeOutRightBig": true, 50 | "fadeOutUp": true, 51 | "fadeOutUpBig": true 52 | }, 53 | 54 | "flippers": { 55 | "flip": true, 56 | "flipInX": true, 57 | "flipInY": true, 58 | "flipOutX": true, 59 | "flipOutY": true 60 | }, 61 | 62 | "lightspeed": { 63 | "lightSpeedIn": false, 64 | "lightSpeedOut": false 65 | }, 66 | 67 | "rotating_entrances": { 68 | "rotateIn": true, 69 | "rotateInDownLeft": false, 70 | "rotateInDownRight": false, 71 | "rotateInUpLeft": false, 72 | "rotateInUpRight": false 73 | }, 74 | 75 | "rotating_exits": { 76 | "rotateOut": true, 77 | "rotateOutDownLeft": false, 78 | "rotateOutDownRight": false, 79 | "rotateOutUpLeft": false, 80 | "rotateOutUpRight": false 81 | }, 82 | 83 | "specials": { 84 | "hinge": false, 85 | "rollIn": false, 86 | "rollOut": false 87 | }, 88 | 89 | "zooming_entrances": { 90 | "zoomIn": true, 91 | "zoomInDown": false, 92 | "zoomInLeft": false, 93 | "zoomInRight": false, 94 | "zoomInUp": false 95 | }, 96 | 97 | "zooming_exits": { 98 | "zoomOut": true, 99 | "zoomOutDown": false, 100 | "zoomOutLeft": false, 101 | "zoomOutRight": false, 102 | "zoomOutUp": false 103 | }, 104 | 105 | "sliding_entrances": { 106 | "slideInDown": false, 107 | "slideInLeft": false, 108 | "slideInRight": false, 109 | "slideInUp": false 110 | }, 111 | 112 | "sliding_exits": { 113 | "slideOutDown": false, 114 | "slideOutLeft": false, 115 | "slideOutRight": false, 116 | "slideOutUp": false 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Animate.css 2 | *Just-add-water CSS animation* 3 | 4 | `animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. 5 | 6 | ##Usage 7 | To use animate.css in your website, simply drop the stylesheet into your document's ``, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super! 8 | 9 | ```html 10 | 11 | 12 | 13 | ``` 14 | 15 | You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease: 16 | 17 | ```javascript 18 | $('#yourElement').addClass('animated bounceOutLeft'); 19 | ``` 20 | 21 | You can also detect when an animation ends: 22 | 23 | 28 | 29 | ```javascript 30 | $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); 31 | ``` 32 | 33 | **Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/). 34 | 35 | You can change the duration of your animations, add a delay or change the number of times that it plays: 36 | 37 | ```css 38 | #yourElement { 39 | -vendor-animation-duration: 3s; 40 | -vendor-animation-delay: 2s; 41 | -vendor-animation-iteration-count: infinite; 42 | } 43 | ``` 44 | 45 | *Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)* 46 | 47 | ## Custom Builds 48 | Animate.css is powered by [Grunt](http://gruntjs.com), and you can create custom builds pretty easily. First of all, you’ll need Grunt and all other dependencies: 49 | 50 | ```sh 51 | $ cd path/to/animate.css/ 52 | $ sudo npm install 53 | ``` 54 | 55 | Next, run `grunt watch` to watch for changes and compile your custom builds. For example, if you want only some of the the “attention seekers”, simply edit the `animate-config.json` file to select only the animations you want to use. 56 | 57 | ```javascript 58 | "attention_seekers": { 59 | "bounce": true, 60 | "flash": false, 61 | "pulse": false, 62 | "shake": true, 63 | "swing": true, 64 | "tada": true, 65 | "wobble": true 66 | } 67 | ``` 68 | 69 | ## License 70 | Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT) 71 | 72 | ## Contributing 73 | Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). That last one is important. 74 | -------------------------------------------------------------------------------- /animate.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | Animate.css - http://daneden.me/animate 3 | Licensed under the MIT license - http://opensource.org/licenses/MIT 4 | 5 | Copyright (c) 2014 Daniel Eden 6 | Custom version 2014-11-21T22:45:26+08:00 7 | 8 | */.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.fast{-webkit-animation-duration:.2s;animation-duration:.2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translateY(0);transform:translateY(0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translateY(-30px);transform:translateY(-30px)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translateY(-15px);transform:translateY(-15px)}90%{-webkit-transform:translateY(-4px);transform:translateY(-4px)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}90%{-webkit-transform:translateY(-4px);-ms-transform:translateY(-4px);transform:translateY(-4px)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);-ms-transform:scale(.9) rotate(-3deg);transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translateX(-25%) rotate(-5deg);-ms-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);-ms-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);-ms-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);-ms-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);-ms-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}20%{-webkit-transform:scale(1.1);transform:scale(1.1)}40%{-webkit-transform:scale(.9);transform:scale(.9)}60%{opacity:1;-webkit-transform:scale(1.03);transform:scale(1.03)}80%{-webkit-transform:scale(.97);transform:scale(.97)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}20%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}40%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}60%{opacity:1;-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)}80%{-webkit-transform:scale(.97);-ms-transform:scale(.97);transform:scale(.97)}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale(.9);transform:scale(.9)}50%,55%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}@keyframes bounceOut{20%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}50%,55%{opacity:1;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0}5%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0}5%{opacity:0;-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0}5%{opacity:0;-webkit-transform:translateY(-50px);transform:translateY(-50px)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0}5%{opacity:0;-webkit-transform:translateY(-50px);-ms-transform:translateY(-50px);transform:translateY(-50px)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0}5%{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0}5%{opacity:0;-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0}5%{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0}5%{opacity:0;-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0}5%{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0}5%{opacity:0;-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0}5%{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0}5%{opacity:0;-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0}5%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0}5%{opacity:0;-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0}5%{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0}5%{opacity:0;-webkit-transform:translateY(50px);-ms-transform:translateY(50px);transform:translateY(50px)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translateY(50px);-ms-transform:translateY(50px);transform:translateY(50px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translateX(-50px);transform:translateX(-50px)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translateX(-50px);-ms-transform:translateX(-50px);transform:translateX(-50px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translateX(50px);transform:translateX(50px)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translateX(50px);-ms-transform:translateX(50px);transform:translateX(50px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translateY(-50px);transform:translateY(-50px)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translateY(-50px);-ms-transform:translateY(-50px);transform:translateY(-50px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg);transform:perspective(400px) translateZ(150px) rotateY(190deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) scale(1);transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-ms-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg);-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg);transform:perspective(400px) translateZ(150px) rotateY(190deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);-ms-transform:perspective(400px) rotateY(360deg) scale(.95);transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) scale(1);-ms-transform:perspective(400px) scale(1);transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);-ms-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);-ms-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);-ms-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);-ms-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut} -------------------------------------------------------------------------------- /animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | Animate.css - http://daneden.me/animate 5 | Licensed under the MIT license - http://opensource.org/licenses/MIT 6 | 7 | Copyright (c) 2014 Daniel Eden 8 | Custom version 2014-11-21T22:45:26+08:00 9 | 10 | */ 11 | 12 | .animated { 13 | -webkit-animation-duration: 1s; 14 | animation-duration: 1s; 15 | -webkit-animation-fill-mode: both; 16 | animation-fill-mode: both; 17 | } 18 | 19 | .animated.infinite { 20 | -webkit-animation-iteration-count: infinite; 21 | animation-iteration-count: infinite; 22 | } 23 | 24 | .animated.hinge { 25 | -webkit-animation-duration: 2s; 26 | animation-duration: 2s; 27 | } 28 | 29 | .animated.fast { 30 | -webkit-animation-duration: 0.2s; 31 | animation-duration: 0.2s; 32 | } 33 | 34 | @-webkit-keyframes bounce { 35 | 0%, 20%, 53%, 80%, 100% { 36 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 37 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 38 | -webkit-transform: translateY(0); 39 | transform: translateY(0); 40 | } 41 | 42 | 40%, 43% { 43 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 44 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 45 | -webkit-transform: translateY(-30px); 46 | transform: translateY(-30px); 47 | } 48 | 49 | 70% { 50 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 51 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 52 | -webkit-transform: translateY(-15px); 53 | transform: translateY(-15px); 54 | } 55 | 56 | 90% { 57 | -webkit-transform: translateY(-4px); 58 | transform: translateY(-4px); 59 | } 60 | } 61 | 62 | @keyframes bounce { 63 | 0%, 20%, 53%, 80%, 100% { 64 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 65 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 66 | -webkit-transform: translateY(0); 67 | -ms-transform: translateY(0); 68 | transform: translateY(0); 69 | } 70 | 71 | 40%, 43% { 72 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 73 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 74 | -webkit-transform: translateY(-30px); 75 | -ms-transform: translateY(-30px); 76 | transform: translateY(-30px); 77 | } 78 | 79 | 70% { 80 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 81 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 82 | -webkit-transform: translateY(-15px); 83 | -ms-transform: translateY(-15px); 84 | transform: translateY(-15px); 85 | } 86 | 87 | 90% { 88 | -webkit-transform: translateY(-4px); 89 | -ms-transform: translateY(-4px); 90 | transform: translateY(-4px); 91 | } 92 | } 93 | 94 | .bounce { 95 | -webkit-animation-name: bounce; 96 | animation-name: bounce; 97 | -webkit-transform-origin: center bottom; 98 | -ms-transform-origin: center bottom; 99 | transform-origin: center bottom; 100 | } 101 | 102 | @-webkit-keyframes flash { 103 | 0%, 50%, 100% { 104 | opacity: 1; 105 | } 106 | 107 | 25%, 75% { 108 | opacity: 0; 109 | } 110 | } 111 | 112 | @keyframes flash { 113 | 0%, 50%, 100% { 114 | opacity: 1; 115 | } 116 | 117 | 25%, 75% { 118 | opacity: 0; 119 | } 120 | } 121 | 122 | .flash { 123 | -webkit-animation-name: flash; 124 | animation-name: flash; 125 | } 126 | 127 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 128 | 129 | @-webkit-keyframes pulse { 130 | 0% { 131 | -webkit-transform: scale(1); 132 | transform: scale(1); 133 | } 134 | 135 | 50% { 136 | -webkit-transform: scale(1.05); 137 | transform: scale(1.05); 138 | } 139 | 140 | 100% { 141 | -webkit-transform: scale(1); 142 | transform: scale(1); 143 | } 144 | } 145 | 146 | @keyframes pulse { 147 | 0% { 148 | -webkit-transform: scale(1); 149 | -ms-transform: scale(1); 150 | transform: scale(1); 151 | } 152 | 153 | 50% { 154 | -webkit-transform: scale(1.05); 155 | -ms-transform: scale(1.05); 156 | transform: scale(1.05); 157 | } 158 | 159 | 100% { 160 | -webkit-transform: scale(1); 161 | -ms-transform: scale(1); 162 | transform: scale(1); 163 | } 164 | } 165 | 166 | .pulse { 167 | -webkit-animation-name: pulse; 168 | animation-name: pulse; 169 | } 170 | 171 | @-webkit-keyframes rubberBand { 172 | 0% { 173 | -webkit-transform: scale3d(1, 1, 1); 174 | transform: scale3d(1, 1, 1); 175 | } 176 | 177 | 30% { 178 | -webkit-transform: scale3d(1.25, 0.75, 1); 179 | transform: scale3d(1.25, 0.75, 1); 180 | } 181 | 182 | 40% { 183 | -webkit-transform: scale3d(0.75, 1.25, 1); 184 | transform: scale3d(0.75, 1.25, 1); 185 | } 186 | 187 | 50% { 188 | -webkit-transform: scale3d(1.15, 0.85, 1); 189 | transform: scale3d(1.15, 0.85, 1); 190 | } 191 | 192 | 65% { 193 | -webkit-transform: scale3d(.95, 1.05, 1); 194 | transform: scale3d(.95, 1.05, 1); 195 | } 196 | 197 | 75% { 198 | -webkit-transform: scale3d(1.05, .95, 1); 199 | transform: scale3d(1.05, .95, 1); 200 | } 201 | 202 | 100% { 203 | -webkit-transform: scale3d(1, 1, 1); 204 | transform: scale3d(1, 1, 1); 205 | } 206 | } 207 | 208 | @keyframes rubberBand { 209 | 0% { 210 | -webkit-transform: scale3d(1, 1, 1); 211 | -ms-transform: scale3d(1, 1, 1); 212 | transform: scale3d(1, 1, 1); 213 | } 214 | 215 | 30% { 216 | -webkit-transform: scale3d(1.25, 0.75, 1); 217 | -ms-transform: scale3d(1.25, 0.75, 1); 218 | transform: scale3d(1.25, 0.75, 1); 219 | } 220 | 221 | 40% { 222 | -webkit-transform: scale3d(0.75, 1.25, 1); 223 | -ms-transform: scale3d(0.75, 1.25, 1); 224 | transform: scale3d(0.75, 1.25, 1); 225 | } 226 | 227 | 50% { 228 | -webkit-transform: scale3d(1.15, 0.85, 1); 229 | -ms-transform: scale3d(1.15, 0.85, 1); 230 | transform: scale3d(1.15, 0.85, 1); 231 | } 232 | 233 | 65% { 234 | -webkit-transform: scale3d(.95, 1.05, 1); 235 | -ms-transform: scale3d(.95, 1.05, 1); 236 | transform: scale3d(.95, 1.05, 1); 237 | } 238 | 239 | 75% { 240 | -webkit-transform: scale3d(1.05, .95, 1); 241 | -ms-transform: scale3d(1.05, .95, 1); 242 | transform: scale3d(1.05, .95, 1); 243 | } 244 | 245 | 100% { 246 | -webkit-transform: scale3d(1, 1, 1); 247 | -ms-transform: scale3d(1, 1, 1); 248 | transform: scale3d(1, 1, 1); 249 | } 250 | } 251 | 252 | .rubberBand { 253 | -webkit-animation-name: rubberBand; 254 | animation-name: rubberBand; 255 | } 256 | 257 | @-webkit-keyframes shake { 258 | 0%, 100% { 259 | -webkit-transform: translateX(0); 260 | transform: translateX(0); 261 | } 262 | 263 | 10%, 30%, 50%, 70%, 90% { 264 | -webkit-transform: translateX(-10px); 265 | transform: translateX(-10px); 266 | } 267 | 268 | 20%, 40%, 60%, 80% { 269 | -webkit-transform: translateX(10px); 270 | transform: translateX(10px); 271 | } 272 | } 273 | 274 | @keyframes shake { 275 | 0%, 100% { 276 | -webkit-transform: translateX(0); 277 | -ms-transform: translateX(0); 278 | transform: translateX(0); 279 | } 280 | 281 | 10%, 30%, 50%, 70%, 90% { 282 | -webkit-transform: translateX(-10px); 283 | -ms-transform: translateX(-10px); 284 | transform: translateX(-10px); 285 | } 286 | 287 | 20%, 40%, 60%, 80% { 288 | -webkit-transform: translateX(10px); 289 | -ms-transform: translateX(10px); 290 | transform: translateX(10px); 291 | } 292 | } 293 | 294 | .shake { 295 | -webkit-animation-name: shake; 296 | animation-name: shake; 297 | } 298 | 299 | @-webkit-keyframes swing { 300 | 20% { 301 | -webkit-transform: rotate(15deg); 302 | transform: rotate(15deg); 303 | } 304 | 305 | 40% { 306 | -webkit-transform: rotate(-10deg); 307 | transform: rotate(-10deg); 308 | } 309 | 310 | 60% { 311 | -webkit-transform: rotate(5deg); 312 | transform: rotate(5deg); 313 | } 314 | 315 | 80% { 316 | -webkit-transform: rotate(-5deg); 317 | transform: rotate(-5deg); 318 | } 319 | 320 | 100% { 321 | -webkit-transform: rotate(0deg); 322 | transform: rotate(0deg); 323 | } 324 | } 325 | 326 | @keyframes swing { 327 | 20% { 328 | -webkit-transform: rotate(15deg); 329 | -ms-transform: rotate(15deg); 330 | transform: rotate(15deg); 331 | } 332 | 333 | 40% { 334 | -webkit-transform: rotate(-10deg); 335 | -ms-transform: rotate(-10deg); 336 | transform: rotate(-10deg); 337 | } 338 | 339 | 60% { 340 | -webkit-transform: rotate(5deg); 341 | -ms-transform: rotate(5deg); 342 | transform: rotate(5deg); 343 | } 344 | 345 | 80% { 346 | -webkit-transform: rotate(-5deg); 347 | -ms-transform: rotate(-5deg); 348 | transform: rotate(-5deg); 349 | } 350 | 351 | 100% { 352 | -webkit-transform: rotate(0deg); 353 | -ms-transform: rotate(0deg); 354 | transform: rotate(0deg); 355 | } 356 | } 357 | 358 | .swing { 359 | -webkit-transform-origin: top center; 360 | -ms-transform-origin: top center; 361 | transform-origin: top center; 362 | -webkit-animation-name: swing; 363 | animation-name: swing; 364 | } 365 | 366 | @-webkit-keyframes tada { 367 | 0% { 368 | -webkit-transform: scale(1); 369 | transform: scale(1); 370 | } 371 | 372 | 10%, 20% { 373 | -webkit-transform: scale(.9) rotate(-3deg); 374 | transform: scale(.9) rotate(-3deg); 375 | } 376 | 377 | 30%, 50%, 70%, 90% { 378 | -webkit-transform: scale(1.1) rotate(3deg); 379 | transform: scale(1.1) rotate(3deg); 380 | } 381 | 382 | 40%, 60%, 80% { 383 | -webkit-transform: scale(1.1) rotate(-3deg); 384 | transform: scale(1.1) rotate(-3deg); 385 | } 386 | 387 | 100% { 388 | -webkit-transform: scale(1); 389 | transform: scale(1); 390 | } 391 | } 392 | 393 | @keyframes tada { 394 | 0% { 395 | -webkit-transform: scale(1); 396 | -ms-transform: scale(1); 397 | transform: scale(1); 398 | } 399 | 400 | 10%, 20% { 401 | -webkit-transform: scale(.9) rotate(-3deg); 402 | -ms-transform: scale(.9) rotate(-3deg); 403 | transform: scale(.9) rotate(-3deg); 404 | } 405 | 406 | 30%, 50%, 70%, 90% { 407 | -webkit-transform: scale(1.1) rotate(3deg); 408 | -ms-transform: scale(1.1) rotate(3deg); 409 | transform: scale(1.1) rotate(3deg); 410 | } 411 | 412 | 40%, 60%, 80% { 413 | -webkit-transform: scale(1.1) rotate(-3deg); 414 | -ms-transform: scale(1.1) rotate(-3deg); 415 | transform: scale(1.1) rotate(-3deg); 416 | } 417 | 418 | 100% { 419 | -webkit-transform: scale(1); 420 | -ms-transform: scale(1); 421 | transform: scale(1); 422 | } 423 | } 424 | 425 | .tada { 426 | -webkit-animation-name: tada; 427 | animation-name: tada; 428 | } 429 | 430 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 431 | 432 | @-webkit-keyframes wobble { 433 | 0% { 434 | -webkit-transform: none; 435 | transform: none; 436 | } 437 | 438 | 15% { 439 | -webkit-transform: translateX(-25%) rotate(-5deg); 440 | transform: translateX(-25%) rotate(-5deg); 441 | } 442 | 443 | 30% { 444 | -webkit-transform: translateX(20%) rotate(3deg); 445 | transform: translateX(20%) rotate(3deg); 446 | } 447 | 448 | 45% { 449 | -webkit-transform: translateX(-15%) rotate(-3deg); 450 | transform: translateX(-15%) rotate(-3deg); 451 | } 452 | 453 | 60% { 454 | -webkit-transform: translateX(10%) rotate(2deg); 455 | transform: translateX(10%) rotate(2deg); 456 | } 457 | 458 | 75% { 459 | -webkit-transform: translateX(-5%) rotate(-1deg); 460 | transform: translateX(-5%) rotate(-1deg); 461 | } 462 | 463 | 100% { 464 | -webkit-transform: none; 465 | transform: none; 466 | } 467 | } 468 | 469 | @keyframes wobble { 470 | 0% { 471 | -webkit-transform: none; 472 | -ms-transform: none; 473 | transform: none; 474 | } 475 | 476 | 15% { 477 | -webkit-transform: translateX(-25%) rotate(-5deg); 478 | -ms-transform: translateX(-25%) rotate(-5deg); 479 | transform: translateX(-25%) rotate(-5deg); 480 | } 481 | 482 | 30% { 483 | -webkit-transform: translateX(20%) rotate(3deg); 484 | -ms-transform: translateX(20%) rotate(3deg); 485 | transform: translateX(20%) rotate(3deg); 486 | } 487 | 488 | 45% { 489 | -webkit-transform: translateX(-15%) rotate(-3deg); 490 | -ms-transform: translateX(-15%) rotate(-3deg); 491 | transform: translateX(-15%) rotate(-3deg); 492 | } 493 | 494 | 60% { 495 | -webkit-transform: translateX(10%) rotate(2deg); 496 | -ms-transform: translateX(10%) rotate(2deg); 497 | transform: translateX(10%) rotate(2deg); 498 | } 499 | 500 | 75% { 501 | -webkit-transform: translateX(-5%) rotate(-1deg); 502 | -ms-transform: translateX(-5%) rotate(-1deg); 503 | transform: translateX(-5%) rotate(-1deg); 504 | } 505 | 506 | 100% { 507 | -webkit-transform: none; 508 | -ms-transform: none; 509 | transform: none; 510 | } 511 | } 512 | 513 | .wobble { 514 | -webkit-animation-name: wobble; 515 | animation-name: wobble; 516 | } 517 | 518 | @-webkit-keyframes bounceIn { 519 | 0%, 20%, 40%, 60%, 80%, 100% { 520 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 521 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 522 | } 523 | 524 | 0% { 525 | opacity: 0; 526 | -webkit-transform: scale(.3); 527 | transform: scale(.3); 528 | } 529 | 530 | 20% { 531 | -webkit-transform: scale(1.1); 532 | transform: scale(1.1); 533 | } 534 | 535 | 40% { 536 | -webkit-transform: scale(.9); 537 | transform: scale(.9); 538 | } 539 | 540 | 60% { 541 | opacity: 1; 542 | -webkit-transform: scale(1.03); 543 | transform: scale(1.03); 544 | } 545 | 546 | 80% { 547 | -webkit-transform: scale(.97); 548 | transform: scale(.97); 549 | } 550 | 551 | 100% { 552 | opacity: 1; 553 | -webkit-transform: scale(1); 554 | transform: scale(1); 555 | } 556 | } 557 | 558 | @keyframes bounceIn { 559 | 0%, 20%, 40%, 60%, 80%, 100% { 560 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 561 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 562 | } 563 | 564 | 0% { 565 | opacity: 0; 566 | -webkit-transform: scale(.3); 567 | -ms-transform: scale(.3); 568 | transform: scale(.3); 569 | } 570 | 571 | 20% { 572 | -webkit-transform: scale(1.1); 573 | -ms-transform: scale(1.1); 574 | transform: scale(1.1); 575 | } 576 | 577 | 40% { 578 | -webkit-transform: scale(.9); 579 | -ms-transform: scale(.9); 580 | transform: scale(.9); 581 | } 582 | 583 | 60% { 584 | opacity: 1; 585 | -webkit-transform: scale(1.03); 586 | -ms-transform: scale(1.03); 587 | transform: scale(1.03); 588 | } 589 | 590 | 80% { 591 | -webkit-transform: scale(.97); 592 | -ms-transform: scale(.97); 593 | transform: scale(.97); 594 | } 595 | 596 | 100% { 597 | opacity: 1; 598 | -webkit-transform: scale(1); 599 | -ms-transform: scale(1); 600 | transform: scale(1); 601 | } 602 | } 603 | 604 | .bounceIn { 605 | -webkit-animation-name: bounceIn; 606 | animation-name: bounceIn; 607 | -webkit-animation-duration: .75s; 608 | animation-duration: .75s; 609 | } 610 | 611 | @-webkit-keyframes bounceOut { 612 | 20% { 613 | -webkit-transform: scale(.9); 614 | transform: scale(.9); 615 | } 616 | 617 | 50%, 55% { 618 | opacity: 1; 619 | -webkit-transform: scale(1.1); 620 | transform: scale(1.1); 621 | } 622 | 623 | 100% { 624 | opacity: 0; 625 | -webkit-transform: scale(.3); 626 | transform: scale(.3); 627 | } 628 | } 629 | 630 | @keyframes bounceOut { 631 | 20% { 632 | -webkit-transform: scale(.9); 633 | -ms-transform: scale(.9); 634 | transform: scale(.9); 635 | } 636 | 637 | 50%, 55% { 638 | opacity: 1; 639 | -webkit-transform: scale(1.1); 640 | -ms-transform: scale(1.1); 641 | transform: scale(1.1); 642 | } 643 | 644 | 100% { 645 | opacity: 0; 646 | -webkit-transform: scale(.3); 647 | -ms-transform: scale(.3); 648 | transform: scale(.3); 649 | } 650 | } 651 | 652 | .bounceOut { 653 | -webkit-animation-name: bounceOut; 654 | animation-name: bounceOut; 655 | -webkit-animation-duration: .75s; 656 | animation-duration: .75s; 657 | } 658 | 659 | @-webkit-keyframes fadeIn { 660 | 0% { 661 | opacity: 0; 662 | } 663 | 664 | 100% { 665 | opacity: 1; 666 | } 667 | } 668 | 669 | @keyframes fadeIn { 670 | 0% { 671 | opacity: 0; 672 | } 673 | 674 | 100% { 675 | opacity: 1; 676 | } 677 | } 678 | 679 | .fadeIn { 680 | -webkit-animation-name: fadeIn; 681 | animation-name: fadeIn; 682 | } 683 | 684 | @-webkit-keyframes fadeInDown { 685 | 0% { 686 | opacity: 0; 687 | } 688 | 689 | 5% { 690 | opacity: 0; 691 | -webkit-transform: translateY(-10px); 692 | transform: translateY(-10px); 693 | } 694 | 695 | 100% { 696 | opacity: 1; 697 | -webkit-transform: none; 698 | transform: none; 699 | } 700 | } 701 | 702 | @keyframes fadeInDown { 703 | 0% { 704 | opacity: 0; 705 | } 706 | 707 | 5% { 708 | opacity: 0; 709 | -webkit-transform: translateY(-10px); 710 | -ms-transform: translateY(-10px); 711 | transform: translateY(-10px); 712 | } 713 | 714 | 100% { 715 | opacity: 1; 716 | -webkit-transform: none; 717 | -ms-transform: none; 718 | transform: none; 719 | } 720 | } 721 | 722 | .fadeInDown { 723 | -webkit-animation-name: fadeInDown; 724 | animation-name: fadeInDown; 725 | } 726 | 727 | @-webkit-keyframes fadeInDownBig { 728 | 0% { 729 | opacity: 0; 730 | } 731 | 732 | 5% { 733 | opacity: 0; 734 | -webkit-transform: translateY(-50px); 735 | transform: translateY(-50px); 736 | } 737 | 738 | 100% { 739 | opacity: 1; 740 | -webkit-transform: none; 741 | transform: none; 742 | } 743 | } 744 | 745 | @keyframes fadeInDownBig { 746 | 0% { 747 | opacity: 0; 748 | } 749 | 750 | 5% { 751 | opacity: 0; 752 | -webkit-transform: translateY(-50px); 753 | -ms-transform: translateY(-50px); 754 | transform: translateY(-50px); 755 | } 756 | 757 | 100% { 758 | opacity: 1; 759 | -webkit-transform: none; 760 | -ms-transform: none; 761 | transform: none; 762 | } 763 | } 764 | 765 | .fadeInDownBig { 766 | -webkit-animation-name: fadeInDownBig; 767 | animation-name: fadeInDownBig; 768 | } 769 | 770 | @-webkit-keyframes fadeInLeft { 771 | 0% { 772 | opacity: 0; 773 | } 774 | 775 | 5% { 776 | opacity: 0; 777 | -webkit-transform: translateX(-10px); 778 | transform: translateX(-10px); 779 | } 780 | 781 | 100% { 782 | opacity: 1; 783 | -webkit-transform: none; 784 | transform: none; 785 | } 786 | } 787 | 788 | @keyframes fadeInLeft { 789 | 0% { 790 | opacity: 0; 791 | } 792 | 793 | 5% { 794 | opacity: 0; 795 | -webkit-transform: translateX(-10px); 796 | -ms-transform: translateX(-10px); 797 | transform: translateX(-10px); 798 | } 799 | 800 | 100% { 801 | opacity: 1; 802 | -webkit-transform: none; 803 | -ms-transform: none; 804 | transform: none; 805 | } 806 | } 807 | 808 | .fadeInLeft { 809 | -webkit-animation-name: fadeInLeft; 810 | animation-name: fadeInLeft; 811 | } 812 | 813 | @-webkit-keyframes fadeInLeftBig { 814 | 0% { 815 | opacity: 0; 816 | } 817 | 818 | 5% { 819 | opacity: 0; 820 | -webkit-transform: translateX(-10px); 821 | transform: translateX(-10px); 822 | } 823 | 824 | 100% { 825 | opacity: 1; 826 | -webkit-transform: none; 827 | transform: none; 828 | } 829 | } 830 | 831 | @keyframes fadeInLeftBig { 832 | 0% { 833 | opacity: 0; 834 | } 835 | 836 | 5% { 837 | opacity: 0; 838 | -webkit-transform: translateX(-10px); 839 | -ms-transform: translateX(-10px); 840 | transform: translateX(-10px); 841 | } 842 | 843 | 100% { 844 | opacity: 1; 845 | -webkit-transform: none; 846 | -ms-transform: none; 847 | transform: none; 848 | } 849 | } 850 | 851 | .fadeInLeftBig { 852 | -webkit-animation-name: fadeInLeftBig; 853 | animation-name: fadeInLeftBig; 854 | } 855 | 856 | @-webkit-keyframes fadeInRight { 857 | 0% { 858 | opacity: 0; 859 | } 860 | 861 | 5% { 862 | opacity: 0; 863 | -webkit-transform: translateX(10px); 864 | transform: translateX(10px); 865 | } 866 | 867 | 100% { 868 | opacity: 1; 869 | -webkit-transform: none; 870 | transform: none; 871 | } 872 | } 873 | 874 | @keyframes fadeInRight { 875 | 0% { 876 | opacity: 0; 877 | } 878 | 879 | 5% { 880 | opacity: 0; 881 | -webkit-transform: translateX(10px); 882 | -ms-transform: translateX(10px); 883 | transform: translateX(10px); 884 | } 885 | 886 | 100% { 887 | opacity: 1; 888 | -webkit-transform: none; 889 | -ms-transform: none; 890 | transform: none; 891 | } 892 | } 893 | 894 | .fadeInRight { 895 | -webkit-animation-name: fadeInRight; 896 | animation-name: fadeInRight; 897 | } 898 | 899 | @-webkit-keyframes fadeInRightBig { 900 | 0% { 901 | opacity: 0; 902 | } 903 | 904 | 5% { 905 | opacity: 0; 906 | -webkit-transform: translateX(10px); 907 | transform: translateX(10px); 908 | } 909 | 910 | 100% { 911 | opacity: 1; 912 | -webkit-transform: none; 913 | transform: none; 914 | } 915 | } 916 | 917 | @keyframes fadeInRightBig { 918 | 0% { 919 | opacity: 0; 920 | } 921 | 922 | 5% { 923 | opacity: 0; 924 | -webkit-transform: translateX(10px); 925 | -ms-transform: translateX(10px); 926 | transform: translateX(10px); 927 | } 928 | 929 | 100% { 930 | opacity: 1; 931 | -webkit-transform: none; 932 | -ms-transform: none; 933 | transform: none; 934 | } 935 | } 936 | 937 | .fadeInRightBig { 938 | -webkit-animation-name: fadeInRightBig; 939 | animation-name: fadeInRightBig; 940 | } 941 | 942 | @-webkit-keyframes fadeInUp { 943 | 0% { 944 | opacity: 0; 945 | } 946 | 947 | 5% { 948 | opacity: 0; 949 | -webkit-transform: translateY(10px); 950 | transform: translateY(10px); 951 | } 952 | 953 | 100% { 954 | opacity: 1; 955 | -webkit-transform: none; 956 | transform: none; 957 | } 958 | } 959 | 960 | @keyframes fadeInUp { 961 | 0% { 962 | opacity: 0; 963 | } 964 | 965 | 5% { 966 | opacity: 0; 967 | -webkit-transform: translateY(10px); 968 | -ms-transform: translateY(10px); 969 | transform: translateY(10px); 970 | } 971 | 972 | 100% { 973 | opacity: 1; 974 | -webkit-transform: none; 975 | -ms-transform: none; 976 | transform: none; 977 | } 978 | } 979 | 980 | .fadeInUp { 981 | -webkit-animation-name: fadeInUp; 982 | animation-name: fadeInUp; 983 | } 984 | 985 | @-webkit-keyframes fadeInUpBig { 986 | 0% { 987 | opacity: 0; 988 | } 989 | 990 | 5% { 991 | opacity: 0; 992 | -webkit-transform: translateY(50px); 993 | transform: translateY(50px); 994 | } 995 | 996 | 100% { 997 | opacity: 1; 998 | -webkit-transform: none; 999 | transform: none; 1000 | } 1001 | } 1002 | 1003 | @keyframes fadeInUpBig { 1004 | 0% { 1005 | opacity: 0; 1006 | } 1007 | 1008 | 5% { 1009 | opacity: 0; 1010 | -webkit-transform: translateY(50px); 1011 | -ms-transform: translateY(50px); 1012 | transform: translateY(50px); 1013 | } 1014 | 1015 | 100% { 1016 | opacity: 1; 1017 | -webkit-transform: none; 1018 | -ms-transform: none; 1019 | transform: none; 1020 | } 1021 | } 1022 | 1023 | .fadeInUpBig { 1024 | -webkit-animation-name: fadeInUpBig; 1025 | animation-name: fadeInUpBig; 1026 | } 1027 | 1028 | @-webkit-keyframes fadeOut { 1029 | 0% { 1030 | opacity: 1; 1031 | } 1032 | 1033 | 100% { 1034 | opacity: 0; 1035 | } 1036 | } 1037 | 1038 | @keyframes fadeOut { 1039 | 0% { 1040 | opacity: 1; 1041 | } 1042 | 1043 | 100% { 1044 | opacity: 0; 1045 | } 1046 | } 1047 | 1048 | .fadeOut { 1049 | -webkit-animation-name: fadeOut; 1050 | animation-name: fadeOut; 1051 | } 1052 | 1053 | @-webkit-keyframes fadeOutDown { 1054 | 0% { 1055 | opacity: 1; 1056 | } 1057 | 1058 | 100% { 1059 | opacity: 0; 1060 | -webkit-transform: translateY(10px); 1061 | transform: translateY(10px); 1062 | } 1063 | } 1064 | 1065 | @keyframes fadeOutDown { 1066 | 0% { 1067 | opacity: 1; 1068 | } 1069 | 1070 | 100% { 1071 | opacity: 0; 1072 | -webkit-transform: translateY(10px); 1073 | -ms-transform: translateY(10px); 1074 | transform: translateY(10px); 1075 | } 1076 | } 1077 | 1078 | .fadeOutDown { 1079 | -webkit-animation-name: fadeOutDown; 1080 | animation-name: fadeOutDown; 1081 | } 1082 | 1083 | @-webkit-keyframes fadeOutDownBig { 1084 | 0% { 1085 | opacity: 1; 1086 | } 1087 | 1088 | 100% { 1089 | opacity: 0; 1090 | -webkit-transform: translateY(50px); 1091 | transform: translateY(50px); 1092 | } 1093 | } 1094 | 1095 | @keyframes fadeOutDownBig { 1096 | 0% { 1097 | opacity: 1; 1098 | } 1099 | 1100 | 100% { 1101 | opacity: 0; 1102 | -webkit-transform: translateY(50px); 1103 | -ms-transform: translateY(50px); 1104 | transform: translateY(50px); 1105 | } 1106 | } 1107 | 1108 | .fadeOutDownBig { 1109 | -webkit-animation-name: fadeOutDownBig; 1110 | animation-name: fadeOutDownBig; 1111 | } 1112 | 1113 | @-webkit-keyframes fadeOutLeft { 1114 | 0% { 1115 | opacity: 1; 1116 | } 1117 | 1118 | 100% { 1119 | opacity: 0; 1120 | -webkit-transform: translateX(-10px); 1121 | transform: translateX(-10px); 1122 | } 1123 | } 1124 | 1125 | @keyframes fadeOutLeft { 1126 | 0% { 1127 | opacity: 1; 1128 | } 1129 | 1130 | 100% { 1131 | opacity: 0; 1132 | -webkit-transform: translateX(-10px); 1133 | -ms-transform: translateX(-10px); 1134 | transform: translateX(-10px); 1135 | } 1136 | } 1137 | 1138 | .fadeOutLeft { 1139 | -webkit-animation-name: fadeOutLeft; 1140 | animation-name: fadeOutLeft; 1141 | } 1142 | 1143 | @-webkit-keyframes fadeOutLeftBig { 1144 | 0% { 1145 | opacity: 1; 1146 | } 1147 | 1148 | 100% { 1149 | opacity: 0; 1150 | -webkit-transform: translateX(-50px); 1151 | transform: translateX(-50px); 1152 | } 1153 | } 1154 | 1155 | @keyframes fadeOutLeftBig { 1156 | 0% { 1157 | opacity: 1; 1158 | } 1159 | 1160 | 100% { 1161 | opacity: 0; 1162 | -webkit-transform: translateX(-50px); 1163 | -ms-transform: translateX(-50px); 1164 | transform: translateX(-50px); 1165 | } 1166 | } 1167 | 1168 | .fadeOutLeftBig { 1169 | -webkit-animation-name: fadeOutLeftBig; 1170 | animation-name: fadeOutLeftBig; 1171 | } 1172 | 1173 | @-webkit-keyframes fadeOutRight { 1174 | 0% { 1175 | opacity: 1; 1176 | } 1177 | 1178 | 100% { 1179 | opacity: 0; 1180 | -webkit-transform: translateX(10px); 1181 | transform: translateX(10px); 1182 | } 1183 | } 1184 | 1185 | @keyframes fadeOutRight { 1186 | 0% { 1187 | opacity: 1; 1188 | } 1189 | 1190 | 100% { 1191 | opacity: 0; 1192 | -webkit-transform: translateX(10px); 1193 | -ms-transform: translateX(10px); 1194 | transform: translateX(10px); 1195 | } 1196 | } 1197 | 1198 | .fadeOutRight { 1199 | -webkit-animation-name: fadeOutRight; 1200 | animation-name: fadeOutRight; 1201 | } 1202 | 1203 | @-webkit-keyframes fadeOutRightBig { 1204 | 0% { 1205 | opacity: 1; 1206 | } 1207 | 1208 | 100% { 1209 | opacity: 0; 1210 | -webkit-transform: translateX(50px); 1211 | transform: translateX(50px); 1212 | } 1213 | } 1214 | 1215 | @keyframes fadeOutRightBig { 1216 | 0% { 1217 | opacity: 1; 1218 | } 1219 | 1220 | 100% { 1221 | opacity: 0; 1222 | -webkit-transform: translateX(50px); 1223 | -ms-transform: translateX(50px); 1224 | transform: translateX(50px); 1225 | } 1226 | } 1227 | 1228 | .fadeOutRightBig { 1229 | -webkit-animation-name: fadeOutRightBig; 1230 | animation-name: fadeOutRightBig; 1231 | } 1232 | 1233 | @-webkit-keyframes fadeOutUp { 1234 | 0% { 1235 | opacity: 1; 1236 | } 1237 | 1238 | 100% { 1239 | opacity: 0; 1240 | -webkit-transform: translateY(-10px); 1241 | transform: translateY(-10px); 1242 | } 1243 | } 1244 | 1245 | @keyframes fadeOutUp { 1246 | 0% { 1247 | opacity: 1; 1248 | } 1249 | 1250 | 100% { 1251 | opacity: 0; 1252 | -webkit-transform: translateY(-10px); 1253 | -ms-transform: translateY(-10px); 1254 | transform: translateY(-10px); 1255 | } 1256 | } 1257 | 1258 | .fadeOutUp { 1259 | -webkit-animation-name: fadeOutUp; 1260 | animation-name: fadeOutUp; 1261 | } 1262 | 1263 | @-webkit-keyframes fadeOutUpBig { 1264 | 0% { 1265 | opacity: 1; 1266 | } 1267 | 1268 | 100% { 1269 | opacity: 0; 1270 | -webkit-transform: translateY(-50px); 1271 | transform: translateY(-50px); 1272 | } 1273 | } 1274 | 1275 | @keyframes fadeOutUpBig { 1276 | 0% { 1277 | opacity: 1; 1278 | } 1279 | 1280 | 100% { 1281 | opacity: 0; 1282 | -webkit-transform: translateY(-50px); 1283 | -ms-transform: translateY(-50px); 1284 | transform: translateY(-50px); 1285 | } 1286 | } 1287 | 1288 | .fadeOutUpBig { 1289 | -webkit-animation-name: fadeOutUpBig; 1290 | animation-name: fadeOutUpBig; 1291 | } 1292 | 1293 | @-webkit-keyframes flip { 1294 | 0% { 1295 | -webkit-transform: perspective(400px) rotateY(0); 1296 | transform: perspective(400px) rotateY(0); 1297 | -webkit-animation-timing-function: ease-out; 1298 | animation-timing-function: ease-out; 1299 | } 1300 | 1301 | 40% { 1302 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); 1303 | transform: perspective(400px) translateZ(150px) rotateY(170deg); 1304 | -webkit-animation-timing-function: ease-out; 1305 | animation-timing-function: ease-out; 1306 | } 1307 | 1308 | 50% { 1309 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg); 1310 | transform: perspective(400px) translateZ(150px) rotateY(190deg); 1311 | -webkit-animation-timing-function: ease-in; 1312 | animation-timing-function: ease-in; 1313 | } 1314 | 1315 | 80% { 1316 | -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); 1317 | transform: perspective(400px) rotateY(360deg) scale(.95); 1318 | -webkit-animation-timing-function: ease-in; 1319 | animation-timing-function: ease-in; 1320 | } 1321 | 1322 | 100% { 1323 | -webkit-transform: perspective(400px) scale(1); 1324 | transform: perspective(400px) scale(1); 1325 | -webkit-animation-timing-function: ease-in; 1326 | animation-timing-function: ease-in; 1327 | } 1328 | } 1329 | 1330 | @keyframes flip { 1331 | 0% { 1332 | -webkit-transform: perspective(400px) rotateY(0); 1333 | -ms-transform: perspective(400px) rotateY(0); 1334 | transform: perspective(400px) rotateY(0); 1335 | -webkit-animation-timing-function: ease-out; 1336 | animation-timing-function: ease-out; 1337 | } 1338 | 1339 | 40% { 1340 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); 1341 | -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); 1342 | transform: perspective(400px) translateZ(150px) rotateY(170deg); 1343 | -webkit-animation-timing-function: ease-out; 1344 | animation-timing-function: ease-out; 1345 | } 1346 | 1347 | 50% { 1348 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg); 1349 | -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg); 1350 | transform: perspective(400px) translateZ(150px) rotateY(190deg); 1351 | -webkit-animation-timing-function: ease-in; 1352 | animation-timing-function: ease-in; 1353 | } 1354 | 1355 | 80% { 1356 | -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); 1357 | -ms-transform: perspective(400px) rotateY(360deg) scale(.95); 1358 | transform: perspective(400px) rotateY(360deg) scale(.95); 1359 | -webkit-animation-timing-function: ease-in; 1360 | animation-timing-function: ease-in; 1361 | } 1362 | 1363 | 100% { 1364 | -webkit-transform: perspective(400px) scale(1); 1365 | -ms-transform: perspective(400px) scale(1); 1366 | transform: perspective(400px) scale(1); 1367 | -webkit-animation-timing-function: ease-in; 1368 | animation-timing-function: ease-in; 1369 | } 1370 | } 1371 | 1372 | .animated.flip { 1373 | -webkit-backface-visibility: visible; 1374 | -ms-backface-visibility: visible; 1375 | backface-visibility: visible; 1376 | -webkit-animation-name: flip; 1377 | animation-name: flip; 1378 | } 1379 | 1380 | @-webkit-keyframes flipInX { 1381 | 0% { 1382 | -webkit-transform: perspective(400px) rotateX(90deg); 1383 | transform: perspective(400px) rotateX(90deg); 1384 | -webkit-transition-timing-function: ease-in; 1385 | transition-timing-function: ease-in; 1386 | opacity: 0; 1387 | } 1388 | 1389 | 40% { 1390 | -webkit-transform: perspective(400px) rotateX(-10deg); 1391 | transform: perspective(400px) rotateX(-10deg); 1392 | -webkit-transition-timing-function: ease-in; 1393 | transition-timing-function: ease-in; 1394 | } 1395 | 1396 | 60% { 1397 | -webkit-transform: perspective(400px) rotateX(10deg); 1398 | transform: perspective(400px) rotateX(10deg); 1399 | opacity: 1; 1400 | } 1401 | 1402 | 80% { 1403 | -webkit-transform: perspective(400px) rotateX(0deg); 1404 | transform: perspective(400px) rotateX(0deg); 1405 | } 1406 | 1407 | 100% { 1408 | -webkit-transform: perspective(400px); 1409 | transform: perspective(400px); 1410 | } 1411 | } 1412 | 1413 | @keyframes flipInX { 1414 | 0% { 1415 | -webkit-transform: perspective(400px) rotateX(90deg); 1416 | -ms-transform: perspective(400px) rotateX(90deg); 1417 | transform: perspective(400px) rotateX(90deg); 1418 | -webkit-transition-timing-function: ease-in; 1419 | transition-timing-function: ease-in; 1420 | opacity: 0; 1421 | } 1422 | 1423 | 40% { 1424 | -webkit-transform: perspective(400px) rotateX(-10deg); 1425 | -ms-transform: perspective(400px) rotateX(-10deg); 1426 | transform: perspective(400px) rotateX(-10deg); 1427 | -webkit-transition-timing-function: ease-in; 1428 | transition-timing-function: ease-in; 1429 | } 1430 | 1431 | 60% { 1432 | -webkit-transform: perspective(400px) rotateX(10deg); 1433 | -ms-transform: perspective(400px) rotateX(10deg); 1434 | transform: perspective(400px) rotateX(10deg); 1435 | opacity: 1; 1436 | } 1437 | 1438 | 80% { 1439 | -webkit-transform: perspective(400px) rotateX(0deg); 1440 | -ms-transform: perspective(400px) rotateX(0deg); 1441 | transform: perspective(400px) rotateX(0deg); 1442 | } 1443 | 1444 | 100% { 1445 | -webkit-transform: perspective(400px); 1446 | -ms-transform: perspective(400px); 1447 | transform: perspective(400px); 1448 | } 1449 | } 1450 | 1451 | .flipInX { 1452 | -webkit-backface-visibility: visible !important; 1453 | -ms-backface-visibility: visible !important; 1454 | backface-visibility: visible !important; 1455 | -webkit-animation-name: flipInX; 1456 | animation-name: flipInX; 1457 | } 1458 | 1459 | @-webkit-keyframes flipInY { 1460 | 0% { 1461 | -webkit-transform: perspective(400px) rotateY(90deg); 1462 | transform: perspective(400px) rotateY(90deg); 1463 | -webkit-transition-timing-function: ease-in; 1464 | transition-timing-function: ease-in; 1465 | opacity: 0; 1466 | } 1467 | 1468 | 40% { 1469 | -webkit-transform: perspective(400px) rotateY(-10deg); 1470 | transform: perspective(400px) rotateY(-10deg); 1471 | -webkit-transition-timing-function: ease-in; 1472 | transition-timing-function: ease-in; 1473 | } 1474 | 1475 | 60% { 1476 | -webkit-transform: perspective(400px) rotateY(10deg); 1477 | transform: perspective(400px) rotateY(10deg); 1478 | opacity: 1; 1479 | } 1480 | 1481 | 80% { 1482 | -webkit-transform: perspective(400px) rotateY(0deg); 1483 | transform: perspective(400px) rotateY(0deg); 1484 | } 1485 | 1486 | 100% { 1487 | -webkit-transform: perspective(400px); 1488 | transform: perspective(400px); 1489 | } 1490 | } 1491 | 1492 | @keyframes flipInY { 1493 | 0% { 1494 | -webkit-transform: perspective(400px) rotateY(90deg); 1495 | -ms-transform: perspective(400px) rotateY(90deg); 1496 | transform: perspective(400px) rotateY(90deg); 1497 | -webkit-transition-timing-function: ease-in; 1498 | transition-timing-function: ease-in; 1499 | opacity: 0; 1500 | } 1501 | 1502 | 40% { 1503 | -webkit-transform: perspective(400px) rotateY(-10deg); 1504 | -ms-transform: perspective(400px) rotateY(-10deg); 1505 | transform: perspective(400px) rotateY(-10deg); 1506 | -webkit-transition-timing-function: ease-in; 1507 | transition-timing-function: ease-in; 1508 | } 1509 | 1510 | 60% { 1511 | -webkit-transform: perspective(400px) rotateY(10deg); 1512 | -ms-transform: perspective(400px) rotateY(10deg); 1513 | transform: perspective(400px) rotateY(10deg); 1514 | opacity: 1; 1515 | } 1516 | 1517 | 80% { 1518 | -webkit-transform: perspective(400px) rotateY(0deg); 1519 | -ms-transform: perspective(400px) rotateY(0deg); 1520 | transform: perspective(400px) rotateY(0deg); 1521 | } 1522 | 1523 | 100% { 1524 | -webkit-transform: perspective(400px); 1525 | -ms-transform: perspective(400px); 1526 | transform: perspective(400px); 1527 | } 1528 | } 1529 | 1530 | .flipInY { 1531 | -webkit-backface-visibility: visible !important; 1532 | -ms-backface-visibility: visible !important; 1533 | backface-visibility: visible !important; 1534 | -webkit-animation-name: flipInY; 1535 | animation-name: flipInY; 1536 | } 1537 | 1538 | @-webkit-keyframes flipOutX { 1539 | 0% { 1540 | -webkit-transform: perspective(400px) rotateX(0deg); 1541 | transform: perspective(400px) rotateX(0deg); 1542 | opacity: 1; 1543 | } 1544 | 1545 | 100% { 1546 | -webkit-transform: perspective(400px) rotateX(90deg); 1547 | transform: perspective(400px) rotateX(90deg); 1548 | opacity: 0; 1549 | } 1550 | } 1551 | 1552 | @keyframes flipOutX { 1553 | 0% { 1554 | -webkit-transform: perspective(400px) rotateX(0deg); 1555 | -ms-transform: perspective(400px) rotateX(0deg); 1556 | transform: perspective(400px) rotateX(0deg); 1557 | opacity: 1; 1558 | } 1559 | 1560 | 100% { 1561 | -webkit-transform: perspective(400px) rotateX(90deg); 1562 | -ms-transform: perspective(400px) rotateX(90deg); 1563 | transform: perspective(400px) rotateX(90deg); 1564 | opacity: 0; 1565 | } 1566 | } 1567 | 1568 | .flipOutX { 1569 | -webkit-animation-name: flipOutX; 1570 | animation-name: flipOutX; 1571 | -webkit-animation-duration: .75s; 1572 | animation-duration: .75s; 1573 | -webkit-backface-visibility: visible !important; 1574 | -ms-backface-visibility: visible !important; 1575 | backface-visibility: visible !important; 1576 | } 1577 | 1578 | @-webkit-keyframes flipOutY { 1579 | 0% { 1580 | -webkit-transform: perspective(400px) rotateY(90deg); 1581 | transform: perspective(400px) rotateY(90deg); 1582 | opacity: 1; 1583 | } 1584 | 1585 | 100% { 1586 | -webkit-transform: perspective(400px) rotateY(90deg); 1587 | transform: perspective(400px) rotateY(90deg); 1588 | opacity: 0; 1589 | } 1590 | } 1591 | 1592 | @keyframes flipOutY { 1593 | 0% { 1594 | -webkit-transform: perspective(400px) rotateY(90deg); 1595 | -ms-transform: perspective(400px) rotateY(90deg); 1596 | transform: perspective(400px) rotateY(90deg); 1597 | opacity: 1; 1598 | } 1599 | 1600 | 100% { 1601 | -webkit-transform: perspective(400px) rotateY(90deg); 1602 | -ms-transform: perspective(400px) rotateY(90deg); 1603 | transform: perspective(400px) rotateY(90deg); 1604 | opacity: 0; 1605 | } 1606 | } 1607 | 1608 | .flipOutY { 1609 | -webkit-backface-visibility: visible !important; 1610 | -ms-backface-visibility: visible !important; 1611 | backface-visibility: visible !important; 1612 | -webkit-animation-name: flipOutY; 1613 | animation-name: flipOutY; 1614 | -webkit-animation-duration: .75s; 1615 | animation-duration: .75s; 1616 | } 1617 | 1618 | @-webkit-keyframes rotateIn { 1619 | 0% { 1620 | -webkit-transform-origin: center; 1621 | transform-origin: center; 1622 | -webkit-transform: rotate(-90deg); 1623 | transform: rotate(-90deg); 1624 | opacity: 0; 1625 | } 1626 | 1627 | 100% { 1628 | -webkit-transform-origin: center; 1629 | transform-origin: center; 1630 | -webkit-transform: none; 1631 | transform: none; 1632 | opacity: 1; 1633 | } 1634 | } 1635 | 1636 | @keyframes rotateIn { 1637 | 0% { 1638 | -webkit-transform-origin: center; 1639 | -ms-transform-origin: center; 1640 | transform-origin: center; 1641 | -webkit-transform: rotate(-90deg); 1642 | -ms-transform: rotate(-90deg); 1643 | transform: rotate(-90deg); 1644 | opacity: 0; 1645 | } 1646 | 1647 | 100% { 1648 | -webkit-transform-origin: center; 1649 | -ms-transform-origin: center; 1650 | transform-origin: center; 1651 | -webkit-transform: none; 1652 | -ms-transform: none; 1653 | transform: none; 1654 | opacity: 1; 1655 | } 1656 | } 1657 | 1658 | .rotateIn { 1659 | -webkit-animation-name: rotateIn; 1660 | animation-name: rotateIn; 1661 | } 1662 | 1663 | @-webkit-keyframes rotateOut { 1664 | 0% { 1665 | -webkit-transform-origin: center; 1666 | transform-origin: center; 1667 | opacity: 1; 1668 | } 1669 | 1670 | 100% { 1671 | -webkit-transform-origin: center; 1672 | transform-origin: center; 1673 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 1674 | transform: rotate3d(0, 0, 1, 200deg); 1675 | opacity: 0; 1676 | } 1677 | } 1678 | 1679 | @keyframes rotateOut { 1680 | 0% { 1681 | -webkit-transform-origin: center; 1682 | -ms-transform-origin: center; 1683 | transform-origin: center; 1684 | opacity: 1; 1685 | } 1686 | 1687 | 100% { 1688 | -webkit-transform-origin: center; 1689 | -ms-transform-origin: center; 1690 | transform-origin: center; 1691 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 1692 | -ms-transform: rotate3d(0, 0, 1, 200deg); 1693 | transform: rotate3d(0, 0, 1, 200deg); 1694 | opacity: 0; 1695 | } 1696 | } 1697 | 1698 | .rotateOut { 1699 | -webkit-animation-name: rotateOut; 1700 | animation-name: rotateOut; 1701 | } 1702 | 1703 | @-webkit-keyframes zoomIn { 1704 | 0% { 1705 | opacity: 0; 1706 | -webkit-transform: scale3d(.3, .3, .3); 1707 | transform: scale3d(.3, .3, .3); 1708 | } 1709 | 1710 | 50% { 1711 | opacity: 1; 1712 | } 1713 | } 1714 | 1715 | @keyframes zoomIn { 1716 | 0% { 1717 | opacity: 0; 1718 | -webkit-transform: scale3d(.3, .3, .3); 1719 | -ms-transform: scale3d(.3, .3, .3); 1720 | transform: scale3d(.3, .3, .3); 1721 | } 1722 | 1723 | 50% { 1724 | opacity: 1; 1725 | } 1726 | } 1727 | 1728 | .zoomIn { 1729 | -webkit-animation-name: zoomIn; 1730 | animation-name: zoomIn; 1731 | } 1732 | 1733 | @-webkit-keyframes zoomOut { 1734 | 0% { 1735 | opacity: 1; 1736 | } 1737 | 1738 | 50% { 1739 | opacity: 0; 1740 | -webkit-transform: scale3d(.3, .3, .3); 1741 | transform: scale3d(.3, .3, .3); 1742 | } 1743 | 1744 | 100% { 1745 | opacity: 0; 1746 | } 1747 | } 1748 | 1749 | @keyframes zoomOut { 1750 | 0% { 1751 | opacity: 1; 1752 | } 1753 | 1754 | 50% { 1755 | opacity: 0; 1756 | -webkit-transform: scale3d(.3, .3, .3); 1757 | -ms-transform: scale3d(.3, .3, .3); 1758 | transform: scale3d(.3, .3, .3); 1759 | } 1760 | 1761 | 100% { 1762 | opacity: 0; 1763 | } 1764 | } 1765 | 1766 | .zoomOut { 1767 | -webkit-animation-name: zoomOut; 1768 | animation-name: zoomOut; 1769 | } --------------------------------------------------------------------------------