├── .gitignore ├── .travis.yml ├── bower.json ├── source ├── fading_entrances │ ├── fadeIn.css │ ├── fadeInUp.css │ ├── fadeInDown.css │ ├── fadeInLeft.css │ ├── fadeInRight.css │ ├── fadeInUpBig.css │ ├── fadeInDownBig.css │ ├── fadeInLeftBig.css │ └── fadeInRightBig.css ├── fading_exits │ ├── fadeOut.css │ ├── fadeOutUp.css │ ├── fadeOutDown.css │ ├── fadeOutLeft.css │ ├── fadeOutRight.css │ ├── fadeOutUpBig.css │ ├── fadeOutDownBig.css │ ├── fadeOutLeftBig.css │ └── fadeOutRightBig.css ├── attention_seekers │ ├── flash.css │ ├── shake.css │ ├── pulse.css │ ├── swing.css │ ├── tada.css │ ├── rubberBand.css │ ├── headShake.css │ ├── bounce.css │ ├── wobble.css │ └── jello.css ├── zooming_entrances │ ├── zoomIn.css │ ├── zoomInUp.css │ ├── zoomInDown.css │ ├── zoomInLeft.css │ └── zoomInRight.css ├── sliding_entrances │ ├── slideInUp.css │ ├── slideInDown.css │ ├── slideInLeft.css │ └── slideInRight.css ├── sliding_exits │ ├── slideOutUp.css │ ├── slideOutDown.css │ ├── slideOutLeft.css │ └── slideOutRight.css ├── zooming_exits │ ├── zoomOut.css │ ├── zoomOutLeft.css │ ├── zoomOutRight.css │ ├── zoomOutUp.css │ └── zoomOutDown.css ├── bouncing_exits │ ├── bounceOutLeft.css │ ├── bounceOutRight.css │ ├── bounceOut.css │ ├── bounceOutUp.css │ └── bounceOutDown.css ├── lightspeed │ ├── lightSpeedOut.css │ └── lightSpeedIn.css ├── rotating_exits │ ├── rotateOut.css │ ├── rotateOutUpLeft.css │ ├── rotateOutDownLeft.css │ ├── rotateOutUpRight.css │ └── rotateOutDownRight.css ├── rotating_entrances │ ├── rotateIn.css │ ├── rotateInUpLeft.css │ ├── rotateInDownLeft.css │ ├── rotateInUpRight.css │ └── rotateInDownRight.css ├── specials │ ├── rollOut.css │ ├── rollIn.css │ ├── jackInTheBox.css │ └── hinge.css ├── _base.css ├── flippers │ ├── flipOutX.css │ ├── flipOutY.css │ ├── flipInX.css │ ├── flipInY.css │ └── flip.css └── bouncing_entrances │ ├── bounceInDown.css │ ├── bounceInLeft.css │ ├── bounceInRight.css │ ├── bounceInUp.css │ └── bounceIn.css ├── .editorconfig ├── package.json ├── LICENSE ├── animate-config.json ├── gulpfile.js ├── README.md ├── animate.min.css └── animate.css /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules/ 3 | .DS_Store 4 | test/ 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | - "6.1" 5 | - "5.11" 6 | before_script: 7 | - npm install -g gulp 8 | script: gulp -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "main": "./animate.css", 4 | "ignore": [ 5 | ".*", 6 | "*.yml", 7 | "Gemfile", 8 | "Gemfile.lock", 9 | "*.md" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeIn.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | from { 3 | opacity: 0; 4 | } 5 | 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | .fadeIn { 12 | animation-name: fadeIn; 13 | } 14 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOut.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOut { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | .fadeOut { 12 | animation-name: fadeOut; 13 | } 14 | -------------------------------------------------------------------------------- /source/attention_seekers/flash.css: -------------------------------------------------------------------------------- 1 | @keyframes flash { 2 | from, 50%, to { 3 | opacity: 1; 4 | } 5 | 6 | 25%, 75% { 7 | opacity: 0; 8 | } 9 | } 10 | 11 | .flash { 12 | animation-name: flash; 13 | } 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | tab_width = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomIn.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomIn { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.3, .3, .3); 5 | } 6 | 7 | 50% { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | .zoomIn { 13 | animation-name: zoomIn; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUp { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(0, -100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutUp { 13 | animation-name: fadeOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDown { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(0, 100%, 0); 9 | } 10 | } 11 | 12 | .fadeOutDown { 13 | animation-name: fadeOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeft { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(-100%, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutLeft { 13 | animation-name: fadeOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRight { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(100%, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutRight { 13 | animation-name: fadeOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutUpBig { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(0, -2000px, 0); 9 | } 10 | } 11 | 12 | .fadeOutUpBig { 13 | animation-name: fadeOutUpBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutDownBig { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(0, 2000px, 0); 9 | } 10 | } 11 | 12 | .fadeOutDownBig { 13 | animation-name: fadeOutDownBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUp { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, 100%, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInUp { 14 | animation-name: fadeInUp; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutLeftBig { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(-2000px, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutLeftBig { 13 | animation-name: fadeOutLeftBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_exits/fadeOutRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeOutRightBig { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | opacity: 0; 8 | transform: translate3d(2000px, 0, 0); 9 | } 10 | } 11 | 12 | .fadeOutRightBig { 13 | animation-name: fadeOutRightBig; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDown { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, -100%, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInDown { 14 | animation-name: fadeInDown; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeft { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(-100%, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInLeft { 14 | animation-name: fadeInLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInUp { 2 | from { 3 | transform: translate3d(0, 100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInUp { 13 | animation-name: slideInUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutUp { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(0, -100%, 0); 9 | } 10 | } 11 | 12 | .slideOutUp { 13 | animation-name: slideOutUp; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRight { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(100%, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInRight { 14 | animation-name: fadeInRight; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInUpBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUpBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, 2000px, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInUpBig { 14 | animation-name: fadeInUpBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutDown { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(0, 100%, 0); 9 | } 10 | } 11 | 12 | .slideOutDown { 13 | animation-name: slideOutDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOut.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOut { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | 50% { 7 | opacity: 0; 8 | transform: scale3d(.3, .3, .3); 9 | } 10 | 11 | to { 12 | opacity: 0; 13 | } 14 | } 15 | 16 | .zoomOut { 17 | animation-name: zoomOut; 18 | } 19 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInDown { 2 | from { 3 | transform: translate3d(0, -100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInDown { 13 | animation-name: slideInDown; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInLeft { 2 | from { 3 | transform: translate3d(-100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInLeft { 13 | animation-name: slideInLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_entrances/slideInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideInRight { 2 | from { 3 | transform: translate3d(100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | .slideInRight { 13 | animation-name: slideInRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutLeft { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(-100%, 0, 0); 9 | } 10 | } 11 | 12 | .slideOutLeft { 13 | animation-name: slideOutLeft; 14 | } 15 | -------------------------------------------------------------------------------- /source/sliding_exits/slideOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes slideOutRight { 2 | from { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | to { 7 | visibility: hidden; 8 | transform: translate3d(100%, 0, 0); 9 | } 10 | } 11 | 12 | .slideOutRight { 13 | animation-name: slideOutRight; 14 | } 15 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInDownBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDownBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, -2000px, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInDownBig { 14 | animation-name: fadeInDownBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInLeftBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeftBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(-2000px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInLeftBig { 14 | animation-name: fadeInLeftBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/fading_entrances/fadeInRightBig.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRightBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(2000px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | .fadeInRightBig { 14 | animation-name: fadeInRightBig; 15 | } 16 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutLeft { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(20px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: translate3d(-2000px, 0, 0); 10 | } 11 | } 12 | 13 | .bounceOutLeft { 14 | animation-name: bounceOutLeft; 15 | } 16 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutRight { 2 | 20% { 3 | opacity: 1; 4 | transform: translate3d(-20px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: translate3d(2000px, 0, 0); 10 | } 11 | } 12 | 13 | .bounceOutRight { 14 | animation-name: bounceOutRight; 15 | } 16 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedOut.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedOut { 2 | from { 3 | opacity: 1; 4 | } 5 | 6 | to { 7 | transform: translate3d(100%, 0, 0) skewX(30deg); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | .lightSpeedOut { 13 | animation-name: lightSpeedOut; 14 | animation-timing-function: ease-in; 15 | } 16 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOut.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOut { 2 | from { 3 | transform-origin: center; 4 | opacity: 1; 5 | } 6 | 7 | to { 8 | transform-origin: center; 9 | transform: rotate3d(0, 0, 1, 200deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOut { 15 | animation-name: rotateOut; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateIn.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateIn { 2 | from { 3 | transform-origin: center; 4 | transform: rotate3d(0, 0, 1, -200deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: center; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateIn { 16 | animation-name: rotateIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/shake.css: -------------------------------------------------------------------------------- 1 | @keyframes shake { 2 | from, to { 3 | transform: translate3d(0, 0, 0); 4 | } 5 | 6 | 10%, 30%, 50%, 70%, 90% { 7 | transform: translate3d(-10px, 0, 0); 8 | } 9 | 10 | 20%, 40%, 60%, 80% { 11 | transform: translate3d(10px, 0, 0); 12 | } 13 | } 14 | 15 | .shake { 16 | animation-name: shake; 17 | } 18 | -------------------------------------------------------------------------------- /source/specials/rollOut.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollOut { 4 | from { 5 | opacity: 1; 6 | } 7 | 8 | to { 9 | opacity: 0; 10 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 11 | } 12 | } 13 | 14 | .rollOut { 15 | animation-name: rollOut; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpLeft { 2 | from { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | to { 8 | transform-origin: left bottom; 9 | transform: rotate3d(0, 0, 1, -45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutUpLeft { 15 | animation-name: rotateOutUpLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOut.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOut { 2 | 20% { 3 | transform: scale3d(.9, .9, .9); 4 | } 5 | 6 | 50%, 55% { 7 | opacity: 1; 8 | transform: scale3d(1.1, 1.1, 1.1); 9 | } 10 | 11 | to { 12 | opacity: 0; 13 | transform: scale3d(.3, .3, .3); 14 | } 15 | } 16 | 17 | .bounceOut { 18 | animation-name: bounceOut; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownLeft { 2 | from { 3 | transform-origin: left bottom; 4 | opacity: 1; 5 | } 6 | 7 | to { 8 | transform-origin: left bottom; 9 | transform: rotate3d(0, 0, 1, 45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutDownLeft { 15 | animation-name: rotateOutDownLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutUpRight { 2 | from { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | to { 8 | transform-origin: right bottom; 9 | transform: rotate3d(0, 0, 1, 90deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutUpRight { 15 | animation-name: rotateOutUpRight; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_exits/rotateOutDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateOutDownRight { 2 | from { 3 | transform-origin: right bottom; 4 | opacity: 1; 5 | } 6 | 7 | to { 8 | transform-origin: right bottom; 9 | transform: rotate3d(0, 0, 1, -45deg); 10 | opacity: 0; 11 | } 12 | } 13 | 14 | .rotateOutDownRight { 15 | animation-name: rotateOutDownRight; 16 | } 17 | -------------------------------------------------------------------------------- /source/specials/rollIn.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes rollIn { 4 | from { 5 | opacity: 0; 6 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 7 | } 8 | 9 | to { 10 | opacity: 1; 11 | transform: none; 12 | } 13 | } 14 | 15 | .rollIn { 16 | animation-name: rollIn; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutLeft { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: scale(.1) translate3d(-2000px, 0, 0); 10 | transform-origin: left center; 11 | } 12 | } 13 | 14 | .zoomOutLeft { 15 | animation-name: zoomOutLeft; 16 | } 17 | -------------------------------------------------------------------------------- /source/_base.css: -------------------------------------------------------------------------------- 1 | .animated { 2 | animation-duration: 1s; 3 | animation-fill-mode: both; 4 | } 5 | 6 | .animated.infinite { 7 | animation-iteration-count: infinite; 8 | } 9 | 10 | .animated.hinge { 11 | animation-duration: 2s; 12 | } 13 | 14 | .animated.flipOutX, 15 | .animated.flipOutY, 16 | .animated.bounceIn, 17 | .animated.bounceOut { 18 | animation-duration: .75s; 19 | } 20 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutUp { 2 | 20% { 3 | transform: translate3d(0, -10px, 0); 4 | } 5 | 6 | 40%, 45% { 7 | opacity: 1; 8 | transform: translate3d(0, 20px, 0); 9 | } 10 | 11 | to { 12 | opacity: 0; 13 | transform: translate3d(0, -2000px, 0); 14 | } 15 | } 16 | 17 | .bounceOutUp { 18 | animation-name: bounceOutUp; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpLeft { 2 | from { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: left bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpLeft { 16 | animation-name: rotateInUpLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutRight { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 0; 9 | transform: scale(.1) translate3d(2000px, 0, 0); 10 | transform-origin: right center; 11 | } 12 | } 13 | 14 | .zoomOutRight { 15 | animation-name: zoomOutRight; 16 | } 17 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownLeft { 2 | from { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, -45deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: left bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownLeft { 16 | animation-name: rotateInDownLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInUpRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpRight { 2 | from { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, -90deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInUpRight { 16 | animation-name: rotateInUpRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/pulse.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes pulse { 4 | from { 5 | transform: scale3d(1, 1, 1); 6 | } 7 | 8 | 50% { 9 | transform: scale3d(1.05, 1.05, 1.05); 10 | } 11 | 12 | to { 13 | transform: scale3d(1, 1, 1); 14 | } 15 | } 16 | 17 | .pulse { 18 | animation-name: pulse; 19 | } 20 | -------------------------------------------------------------------------------- /source/bouncing_exits/bounceOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceOutDown { 2 | 20% { 3 | transform: translate3d(0, 10px, 0); 4 | } 5 | 6 | 40%, 45% { 7 | opacity: 1; 8 | transform: translate3d(0, -20px, 0); 9 | } 10 | 11 | to { 12 | opacity: 0; 13 | transform: translate3d(0, 2000px, 0); 14 | } 15 | } 16 | 17 | .bounceOutDown { 18 | animation-name: bounceOutDown; 19 | } 20 | -------------------------------------------------------------------------------- /source/rotating_entrances/rotateInDownRight.css: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownRight { 2 | from { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | .rotateInDownRight { 16 | animation-name: rotateInDownRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/flippers/flipOutX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutX { 2 | from { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 8 | opacity: 1; 9 | } 10 | 11 | to { 12 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .flipOutX { 18 | animation-name: flipOutX; 19 | backface-visibility: visible !important; 20 | } 21 | -------------------------------------------------------------------------------- /source/flippers/flipOutY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipOutY { 2 | from { 3 | transform: perspective(400px); 4 | } 5 | 6 | 30% { 7 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 8 | opacity: 1; 9 | } 10 | 11 | to { 12 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 13 | opacity: 0; 14 | } 15 | } 16 | 17 | .flipOutY { 18 | backface-visibility: visible !important; 19 | animation-name: flipOutY; 20 | } 21 | -------------------------------------------------------------------------------- /source/specials/jackInTheBox.css: -------------------------------------------------------------------------------- 1 | @keyframes jackInTheBox { 2 | from { 3 | opacity: 0; 4 | transform: scale(0.1) rotate(30deg); 5 | transform-origin: center bottom; 6 | } 7 | 8 | 50% { 9 | transform: rotate(-10deg); 10 | } 11 | 12 | 70% { 13 | transform: rotate(3deg); 14 | } 15 | 16 | to { 17 | opacity: 1; 18 | transform: scale(1); 19 | } 20 | } 21 | 22 | .jackInTheBox { 23 | animation-name: jackInTheBox; 24 | } 25 | -------------------------------------------------------------------------------- /source/attention_seekers/swing.css: -------------------------------------------------------------------------------- 1 | @keyframes swing { 2 | 20% { 3 | transform: rotate3d(0, 0, 1, 15deg); 4 | } 5 | 6 | 40% { 7 | transform: rotate3d(0, 0, 1, -10deg); 8 | } 9 | 10 | 60% { 11 | transform: rotate3d(0, 0, 1, 5deg); 12 | } 13 | 14 | 80% { 15 | transform: rotate3d(0, 0, 1, -5deg); 16 | } 17 | 18 | to { 19 | transform: rotate3d(0, 0, 1, 0deg); 20 | } 21 | } 22 | 23 | .swing { 24 | transform-origin: top center; 25 | animation-name: swing; 26 | } 27 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInUp { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInUp { 16 | animation-name: zoomInUp; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInDown { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInDown { 16 | animation-name: zoomInDown; 17 | } 18 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInLeft { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInLeft { 16 | animation-name: zoomInLeft; 17 | } 18 | -------------------------------------------------------------------------------- /source/lightspeed/lightSpeedIn.css: -------------------------------------------------------------------------------- 1 | @keyframes lightSpeedIn { 2 | from { 3 | transform: translate3d(100%, 0, 0) skewX(-30deg); 4 | opacity: 0; 5 | } 6 | 7 | 60% { 8 | transform: skewX(20deg); 9 | opacity: 1; 10 | } 11 | 12 | 80% { 13 | transform: skewX(-5deg); 14 | opacity: 1; 15 | } 16 | 17 | to { 18 | transform: none; 19 | opacity: 1; 20 | } 21 | } 22 | 23 | .lightSpeedIn { 24 | animation-name: lightSpeedIn; 25 | animation-timing-function: ease-out; 26 | } 27 | -------------------------------------------------------------------------------- /source/zooming_entrances/zoomInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomInRight { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | .zoomInRight { 16 | animation-name: zoomInRight; 17 | } 18 | -------------------------------------------------------------------------------- /source/attention_seekers/tada.css: -------------------------------------------------------------------------------- 1 | @keyframes tada { 2 | from { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 10%, 20% { 7 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 8 | } 9 | 10 | 30%, 50%, 70%, 90% { 11 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 12 | } 13 | 14 | 40%, 60%, 80% { 15 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 16 | } 17 | 18 | to { 19 | transform: scale3d(1, 1, 1); 20 | } 21 | } 22 | 23 | .tada { 24 | animation-name: tada; 25 | } 26 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutUp.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutUp { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | to { 9 | opacity: 0; 10 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 13 | } 14 | } 15 | 16 | .zoomOutUp { 17 | animation-name: zoomOutUp; 18 | } 19 | -------------------------------------------------------------------------------- /source/zooming_exits/zoomOutDown.css: -------------------------------------------------------------------------------- 1 | @keyframes zoomOutDown { 2 | 40% { 3 | opacity: 1; 4 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | to { 9 | opacity: 0; 10 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 11 | transform-origin: center bottom; 12 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 13 | } 14 | } 15 | 16 | .zoomOutDown { 17 | animation-name: zoomOutDown; 18 | } 19 | -------------------------------------------------------------------------------- /source/attention_seekers/rubberBand.css: -------------------------------------------------------------------------------- 1 | @keyframes rubberBand { 2 | from { 3 | transform: scale3d(1, 1, 1); 4 | } 5 | 6 | 30% { 7 | transform: scale3d(1.25, 0.75, 1); 8 | } 9 | 10 | 40% { 11 | transform: scale3d(0.75, 1.25, 1); 12 | } 13 | 14 | 50% { 15 | transform: scale3d(1.15, 0.85, 1); 16 | } 17 | 18 | 65% { 19 | transform: scale3d(.95, 1.05, 1); 20 | } 21 | 22 | 75% { 23 | transform: scale3d(1.05, .95, 1); 24 | } 25 | 26 | to { 27 | transform: scale3d(1, 1, 1); 28 | } 29 | } 30 | 31 | .rubberBand { 32 | animation-name: rubberBand; 33 | } 34 | -------------------------------------------------------------------------------- /source/attention_seekers/headShake.css: -------------------------------------------------------------------------------- 1 | @keyframes headShake { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 6.5% { 7 | transform: translateX(-6px) rotateY(-9deg); 8 | } 9 | 10 | 18.5% { 11 | transform: translateX(5px) rotateY(7deg); 12 | } 13 | 14 | 31.5% { 15 | transform: translateX(-3px) rotateY(-5deg); 16 | } 17 | 18 | 43.5% { 19 | transform: translateX(2px) rotateY(3deg); 20 | } 21 | 22 | 50% { 23 | transform: translateX(0); 24 | } 25 | } 26 | 27 | .headShake { 28 | animation-timing-function: ease-in-out; 29 | animation-name: headShake; 30 | } 31 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInDown.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInDown { 2 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(0, -3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, 25px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, -10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, 5px, 0); 22 | } 23 | 24 | to { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInDown { 30 | animation-name: bounceInDown; 31 | } 32 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInLeft.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInLeft { 2 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(-3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(-10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(5px, 0, 0); 22 | } 23 | 24 | to { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInLeft { 30 | animation-name: bounceInLeft; 31 | } 32 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInRight.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInRight { 2 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | from { 7 | opacity: 0; 8 | transform: translate3d(3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(-25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(-5px, 0, 0); 22 | } 23 | 24 | to { 25 | transform: none; 26 | } 27 | } 28 | 29 | .bounceInRight { 30 | animation-name: bounceInRight; 31 | } 32 | -------------------------------------------------------------------------------- /source/specials/hinge.css: -------------------------------------------------------------------------------- 1 | @keyframes hinge { 2 | 0% { 3 | transform-origin: top left; 4 | animation-timing-function: ease-in-out; 5 | } 6 | 7 | 20%, 60% { 8 | transform: rotate3d(0, 0, 1, 80deg); 9 | transform-origin: top left; 10 | animation-timing-function: ease-in-out; 11 | } 12 | 13 | 40%, 80% { 14 | transform: rotate3d(0, 0, 1, 60deg); 15 | transform-origin: top left; 16 | animation-timing-function: ease-in-out; 17 | opacity: 1; 18 | } 19 | 20 | to { 21 | transform: translate3d(0, 700px, 0); 22 | opacity: 0; 23 | } 24 | } 25 | 26 | .hinge { 27 | animation-name: hinge; 28 | } 29 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceInUp.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceInUp { 2 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | from { 7 | opacity: 0; 8 | transform: translate3d(0, 3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, -20px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, 10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, -5px, 0); 22 | } 23 | 24 | to { 25 | transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | 29 | .bounceInUp { 30 | animation-name: bounceInUp; 31 | } 32 | -------------------------------------------------------------------------------- /source/attention_seekers/bounce.css: -------------------------------------------------------------------------------- 1 | @keyframes bounce { 2 | from, 20%, 53%, 80%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | transform: translate3d(0,0,0); 5 | } 6 | 7 | 40%, 43% { 8 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | transform: translate3d(0, -30px, 0); 10 | } 11 | 12 | 70% { 13 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 14 | transform: translate3d(0, -15px, 0); 15 | } 16 | 17 | 90% { 18 | transform: translate3d(0,-4px,0); 19 | } 20 | } 21 | 22 | .bounce { 23 | animation-name: bounce; 24 | transform-origin: center bottom; 25 | } 26 | -------------------------------------------------------------------------------- /source/flippers/flipInX.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInX { 2 | from { 3 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 4 | animation-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 10 | animation-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 20 | } 21 | 22 | to { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInX { 28 | backface-visibility: visible !important; 29 | animation-name: flipInX; 30 | } 31 | -------------------------------------------------------------------------------- /source/flippers/flipInY.css: -------------------------------------------------------------------------------- 1 | @keyframes flipInY { 2 | from { 3 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 4 | animation-timing-function: ease-in; 5 | opacity: 0; 6 | } 7 | 8 | 40% { 9 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 10 | animation-timing-function: ease-in; 11 | } 12 | 13 | 60% { 14 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 15 | opacity: 1; 16 | } 17 | 18 | 80% { 19 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 20 | } 21 | 22 | to { 23 | transform: perspective(400px); 24 | } 25 | } 26 | 27 | .flipInY { 28 | backface-visibility: visible !important; 29 | animation-name: flipInY; 30 | } 31 | -------------------------------------------------------------------------------- /source/bouncing_entrances/bounceIn.css: -------------------------------------------------------------------------------- 1 | @keyframes bounceIn { 2 | from, 20%, 40%, 60%, 80%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: scale3d(.3, .3, .3); 9 | } 10 | 11 | 20% { 12 | transform: scale3d(1.1, 1.1, 1.1); 13 | } 14 | 15 | 40% { 16 | transform: scale3d(.9, .9, .9); 17 | } 18 | 19 | 60% { 20 | opacity: 1; 21 | transform: scale3d(1.03, 1.03, 1.03); 22 | } 23 | 24 | 80% { 25 | transform: scale3d(.97, .97, .97); 26 | } 27 | 28 | to { 29 | opacity: 1; 30 | transform: scale3d(1, 1, 1); 31 | } 32 | } 33 | 34 | .bounceIn { 35 | animation-name: bounceIn; 36 | } 37 | -------------------------------------------------------------------------------- /source/attention_seekers/wobble.css: -------------------------------------------------------------------------------- 1 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2 | 3 | @keyframes wobble { 4 | from { 5 | transform: none; 6 | } 7 | 8 | 15% { 9 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 10 | } 11 | 12 | 30% { 13 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 14 | } 15 | 16 | 45% { 17 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 18 | } 19 | 20 | 60% { 21 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 22 | } 23 | 24 | 75% { 25 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 26 | } 27 | 28 | to { 29 | transform: none; 30 | } 31 | } 32 | 33 | .wobble { 34 | animation-name: wobble; 35 | } 36 | -------------------------------------------------------------------------------- /source/attention_seekers/jello.css: -------------------------------------------------------------------------------- 1 | @keyframes jello { 2 | from, 11.1%, to { 3 | transform: none; 4 | } 5 | 6 | 22.2% { 7 | transform: skewX(-12.5deg) skewY(-12.5deg); 8 | } 9 | 10 | 33.3% { 11 | transform: skewX(6.25deg) skewY(6.25deg); 12 | } 13 | 14 | 44.4% { 15 | transform: skewX(-3.125deg) skewY(-3.125deg); 16 | } 17 | 18 | 55.5% { 19 | transform: skewX(1.5625deg) skewY(1.5625deg); 20 | } 21 | 22 | 66.6% { 23 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 24 | } 25 | 26 | 77.7% { 27 | transform: skewX(0.390625deg) skewY(0.390625deg); 28 | } 29 | 30 | 88.8% { 31 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 32 | } 33 | } 34 | 35 | .jello { 36 | animation-name: jello; 37 | transform-origin: center; 38 | } 39 | -------------------------------------------------------------------------------- /source/flippers/flip.css: -------------------------------------------------------------------------------- 1 | @keyframes flip { 2 | from { 3 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 4 | animation-timing-function: ease-out; 5 | } 6 | 7 | 40% { 8 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 9 | animation-timing-function: ease-out; 10 | } 11 | 12 | 50% { 13 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 14 | animation-timing-function: ease-in; 15 | } 16 | 17 | 80% { 18 | transform: perspective(400px) scale3d(.95, .95, .95); 19 | animation-timing-function: ease-in; 20 | } 21 | 22 | to { 23 | transform: perspective(400px); 24 | animation-timing-function: ease-in; 25 | } 26 | } 27 | 28 | .animated.flip { 29 | backface-visibility: visible; 30 | animation-name: flip; 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate.css", 3 | "version": "3.5.2", 4 | "main": "animate.css", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/daneden/animate.css.git" 8 | }, 9 | "author": { 10 | "name": "Daniel Eden" 11 | }, 12 | "homepage": "http://daneden.me/animate", 13 | "license": "MIT", 14 | "style": "./animate.css", 15 | "jspm": { 16 | "main": "animate.css!", 17 | "format": "global", 18 | "directories": { 19 | "lib": "./" 20 | } 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^6.3.2", 24 | "cssnano": "^3.5.1", 25 | "gulp": "^3.9.0", 26 | "gulp-concat": "^2.6.0", 27 | "gulp-header": "^1.7.1", 28 | "gulp-postcss": "^6.1.0", 29 | "gulp-rename": "^1.2.2", 30 | "gulp-util": "^3.0.7", 31 | "run-sequence": "^1.1.5" 32 | }, 33 | "spm": { 34 | "main": "./animate.css" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Daniel Eden 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /animate-config.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "attention_seekers": [ 4 | "bounce", 5 | "flash", 6 | "pulse", 7 | "rubberBand", 8 | "shake", 9 | "headShake", 10 | "swing", 11 | "tada", 12 | "wobble", 13 | "jello" 14 | ], 15 | 16 | "bouncing_entrances": [ 17 | "bounceIn", 18 | "bounceInDown", 19 | "bounceInLeft", 20 | "bounceInRight", 21 | "bounceInUp" 22 | ], 23 | 24 | "bouncing_exits": [ 25 | "bounceOut", 26 | "bounceOutDown", 27 | "bounceOutLeft", 28 | "bounceOutRight", 29 | "bounceOutUp" 30 | ], 31 | 32 | "fading_entrances": [ 33 | "fadeIn", 34 | "fadeInDown", 35 | "fadeInDownBig", 36 | "fadeInLeft", 37 | "fadeInLeftBig", 38 | "fadeInRight", 39 | "fadeInRightBig", 40 | "fadeInUp", 41 | "fadeInUpBig" 42 | ], 43 | 44 | "fading_exits": [ 45 | "fadeOut", 46 | "fadeOutDown", 47 | "fadeOutDownBig", 48 | "fadeOutLeft", 49 | "fadeOutLeftBig", 50 | "fadeOutRight", 51 | "fadeOutRightBig", 52 | "fadeOutUp", 53 | "fadeOutUpBig" 54 | ], 55 | 56 | "flippers": [ 57 | "flip", 58 | "flipInX", 59 | "flipInY", 60 | "flipOutX", 61 | "flipOutY" 62 | ], 63 | 64 | "lightspeed": [ 65 | "lightSpeedIn", 66 | "lightSpeedOut" 67 | ], 68 | 69 | "rotating_entrances": [ 70 | "rotateIn", 71 | "rotateInDownLeft", 72 | "rotateInDownRight", 73 | "rotateInUpLeft", 74 | "rotateInUpRight" 75 | ], 76 | 77 | "rotating_exits": [ 78 | "rotateOut", 79 | "rotateOutDownLeft", 80 | "rotateOutDownRight", 81 | "rotateOutUpLeft", 82 | "rotateOutUpRight" 83 | ], 84 | 85 | "specials": [ 86 | "hinge", 87 | "jackInTheBox", 88 | "rollIn", 89 | "rollOut" 90 | ], 91 | 92 | "zooming_entrances": [ 93 | "zoomIn", 94 | "zoomInDown", 95 | "zoomInLeft", 96 | "zoomInRight", 97 | "zoomInUp" 98 | ], 99 | 100 | "zooming_exits": [ 101 | "zoomOut", 102 | "zoomOutDown", 103 | "zoomOutLeft", 104 | "zoomOutRight", 105 | "zoomOutUp" 106 | ], 107 | 108 | "sliding_entrances": [ 109 | "slideInDown", 110 | "slideInLeft", 111 | "slideInRight", 112 | "slideInUp" 113 | ], 114 | 115 | "sliding_exits": [ 116 | "slideOutDown", 117 | "slideOutLeft", 118 | "slideOutRight", 119 | "slideOutUp" 120 | ] 121 | } 122 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Utilities 2 | var autoprefixer = require('autoprefixer'); 3 | var cssnano = require('cssnano'); 4 | var fs = require('fs'); 5 | 6 | // Gulp 7 | var gulp = require('gulp'); 8 | 9 | // Gulp plugins 10 | var concat = require('gulp-concat'); 11 | var gutil = require('gulp-util'); 12 | var header = require('gulp-header'); 13 | var postcss = require('gulp-postcss'); 14 | var rename = require('gulp-rename'); 15 | var runSequence = require('run-sequence'); 16 | 17 | // Misc/global vars 18 | var pkg = JSON.parse(fs.readFileSync('package.json')); 19 | var activatedAnimations = activateAnimations(); 20 | 21 | // Task options 22 | var opts = { 23 | destPath: './', 24 | concatName: 'animate.css', 25 | 26 | autoprefixer: { 27 | browsers: ['last 2 versions'], 28 | cascade: false 29 | }, 30 | 31 | minRename: { 32 | suffix: '.min' 33 | }, 34 | 35 | banner: [ 36 | '@charset "UTF-8";\n', 37 | '/*!', 38 | ' * <%= name %> -<%= homepage %>', 39 | ' * Version - <%= version %>', 40 | ' * Licensed under the MIT license - http://opensource.org/licenses/MIT', 41 | ' *', 42 | ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>', 43 | ' */\n\n' 44 | ].join('\n') 45 | }; 46 | 47 | // ---------------------------- 48 | // Gulp task definitions 49 | // ---------------------------- 50 | 51 | gulp.task('default', function() { 52 | runSequence('createCSS', 'addHeader'); 53 | }); 54 | 55 | gulp.task('createCSS', function() { 56 | return gulp.src(activatedAnimations) 57 | .pipe(concat(opts.concatName)) 58 | .pipe(postcss([ 59 | autoprefixer(opts.autoprefixer) 60 | ])) 61 | .pipe(gulp.dest(opts.destPath)) 62 | .pipe(postcss([ 63 | cssnano({reduceIdents: {keyframes: false}}) 64 | ])) 65 | .pipe(rename(opts.minRename)) 66 | .pipe(gulp.dest(opts.destPath)); 67 | }); 68 | 69 | gulp.task('addHeader', function() { 70 | return gulp.src('*.css') 71 | .pipe(header(opts.banner, pkg)) 72 | .pipe(gulp.dest(opts.destPath)); 73 | }); 74 | 75 | // ---------------------------- 76 | // Helpers/functions 77 | // ---------------------------- 78 | 79 | // Read the config file and return an array of the animations to be activated 80 | function activateAnimations() { 81 | var categories = JSON.parse(fs.readFileSync('animate-config.json')), 82 | category, files, file, 83 | target = [ 'source/_base.css' ], 84 | count = 0; 85 | 86 | for (category in categories) { 87 | if (categories.hasOwnProperty(category)) { 88 | files = categories[category]; 89 | 90 | for (var i = 0; i < files.length; ++i) { 91 | target.push('source/' + category + '/' + files[i] + '.css'); 92 | count += 1; 93 | } 94 | } 95 | } 96 | 97 | if (!count) { 98 | gutil.log('No animations activated.'); 99 | } else { 100 | gutil.log(count + (count > 1 ? ' animations' : ' animation') + ' activated.'); 101 | } 102 | 103 | return target; 104 | } 105 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animate.css [![GitHub release](https://img.shields.io/github/release/daneden/animate.css.svg)](https://github.com/daneden/animate.css/releases) [![Build Status](https://travis-ci.org/WarenGonzaga/animate.css.svg?branch=master)](https://travis-ci.org/WarenGonzaga/animate.css) [![devDependencies Status](https://david-dm.org/WarenGonzaga/animate.css/dev-status.svg)](https://david-dm.org/WarenGonzaga/animate.css?type=dev) [![chat](https://img.shields.io/badge/chat-gitter-green.svg)](https://gitter.im/animate-css/Lobby) 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 | ## Installation 7 | 8 | To install via Bower, simply do the following: 9 | 10 | ```bash 11 | $ bower install animate.css --save 12 | ``` 13 | or you can install via npm: 14 | 15 | ```bash 16 | $ npm install animate.css --save 17 | ``` 18 | 19 | ## Basic Usage 20 | 1. Include the stylesheet on your document's `` 21 | 22 | ```html 23 | 24 | 25 | 26 | ``` 27 | Instead of installing you may use the remote version (hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)): 28 | ```html 29 | 30 | 32 | 33 | ``` 34 | You may [generate a SRI hash](https://www.srihash.org/) of that particular version and then use it to ensure the file's integrity; also you can make anonymous requests to CDN by setting the corresponding [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute: 35 | ```html 36 | 37 | 41 | 42 | ``` 43 | 2. Add the class `animated` to the element you want to animate. 44 | You may also want to include the class `infinite` for an infinite loop. 45 | 46 | 3. Finally you need to add one of the following classes: 47 | 48 | | Class Name | 49 | |--------------------| 50 | | `bounce` | 51 | | `flash` | 52 | | `pulse` | 53 | | `rubberBand` | 54 | | `shake` | 55 | | `headShake` | 56 | | `swing` | 57 | | `tada` | 58 | | `wobble` | 59 | | `jello` | 60 | | `bounceIn` | 61 | | `bounceInDown` | 62 | | `bounceInLeft` | 63 | | `bounceInRight` | 64 | | `bounceInUp` | 65 | | `bounceOut` | 66 | | `bounceOutDown` | 67 | | `bounceOutLeft` | 68 | | `bounceOutRight` | 69 | | `bounceOutUp` | 70 | | `fadeIn` | 71 | | `fadeInDown` | 72 | | `fadeInDownBig` | 73 | | `fadeInLeft` | 74 | | `fadeInLeftBig` | 75 | | `fadeInRight` | 76 | | `fadeInRightBig` | 77 | | `fadeInUp` | 78 | | `fadeInUpBig` | 79 | | `fadeOut` | 80 | | `fadeOutDown` | 81 | | `fadeOutDownBig` | 82 | | `fadeOutLeft` | 83 | | `fadeOutLeftBig` | 84 | | `fadeOutRight` | 85 | | `fadeOutRightBig` | 86 | | `fadeOutUp` | 87 | | `fadeOutUpBig` | 88 | | `flipInX` | 89 | | `flipInY` | 90 | | `flipOutX` | 91 | | `flipOutY` | 92 | | `lightSpeedIn` | 93 | | `lightSpeedOut` | 94 | | `rotateIn` | 95 | | `rotateInDownLeft` | 96 | | `rotateInDownRight` | 97 | | `rotateInUpLeft` | 98 | | `rotateInUpRight` | 99 | | `rotateOut` | 100 | | `rotateOutDownLeft` | 101 | | `rotateOutDownRight` | 102 | | `rotateOutUpLeft` | 103 | | `rotateOutUpRight` | 104 | | `hinge` | 105 | | `jackInTheBox` | 106 | | `rollIn` | 107 | | `rollOut` | 108 | | `zoomIn` | 109 | | `zoomInDown` | 110 | | `zoomInLeft` | 111 | | `zoomInRight` | 112 | | `zoomInUp` | 113 | | `zoomOut` | 114 | | `zoomOutDown` | 115 | | `zoomOutLeft` | 116 | | `zoomOutRight` | 117 | | `zoomOutUp` | 118 | | `slideInDown` | 119 | | `slideInLeft` | 120 | | `slideInRight` | 121 | | `slideInUp` | 122 | | `slideOutDown` | 123 | | `slideOutLeft` | 124 | | `slideOutRight` | 125 | | `slideOutUp` | 126 | 127 | Full example: 128 | ```html 129 |

Example

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