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