diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a1998a5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.sass-cache +node_modules/ +.DS_Store \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..5131baf --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,58 @@ +module.exports = function(grunt) { + pkg: grunt.file.readJSON('package.json'), + grunt.initConfig({ + + // Concatenate CSS files + concat: { + dist: { + src: [ + // _base.css required for .animated helper class + 'source/_base.css', + 'source/**/*.css' + ] + dest: 'animate.css' + } + }, + + // Auto-prefix CSS properties using Can I Use? + autoprefixer: { + options: { + browsers: ['last 3 versions', 'bb 10', 'android 3'] + }, + no_dest: { + // File to output + src: 'animate.css' + }, + }, + + // Minify CSS + csso: { + dist: { + files: { + // Output compressed CSS to style.min.css + 'animate.min.css': ['animate.css'] + } + } + }, + + // Watch files for changes + watch: { + css: { + files: [ + 'source/**/*', + '!node_modules' + ], + // Run Sass, autoprefixer, and CSSO + tasks: ['concat', 'autoprefixer', 'csso'], + } + } + + }); + + // Register our tasks + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-autoprefixer'); + grunt.loadNpmTasks('grunt-csso'); + grunt.registerTask('default', ['watch']); +}; \ No newline at end of file diff --git a/README.md b/README.md index d63d76d..d829adc 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,12 @@ ##Usage 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! +```html + + + +``` + 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: ```javascript @@ -24,95 +30,32 @@ You can change the duration of your animations, add a delay or change the number *Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, ms, o)* -*Note: Safari in Mountion Lion (OS 10.8) has a display glitch with the Flippers. They may not appear at all until the animation is completed, or the page may have other artifacting. One fix is to add overflow: hidden to the parent div.* +## Custom Builds +Animate.css is powered by Grunt, and you can create custom builds pretty easily. First of all, you’ll need Grunt and all other dependencies: -##License +``` +$ cd path/to/animate.css/ +$ sudo npm install +``` + +Next, run `grunt watch` to watch for changes and compile your custom builds. For example, if you want only the “attention seekers”, simply delete them from the repository, or change `Gruntfile.js` to only concatenate the files you want: + +```javascript +concat: { + dist: { + src: [ + // _base.css required for .animated helper class + 'source/_base.css', + 'source/attention_seekers/*.css', + 'source/flippers/*.css' + ], + dest: 'animate.css' + } +} +``` + +## License Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT) ## Contributing -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. - -##Learn more -You can learn more about animate.css over at http://daneden.me/animate -You can also get in touch via email (dan.eden@me.com) or twitter (@_dte) if you need any help or have any issues. - -##Cheat Sheet - -####Attention seekers: -flash -bounce -shake -tada -swing -wobble -pulse - -####Flippers (currently Webkit, Firefox, & IE10 only): -flip -flipInX -flipOutX -flipInY -flipOutY - -####Fading entrances: -fadeIn -fadeInUp -fadeInDown -fadeInLeft -fadeInRight -fadeInUpBig -fadeInDownBig -fadeInLeftBig -fadeInRightBig - -####Fading exits: -fadeOut -fadeOutUp -fadeOutDown -fadeOutLeft -fadeOutRight -fadeOutUpBig -fadeOutDownBig -fadeOutLeftBig -fadeOutRightBig - -####Bouncing entrances: -bounceIn -bounceInDown -bounceInUp -bounceInLeft -bounceInRight - -####Bouncing exits: -bounceOut -bounceOutDown -bounceOutUp -bounceOutLeft -bounceOutRight - -####Rotating entrances: -rotateIn -rotateInDownLeft -rotateInDownRight -rotateInUpLeft -rotateInUpRight - -####Rotating exits: -rotateOut -rotateOutDownLeft -rotateOutDownRight -rotateOutUpLeft -rotateOutUpRight - -####Lightspeed: -lightSpeedIn -lightSpeedOut - -####Specials: -hinge -rollIn -rollOut - -## Other Resources - -- There's a [Ruby gem](https://github.com/camelmasa/animate-rails) available for Animate.css +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. \ No newline at end of file diff --git a/animate.css b/animate.css index 832af26..0d710b7 100644 --- a/animate.css +++ b/animate.css @@ -1,5 +1,7 @@ @charset "UTF-8"; -/* + + +/*! Animate.css - http://daneden.me/animate Licensed under the MIT license @@ -11,3482 +13,2546 @@ The above copyright notice and this permission notice shall be included in all c THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ - -webkit-backface-visibility: hidden; + +body { + /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + .animated { - -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -o-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - -o-animation-fill-mode: both; - animation-fill-mode: both; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } .animated.hinge { - -webkit-animation-duration: 2s; - -moz-animation-duration: 2s; - -o-animation-duration: 2s; - animation-duration: 2s; + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +@-webkit-keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; } @-webkit-keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} -} + 0%, 50%, 100% { + opacity: 1; + } -@-moz-keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} -} - -@-o-keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} + 25%, 75% { + opacity: 0; + } } @keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} + 0%, 50%, 100% { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } } -.animated.flash { - -webkit-animation-name: flash; - -moz-animation-name: flash; - -o-animation-name: flash; - animation-name: flash; -} -@-webkit-keyframes shake { - 0%, 100% {-webkit-transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} - 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} +.flash { + -webkit-animation-name: flash; + animation-name: flash; } -@-moz-keyframes shake { - 0%, 100% {-moz-transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} - 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} -} - -@-o-keyframes shake { - 0%, 100% {-o-transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} - 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} -} - -@keyframes shake { - 0%, 100% {transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} - 20%, 40%, 60%, 80% {transform: translateX(10px);} -} - -.animated.shake { - -webkit-animation-name: shake; - -moz-animation-name: shake; - -o-animation-name: shake; - animation-name: shake; -} -@-webkit-keyframes bounce { - 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} - 40% {-webkit-transform: translateY(-30px);} - 60% {-webkit-transform: translateY(-15px);} -} - -@-moz-keyframes bounce { - 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} - 40% {-moz-transform: translateY(-30px);} - 60% {-moz-transform: translateY(-15px);} -} - -@-o-keyframes bounce { - 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} - 40% {-o-transform: translateY(-30px);} - 60% {-o-transform: translateY(-15px);} -} -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} - 40% {transform: translateY(-30px);} - 60% {transform: translateY(-15px);} -} - -.animated.bounce { - -webkit-animation-name: bounce; - -moz-animation-name: bounce; - -o-animation-name: bounce; - animation-name: bounce; -} -@-webkit-keyframes tada { - 0% {-webkit-transform: scale(1);} - 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} - 100% {-webkit-transform: scale(1) rotate(0);} -} - -@-moz-keyframes tada { - 0% {-moz-transform: scale(1);} - 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} - 100% {-moz-transform: scale(1) rotate(0);} -} - -@-o-keyframes tada { - 0% {-o-transform: scale(1);} - 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} - 100% {-o-transform: scale(1) rotate(0);} -} - -@keyframes tada { - 0% {transform: scale(1);} - 10%, 20% {transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} - 100% {transform: scale(1) rotate(0);} -} - -.animated.tada { - -webkit-animation-name: tada; - -moz-animation-name: tada; - -o-animation-name: tada; - animation-name: tada; -} -@-webkit-keyframes swing { - 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } - 20% { -webkit-transform: rotate(15deg); } - 40% { -webkit-transform: rotate(-10deg); } - 60% { -webkit-transform: rotate(5deg); } - 80% { -webkit-transform: rotate(-5deg); } - 100% { -webkit-transform: rotate(0deg); } -} - -@-moz-keyframes swing { - 20% { -moz-transform: rotate(15deg); } - 40% { -moz-transform: rotate(-10deg); } - 60% { -moz-transform: rotate(5deg); } - 80% { -moz-transform: rotate(-5deg); } - 100% { -moz-transform: rotate(0deg); } -} - -@-o-keyframes swing { - 20% { -o-transform: rotate(15deg); } - 40% { -o-transform: rotate(-10deg); } - 60% { -o-transform: rotate(5deg); } - 80% { -o-transform: rotate(-5deg); } - 100% { -o-transform: rotate(0deg); } -} - -@keyframes swing { - 20% { transform: rotate(15deg); } - 40% { transform: rotate(-10deg); } - 60% { transform: rotate(5deg); } - 80% { transform: rotate(-5deg); } - 100% { transform: rotate(0deg); } -} - -.animated.swing { - -webkit-transform-origin: top center; - -moz-transform-origin: top center; - -o-transform-origin: top center; - transform-origin: top center; - -webkit-animation-name: swing; - -moz-animation-name: swing; - -o-animation-name: swing; - animation-name: swing; -} -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes wobble { - 0% { -webkit-transform: translateX(0%); } - 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } - 30% { -webkit-transform: translateX(20%) rotate(3deg); } - 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } - 60% { -webkit-transform: translateX(10%) rotate(2deg); } - 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } - 100% { -webkit-transform: translateX(0%); } -} - -@-moz-keyframes wobble { - 0% { -moz-transform: translateX(0%); } - 15% { -moz-transform: translateX(-25%) rotate(-5deg); } - 30% { -moz-transform: translateX(20%) rotate(3deg); } - 45% { -moz-transform: translateX(-15%) rotate(-3deg); } - 60% { -moz-transform: translateX(10%) rotate(2deg); } - 75% { -moz-transform: translateX(-5%) rotate(-1deg); } - 100% { -moz-transform: translateX(0%); } -} - -@-o-keyframes wobble { - 0% { -o-transform: translateX(0%); } - 15% { -o-transform: translateX(-25%) rotate(-5deg); } - 30% { -o-transform: translateX(20%) rotate(3deg); } - 45% { -o-transform: translateX(-15%) rotate(-3deg); } - 60% { -o-transform: translateX(10%) rotate(2deg); } - 75% { -o-transform: translateX(-5%) rotate(-1deg); } - 100% { -o-transform: translateX(0%); } -} - -@keyframes wobble { - 0% { transform: translateX(0%); } - 15% { transform: translateX(-25%) rotate(-5deg); } - 30% { transform: translateX(20%) rotate(3deg); } - 45% { transform: translateX(-15%) rotate(-3deg); } - 60% { transform: translateX(10%) rotate(2deg); } - 75% { transform: translateX(-5%) rotate(-1deg); } - 100% { transform: translateX(0%); } -} - -.animated.wobble { - -webkit-animation-name: wobble; - -moz-animation-name: wobble; - -o-animation-name: wobble; - animation-name: wobble; -} /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { - 0% { -webkit-transform: scale(1); } - 50% { -webkit-transform: scale(1.1); } - 100% { -webkit-transform: scale(1); } -} -@-moz-keyframes pulse { - 0% { -moz-transform: scale(1); } - 50% { -moz-transform: scale(1.1); } - 100% { -moz-transform: scale(1); } -} -@-o-keyframes pulse { - 0% { -o-transform: scale(1); } - 50% { -o-transform: scale(1.1); } - 100% { -o-transform: scale(1); } + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } } + @keyframes pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.1); } - 100% { transform: scale(1); } + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; } -.animated.pulse { - -webkit-animation-name: pulse; - -moz-animation-name: pulse; - -o-animation-name: pulse; - animation-name: pulse; -} -@-webkit-keyframes flip { - 0% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - -webkit-animation-timing-function: ease-out; - } - 40% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - -webkit-animation-timing-function: ease-out; - } - 50% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - -webkit-animation-timing-function: ease-in; - } - 80% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - -webkit-animation-timing-function: ease-in; - } - 100% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - -webkit-animation-timing-function: ease-in; - } -} -@-moz-keyframes flip { - 0% { - -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - -moz-animation-timing-function: ease-out; - } - 40% { - -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - -moz-animation-timing-function: ease-out; - } - 50% { - -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - -moz-animation-timing-function: ease-in; - } - 80% { - -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - -moz-animation-timing-function: ease-in; - } - 100% { - -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - -moz-animation-timing-function: ease-in; - } -} -@-o-keyframes flip { - 0% { - -o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - -o-animation-timing-function: ease-out; - } - 40% { - -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - -o-animation-timing-function: ease-out; - } - 50% { - -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - -o-animation-timing-function: ease-in; - } - 80% { - -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - -o-animation-timing-function: ease-in; - } - 100% { - -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - -o-animation-timing-function: ease-in; - } -} -@keyframes flip { - 0% { - transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - animation-timing-function: ease-out; - } - 40% { - transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - animation-timing-function: ease-out; - } - 50% { - transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - animation-timing-function: ease-in; - } - 80% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - animation-timing-function: ease-in; - } - 100% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - animation-timing-function: ease-in; - } -} - -.animated.flip { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flip; - -moz-backface-visibility: visible !important; - -moz-animation-name: flip; - -o-backface-visibility: visible !important; - -o-animation-name: flip; - backface-visibility: visible !important; - animation-name: flip; -} -@-webkit-keyframes flipInX { - 0% { - -webkit-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotateX(-10deg); - } - - 70% { - -webkit-transform: perspective(400px) rotateX(10deg); - } - - 100% { - -webkit-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} -@-moz-keyframes flipInX { - 0% { - -moz-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - -moz-transform: perspective(400px) rotateX(-10deg); - } - - 70% { - -moz-transform: perspective(400px) rotateX(10deg); - } - - 100% { - -moz-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} -@-o-keyframes flipInX { - 0% { - -o-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - -o-transform: perspective(400px) rotateX(-10deg); - } - - 70% { - -o-transform: perspective(400px) rotateX(10deg); - } - - 100% { - -o-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} -@keyframes flipInX { - 0% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - transform: perspective(400px) rotateX(-10deg); - } - - 70% { - transform: perspective(400px) rotateX(10deg); - } - - 100% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} - -.animated.flipInX { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flipInX; - -moz-backface-visibility: visible !important; - -moz-animation-name: flipInX; - -o-backface-visibility: visible !important; - -o-animation-name: flipInX; - backface-visibility: visible !important; - animation-name: flipInX; -} -@-webkit-keyframes flipOutX { - 0% { - -webkit-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - -webkit-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -@-moz-keyframes flipOutX { - 0% { - -moz-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - -moz-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -@-o-keyframes flipOutX { - 0% { - -o-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - -o-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -@keyframes flipOutX { - 0% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -.animated.flipOutX { - -webkit-animation-name: flipOutX; - -webkit-backface-visibility: visible !important; - -moz-animation-name: flipOutX; - -moz-backface-visibility: visible !important; - -o-animation-name: flipOutX; - -o-backface-visibility: visible !important; - animation-name: flipOutX; - backface-visibility: visible !important; -} -@-webkit-keyframes flipInY { - 0% { - -webkit-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotateY(-10deg); - } - - 70% { - -webkit-transform: perspective(400px) rotateY(10deg); - } - - 100% { - -webkit-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} -@-moz-keyframes flipInY { - 0% { - -moz-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - -moz-transform: perspective(400px) rotateY(-10deg); - } - - 70% { - -moz-transform: perspective(400px) rotateY(10deg); - } - - 100% { - -moz-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} -@-o-keyframes flipInY { - 0% { - -o-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - -o-transform: perspective(400px) rotateY(-10deg); - } - - 70% { - -o-transform: perspective(400px) rotateY(10deg); - } - - 100% { - -o-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} -@keyframes flipInY { - 0% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - transform: perspective(400px) rotateY(-10deg); - } - - 70% { - transform: perspective(400px) rotateY(10deg); - } - - 100% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} - -.animated.flipInY { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flipInY; - -moz-backface-visibility: visible !important; - -moz-animation-name: flipInY; - -o-backface-visibility: visible !important; - -o-animation-name: flipInY; - backface-visibility: visible !important; - animation-name: flipInY; -} -@-webkit-keyframes flipOutY { - 0% { - -webkit-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - -webkit-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} -@-moz-keyframes flipOutY { - 0% { - -moz-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - -moz-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} -@-o-keyframes flipOutY { - 0% { - -o-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - -o-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} -@keyframes flipOutY { - 0% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} - -.animated.flipOutY { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flipOutY; - -moz-backface-visibility: visible !important; - -moz-animation-name: flipOutY; - -o-backface-visibility: visible !important; - -o-animation-name: flipOutY; - backface-visibility: visible !important; - animation-name: flipOutY; -} -@-webkit-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@-moz-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@-o-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -.animated.fadeIn { - -webkit-animation-name: fadeIn; - -moz-animation-name: fadeIn; - -o-animation-name: fadeIn; - animation-name: fadeIn; -} -@-webkit-keyframes fadeInUp { - 0% { - opacity: 0; - -webkit-transform: translateY(20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInUp { - 0% { - opacity: 0; - -moz-transform: translateY(20px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInUp { - 0% { - opacity: 0; - -o-transform: translateY(20px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.animated.fadeInUp { - -webkit-animation-name: fadeInUp; - -moz-animation-name: fadeInUp; - -o-animation-name: fadeInUp; - animation-name: fadeInUp; -} -@-webkit-keyframes fadeInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-20px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInDown { - 0% { - opacity: 0; - -o-transform: translateY(-20px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.animated.fadeInDown { - -webkit-animation-name: fadeInDown; - -moz-animation-name: fadeInDown; - -o-animation-name: fadeInDown; - animation-name: fadeInDown; -} -@-webkit-keyframes fadeInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes fadeInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-20px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} - -@-o-keyframes fadeInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-20px); - } +@-webkit-keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} + +@keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} + +.shake { + -webkit-animation-name: shake; + animation-name: shake; +} + +@-webkit-keyframes swing { + 20% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + + 40% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 60% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + + 80% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} + +@keyframes swing { + 20% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + + 40% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 60% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + + 80% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } +} + +.swing { + -webkit-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing; +} + +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 10%, 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +@keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 10%, 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +.tada { + -webkit-animation-name: tada; + animation-name: tada; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes wobble { + 0% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + + 15% { + -webkit-transform: translateX(-25%) rotate(-5deg); + transform: translateX(-25%) rotate(-5deg); + } + + 30% { + -webkit-transform: translateX(20%) rotate(3deg); + transform: translateX(20%) rotate(3deg); + } + + 45% { + -webkit-transform: translateX(-15%) rotate(-3deg); + transform: translateX(-15%) rotate(-3deg); + } -@keyframes fadeInLeft { - 0% { - opacity: 0; - transform: translateX(-20px); - } + 60% { + -webkit-transform: translateX(10%) rotate(2deg); + transform: translateX(10%) rotate(2deg); + } - 100% { - opacity: 1; - transform: translateX(0); - } -} + 75% { + -webkit-transform: translateX(-5%) rotate(-1deg); + transform: translateX(-5%) rotate(-1deg); + } -.animated.fadeInLeft { - -webkit-animation-name: fadeInLeft; - -moz-animation-name: fadeInLeft; - -o-animation-name: fadeInLeft; - animation-name: fadeInLeft; -} -@-webkit-keyframes fadeInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} + 100% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} -@-moz-keyframes fadeInRight { - 0% { - opacity: 0; - -moz-transform: translateX(20px); - } +@keyframes wobble { + 0% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + + 15% { + -webkit-transform: translateX(-25%) rotate(-5deg); + transform: translateX(-25%) rotate(-5deg); + } + + 30% { + -webkit-transform: translateX(20%) rotate(3deg); + transform: translateX(20%) rotate(3deg); + } - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} - -@-o-keyframes fadeInRight { - 0% { - opacity: 0; - -o-transform: translateX(20px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} + 45% { + -webkit-transform: translateX(-15%) rotate(-3deg); + transform: translateX(-15%) rotate(-3deg); + } -@keyframes fadeInRight { - 0% { - opacity: 0; - transform: translateX(20px); - } + 60% { + -webkit-transform: translateX(10%) rotate(2deg); + transform: translateX(10%) rotate(2deg); + } - 100% { - opacity: 1; - transform: translateX(0); - } + 75% { + -webkit-transform: translateX(-5%) rotate(-1deg); + transform: translateX(-5%) rotate(-1deg); + } + + 100% { + -webkit-transform: translateX(0%); + transform: translateX(0%); + } } -.animated.fadeInRight { - -webkit-animation-name: fadeInRight; - -moz-animation-name: fadeInRight; - -o-animation-name: fadeInRight; - animation-name: fadeInRight; -} -@-webkit-keyframes fadeInUpBig { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInUpBig { - 0% { - opacity: 0; - -moz-transform: translateY(2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInUpBig { - 0% { - opacity: 0; - -o-transform: translateY(2000px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInUpBig { - 0% { - opacity: 0; - transform: translateY(2000px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.animated.fadeInUpBig { - -webkit-animation-name: fadeInUpBig; - -moz-animation-name: fadeInUpBig; - -o-animation-name: fadeInUpBig; - animation-name: fadeInUpBig; -} -@-webkit-keyframes fadeInDownBig { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInDownBig { - 0% { - opacity: 0; - -moz-transform: translateY(-2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInDownBig { - 0% { - opacity: 0; - -o-transform: translateY(-2000px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInDownBig { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } +.wobble { + -webkit-animation-name: wobble; + animation-name: wobble; } -.animated.fadeInDownBig { - -webkit-animation-name: fadeInDownBig; - -moz-animation-name: fadeInDownBig; - -o-animation-name: fadeInDownBig; - animation-name: fadeInDownBig; -} -@-webkit-keyframes fadeInLeftBig { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} -@-moz-keyframes fadeInLeftBig { - 0% { - opacity: 0; - -moz-transform: translateX(-2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} -@-o-keyframes fadeInLeftBig { - 0% { - opacity: 0; - -o-transform: translateX(-2000px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} -@keyframes fadeInLeftBig { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.animated.fadeInLeftBig { - -webkit-animation-name: fadeInLeftBig; - -moz-animation-name: fadeInLeftBig; - -o-animation-name: fadeInLeftBig; - animation-name: fadeInLeftBig; -} -@-webkit-keyframes fadeInRightBig { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes fadeInRightBig { - 0% { - opacity: 0; - -moz-transform: translateX(2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} - -@-o-keyframes fadeInRightBig { - 0% { - opacity: 0; - -o-transform: translateX(2000px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} - -@keyframes fadeInRightBig { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.animated.fadeInRightBig { - -webkit-animation-name: fadeInRightBig; - -moz-animation-name: fadeInRightBig; - -o-animation-name: fadeInRightBig; - animation-name: fadeInRightBig; -} -@-webkit-keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -@-moz-keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -@-o-keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -@keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -.animated.fadeOut { - -webkit-animation-name: fadeOut; - -moz-animation-name: fadeOut; - -o-animation-name: fadeOut; - animation-name: fadeOut; -} -@-webkit-keyframes fadeOutUp { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-20px); - } -} -@-moz-keyframes fadeOutUp { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-20px); - } -} -@-o-keyframes fadeOutUp { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(-20px); - } -} -@keyframes fadeOutUp { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-20px); - } -} - -.animated.fadeOutUp { - -webkit-animation-name: fadeOutUp; - -moz-animation-name: fadeOutUp; - -o-animation-name: fadeOutUp; - animation-name: fadeOutUp; -} -@-webkit-keyframes fadeOutDown { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(20px); - } -} - -@-moz-keyframes fadeOutDown { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(20px); - } -} - -@-o-keyframes fadeOutDown { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(20px); - } -} - -@keyframes fadeOutDown { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(20px); - } -} - -.animated.fadeOutDown { - -webkit-animation-name: fadeOutDown; - -moz-animation-name: fadeOutDown; - -o-animation-name: fadeOutDown; - animation-name: fadeOutDown; -} -@-webkit-keyframes fadeOutLeft { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-20px); - } -} - -@-moz-keyframes fadeOutLeft { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-20px); - } -} - -@-o-keyframes fadeOutLeft { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(-20px); - } -} - -@keyframes fadeOutLeft { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-20px); - } -} - -.animated.fadeOutLeft { - -webkit-animation-name: fadeOutLeft; - -moz-animation-name: fadeOutLeft; - -o-animation-name: fadeOutLeft; - animation-name: fadeOutLeft; -} -@-webkit-keyframes fadeOutRight { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(20px); - } -} - -@-moz-keyframes fadeOutRight { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(20px); - } -} - -@-o-keyframes fadeOutRight { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(20px); - } -} - -@keyframes fadeOutRight { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(20px); - } -} - -.animated.fadeOutRight { - -webkit-animation-name: fadeOutRight; - -moz-animation-name: fadeOutRight; - -o-animation-name: fadeOutRight; - animation-name: fadeOutRight; -} -@-webkit-keyframes fadeOutUpBig { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } -} - -@-moz-keyframes fadeOutUpBig { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-2000px); - } -} - -@-o-keyframes fadeOutUpBig { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(-2000px); - } -} - -@keyframes fadeOutUpBig { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.animated.fadeOutUpBig { - -webkit-animation-name: fadeOutUpBig; - -moz-animation-name: fadeOutUpBig; - -o-animation-name: fadeOutUpBig; - animation-name: fadeOutUpBig; -} -@-webkit-keyframes fadeOutDownBig { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(2000px); - } -} - -@-moz-keyframes fadeOutDownBig { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(2000px); - } -} - -@-o-keyframes fadeOutDownBig { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(2000px); - } -} - -@keyframes fadeOutDownBig { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(2000px); - } -} - -.animated.fadeOutDownBig { - -webkit-animation-name: fadeOutDownBig; - -moz-animation-name: fadeOutDownBig; - -o-animation-name: fadeOutDownBig; - animation-name: fadeOutDownBig; -} -@-webkit-keyframes fadeOutLeftBig { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } -} - -@-moz-keyframes fadeOutLeftBig { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-2000px); - } -} - -@-o-keyframes fadeOutLeftBig { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(-2000px); - } -} - -@keyframes fadeOutLeftBig { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.animated.fadeOutLeftBig { - -webkit-animation-name: fadeOutLeftBig; - -moz-animation-name: fadeOutLeftBig; - -o-animation-name: fadeOutLeftBig; - animation-name: fadeOutLeftBig; -} -@-webkit-keyframes fadeOutRightBig { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - } -} -@-moz-keyframes fadeOutRightBig { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(2000px); - } -} -@-o-keyframes fadeOutRightBig { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(2000px); - } -} -@keyframes fadeOutRightBig { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.animated.fadeOutRightBig { - -webkit-animation-name: fadeOutRightBig; - -moz-animation-name: fadeOutRightBig; - -o-animation-name: fadeOutRightBig; - animation-name: fadeOutRightBig; -} @-webkit-keyframes bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.3); - } + 0% { + opacity: 0; + -webkit-transform: scale(.3); + transform: scale(.3); + } - 50% { - opacity: 1; - -webkit-transform: scale(1.05); - } + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + transform: scale(1.05); + } - 70% { - -webkit-transform: scale(.9); - } + 70% { + -webkit-transform: scale(.9); + transform: scale(.9); + } - 100% { - -webkit-transform: scale(1); - } -} - -@-moz-keyframes bounceIn { - 0% { - opacity: 0; - -moz-transform: scale(.3); - } - - 50% { - opacity: 1; - -moz-transform: scale(1.05); - } - - 70% { - -moz-transform: scale(.9); - } - - 100% { - -moz-transform: scale(1); - } -} - -@-o-keyframes bounceIn { - 0% { - opacity: 0; - -o-transform: scale(.3); - } - - 50% { - opacity: 1; - -o-transform: scale(1.05); - } - - 70% { - -o-transform: scale(.9); - } - - 100% { - -o-transform: scale(1); - } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } } @keyframes bounceIn { - 0% { - opacity: 0; - transform: scale(.3); - } + 0% { + opacity: 0; + -webkit-transform: scale(.3); + transform: scale(.3); + } - 50% { - opacity: 1; - transform: scale(1.05); - } + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + transform: scale(1.05); + } - 70% { - transform: scale(.9); - } + 70% { + -webkit-transform: scale(.9); + transform: scale(.9); + } - 100% { - transform: scale(1); - } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } } -@-webkit-keyframes slideInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } - - 100% { - -webkit-transform: translateY(0); - } +.bounceIn { + -webkit-animation-name: bounceIn; + animation-name: bounceIn; } -@-moz-keyframes slideInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-2000px); - } - - 100% { - -moz-transform: translateY(0); - } -} - -@-o-keyframes slideInDown { - 0% { - opacity: 0; - -o-transform: translateY(-2000px); - } - - 100% { - -o-transform: translateY(0); - } -} - -@keyframes slideInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 100% { - transform: translateY(0); - } -} - -.slideInDown { - -webkit-animation-name: slideInDown; - -moz-animation-name: slideInDown; - -o-animation-name: slideInDown; - animation-name: slideInDown; -} - -@-webkit-keyframes slideInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes slideInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-2000px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes slideInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-2000px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes slideInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInLeft { - -webkit-animation-name: slideInLeft; - -moz-animation-name: slideInLeft; - -o-animation-name: slideInLeft; - animation-name: slideInLeft; -} - -@-webkit-keyframes slideInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes slideInRight { - 0% { - opacity: 0; - -moz-transform: translateX(2000px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes slideInRight { - 0% { - opacity: 0; - -o-transform: translateX(2000px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes slideInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInRight { - -webkit-animation-name: slideInRight; - -moz-animation-name: slideInRight; - -o-animation-name: slideInRight; - animation-name: slideInRight; -} - -@-webkit-keyframes slideOutLeft { - 0% { - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } -} - -@-moz-keyframes slideOutLeft { - 0% { - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-2000px); - } -} - -@-o-keyframes slideOutLeft { - 0% { - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(-2000px); - } -} - -@keyframes slideOutLeft { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.slideOutLeft { - -webkit-animation-name: slideOutLeft; - -moz-animation-name: slideOutLeft; - -o-animation-name: slideOutLeft; - animation-name: slideOutLeft; -} - -@-webkit-keyframes slideOutRight { - 0% { - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - } -} - -@-moz-keyframes slideOutRight { - 0% { - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(2000px); - } -} - -@-o-keyframes slideOutRight { - 0% { - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(2000px); - } -} - -@keyframes slideOutRight { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.slideOutRight { - -webkit-animation-name: slideOutRight; - -moz-animation-name: slideOutRight; - -o-animation-name: slideOutRight; - animation-name: slideOutRight; -} - -@-webkit-keyframes slideOutUp { - 0% { - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } -} - -@-moz-keyframes slideOutUp { - 0% { - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-2000px); - } -} - -@-o-keyframes slideOutUp { - 0% { - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(-2000px); - } -} - -@keyframes slideOutUp { - 0% { - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.slideOutUp { - -webkit-animation-name: slideOutUp; - -moz-animation-name: slideOutUp; - -o-animation-name: slideOutUp; - animation-name: slideOutUp; -} - -.animated.bounceIn { - -webkit-animation-name: bounceIn; - -moz-animation-name: bounceIn; - -o-animation-name: bounceIn; - animation-name: bounceIn; -} -@-webkit-keyframes bounceInUp { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - } - - 60% { - opacity: 1; - -webkit-transform: translateY(-30px); - } - - 80% { - -webkit-transform: translateY(10px); - } - - 100% { - -webkit-transform: translateY(0); - } -} -@-moz-keyframes bounceInUp { - 0% { - opacity: 0; - -moz-transform: translateY(2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateY(-30px); - } - - 80% { - -moz-transform: translateY(10px); - } - - 100% { - -moz-transform: translateY(0); - } -} - -@-o-keyframes bounceInUp { - 0% { - opacity: 0; - -o-transform: translateY(2000px); - } - - 60% { - opacity: 1; - -o-transform: translateY(-30px); - } - - 80% { - -o-transform: translateY(10px); - } - - 100% { - -o-transform: translateY(0); - } -} - -@keyframes bounceInUp { - 0% { - opacity: 0; - transform: translateY(2000px); - } - - 60% { - opacity: 1; - transform: translateY(-30px); - } - - 80% { - transform: translateY(10px); - } - - 100% { - transform: translateY(0); - } -} - -.animated.bounceInUp { - -webkit-animation-name: bounceInUp; - -moz-animation-name: bounceInUp; - -o-animation-name: bounceInUp; - animation-name: bounceInUp; -} @-webkit-keyframes bounceInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } - 60% { - opacity: 1; - -webkit-transform: translateY(30px); - } + 60% { + opacity: 1; + -webkit-transform: translateY(30px); + transform: translateY(30px); + } - 80% { - -webkit-transform: translateY(-10px); - } + 80% { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } - 100% { - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes bounceInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateY(30px); - } - - 80% { - -moz-transform: translateY(-10px); - } - - 100% { - -moz-transform: translateY(0); - } -} - -@-o-keyframes bounceInDown { - 0% { - opacity: 0; - -o-transform: translateY(-2000px); - } - - 60% { - opacity: 1; - -o-transform: translateY(30px); - } - - 80% { - -o-transform: translateY(-10px); - } - - 100% { - -o-transform: translateY(0); - } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } } @keyframes bounceInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } - 60% { - opacity: 1; - transform: translateY(30px); - } + 60% { + opacity: 1; + -webkit-transform: translateY(30px); + transform: translateY(30px); + } - 80% { - transform: translateY(-10px); - } + 80% { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } - 100% { - transform: translateY(0); - } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } } -.animated.bounceInDown { - -webkit-animation-name: bounceInDown; - -moz-animation-name: bounceInDown; - -o-animation-name: bounceInDown; - animation-name: bounceInDown; +.bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown; } + @-webkit-keyframes bounceInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - } + 60% { + opacity: 1; + -webkit-transform: translateX(30px); + transform: translateX(30px); + } - 80% { - -webkit-transform: translateX(-10px); - } + 80% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes bounceInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateX(30px); - } - - 80% { - -moz-transform: translateX(-10px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes bounceInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-2000px); - } - - 60% { - opacity: 1; - -o-transform: translateX(30px); - } - - 80% { - -o-transform: translateX(-10px); - } - - 100% { - -o-transform: translateX(0); - } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } } @keyframes bounceInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } - 60% { - opacity: 1; - transform: translateX(30px); - } + 60% { + opacity: 1; + -webkit-transform: translateX(30px); + transform: translateX(30px); + } - 80% { - transform: translateX(-10px); - } + 80% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } - 100% { - transform: translateX(0); - } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } } -.animated.bounceInLeft { - -webkit-animation-name: bounceInLeft; - -moz-animation-name: bounceInLeft; - -o-animation-name: bounceInLeft; - animation-name: bounceInLeft; +.bounceInLeft { + -webkit-animation-name: bounceInLeft; + animation-name: bounceInLeft; } + @-webkit-keyframes bounceInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - } + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } - 60% { - opacity: 1; - -webkit-transform: translateX(-30px); - } + 60% { + opacity: 1; + -webkit-transform: translateX(-30px); + transform: translateX(-30px); + } - 80% { - -webkit-transform: translateX(10px); - } + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes bounceInRight { - 0% { - opacity: 0; - -moz-transform: translateX(2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateX(-30px); - } - - 80% { - -moz-transform: translateX(10px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes bounceInRight { - 0% { - opacity: 0; - -o-transform: translateX(2000px); - } - - 60% { - opacity: 1; - -o-transform: translateX(-30px); - } - - 80% { - -o-transform: translateX(10px); - } - - 100% { - -o-transform: translateX(0); - } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } } @keyframes bounceInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } - 60% { - opacity: 1; - transform: translateX(-30px); - } + 60% { + opacity: 1; + -webkit-transform: translateX(-30px); + transform: translateX(-30px); + } - 80% { - transform: translateX(10px); - } + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } - 100% { - transform: translateX(0); - } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } } -.animated.bounceInRight { - -webkit-animation-name: bounceInRight; - -moz-animation-name: bounceInRight; - -o-animation-name: bounceInRight; - animation-name: bounceInRight; +.bounceInRight { + -webkit-animation-name: bounceInRight; + animation-name: bounceInRight; } + +@-webkit-keyframes bounceInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 80% { + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes bounceInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } + + 60% { + opacity: 1; + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 80% { + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +.bounceInUp { + -webkit-animation-name: bounceInUp; + animation-name: bounceInUp; +} + @-webkit-keyframes bounceOut { - 0% { - -webkit-transform: scale(1); - } + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } - 25% { - -webkit-transform: scale(.95); - } + 25% { + -webkit-transform: scale(.95); + transform: scale(.95); + } - 50% { - opacity: 1; - -webkit-transform: scale(1.1); - } + 50% { + opacity: 1; + -webkit-transform: scale(1.1); + transform: scale(1.1); + } - 100% { - opacity: 0; - -webkit-transform: scale(.3); - } -} - -@-moz-keyframes bounceOut { - 0% { - -moz-transform: scale(1); - } - - 25% { - -moz-transform: scale(.95); - } - - 50% { - opacity: 1; - -moz-transform: scale(1.1); - } - - 100% { - opacity: 0; - -moz-transform: scale(.3); - } -} - -@-o-keyframes bounceOut { - 0% { - -o-transform: scale(1); - } - - 25% { - -o-transform: scale(.95); - } - - 50% { - opacity: 1; - -o-transform: scale(1.1); - } - - 100% { - opacity: 0; - -o-transform: scale(.3); - } + 100% { + opacity: 0; + -webkit-transform: scale(.3); + transform: scale(.3); + } } @keyframes bounceOut { - 0% { - transform: scale(1); - } + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } - 25% { - transform: scale(.95); - } + 25% { + -webkit-transform: scale(.95); + transform: scale(.95); + } - 50% { - opacity: 1; - transform: scale(1.1); - } + 50% { + opacity: 1; + -webkit-transform: scale(1.1); + transform: scale(1.1); + } - 100% { - opacity: 0; - transform: scale(.3); - } + 100% { + opacity: 0; + -webkit-transform: scale(.3); + transform: scale(.3); + } } -.animated.bounceOut { - -webkit-animation-name: bounceOut; - -moz-animation-name: bounceOut; - -o-animation-name: bounceOut; - animation-name: bounceOut; -} -@-webkit-keyframes bounceOutUp { - 0% { - -webkit-transform: translateY(0); - } - - 20% { - opacity: 1; - -webkit-transform: translateY(20px); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } +.bounceOut { + -webkit-animation-name: bounceOut; + animation-name: bounceOut; } -@-moz-keyframes bounceOutUp { - 0% { - -moz-transform: translateY(0); - } - - 20% { - opacity: 1; - -moz-transform: translateY(20px); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-2000px); - } -} - -@-o-keyframes bounceOutUp { - 0% { - -o-transform: translateY(0); - } - - 20% { - opacity: 1; - -o-transform: translateY(20px); - } - - 100% { - opacity: 0; - -o-transform: translateY(-2000px); - } -} - -@keyframes bounceOutUp { - 0% { - transform: translateY(0); - } - - 20% { - opacity: 1; - transform: translateY(20px); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.animated.bounceOutUp { - -webkit-animation-name: bounceOutUp; - -moz-animation-name: bounceOutUp; - -o-animation-name: bounceOutUp; - animation-name: bounceOutUp; -} @-webkit-keyframes bounceOutDown { - 0% { - -webkit-transform: translateY(0); - } + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } - 20% { - opacity: 1; - -webkit-transform: translateY(-20px); - } + 20% { + opacity: 1; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } - 100% { - opacity: 0; - -webkit-transform: translateY(2000px); - } -} - -@-moz-keyframes bounceOutDown { - 0% { - -moz-transform: translateY(0); - } - - 20% { - opacity: 1; - -moz-transform: translateY(-20px); - } - - 100% { - opacity: 0; - -moz-transform: translateY(2000px); - } -} - -@-o-keyframes bounceOutDown { - 0% { - -o-transform: translateY(0); - } - - 20% { - opacity: 1; - -o-transform: translateY(-20px); - } - - 100% { - opacity: 0; - -o-transform: translateY(2000px); - } + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } } @keyframes bounceOutDown { - 0% { - transform: translateY(0); - } + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } - 20% { - opacity: 1; - transform: translateY(-20px); - } + 20% { + opacity: 1; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } - 100% { - opacity: 0; - transform: translateY(2000px); - } + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } } -.animated.bounceOutDown { - -webkit-animation-name: bounceOutDown; - -moz-animation-name: bounceOutDown; - -o-animation-name: bounceOutDown; - animation-name: bounceOutDown; +.bounceOutDown { + -webkit-animation-name: bounceOutDown; + animation-name: bounceOutDown; } + @-webkit-keyframes bounceOutLeft { - 0% { - -webkit-transform: translateX(0); - } + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } - 20% { - opacity: 1; - -webkit-transform: translateX(20px); - } + 20% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } -} - -@-moz-keyframes bounceOutLeft { - 0% { - -moz-transform: translateX(0); - } - - 20% { - opacity: 1; - -moz-transform: translateX(20px); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-2000px); - } -} - -@-o-keyframes bounceOutLeft { - 0% { - -o-transform: translateX(0); - } - - 20% { - opacity: 1; - -o-transform: translateX(20px); - } - - 100% { - opacity: 0; - -o-transform: translateX(-2000px); - } + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } } @keyframes bounceOutLeft { - 0% { - transform: translateX(0); - } + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } - 20% { - opacity: 1; - transform: translateX(20px); - } + 20% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } - 100% { - opacity: 0; - transform: translateX(-2000px); - } + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } } -.animated.bounceOutLeft { - -webkit-animation-name: bounceOutLeft; - -moz-animation-name: bounceOutLeft; - -o-animation-name: bounceOutLeft; - animation-name: bounceOutLeft; +.bounceOutLeft { + -webkit-animation-name: bounceOutLeft; + animation-name: bounceOutLeft; } + @-webkit-keyframes bounceOutRight { - 0% { - -webkit-transform: translateX(0); - } + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } - 20% { - opacity: 1; - -webkit-transform: translateX(-20px); - } + 20% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - } -} - -@-moz-keyframes bounceOutRight { - 0% { - -moz-transform: translateX(0); - } - - 20% { - opacity: 1; - -moz-transform: translateX(-20px); - } - - 100% { - opacity: 0; - -moz-transform: translateX(2000px); - } -} - -@-o-keyframes bounceOutRight { - 0% { - -o-transform: translateX(0); - } - - 20% { - opacity: 1; - -o-transform: translateX(-20px); - } - - 100% { - opacity: 0; - -o-transform: translateX(2000px); - } + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } } @keyframes bounceOutRight { - 0% { - transform: translateX(0); - } - - 20% { - opacity: 1; - transform: translateX(-20px); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.animated.bounceOutRight { - -webkit-animation-name: bounceOutRight; - -moz-animation-name: bounceOutRight; - -o-animation-name: bounceOutRight; - animation-name: bounceOutRight; -} -@-webkit-keyframes rotateIn { - 0% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(-200deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(0); - opacity: 1; - } -} -@-moz-keyframes rotateIn { - 0% { - -moz-transform-origin: center center; - -moz-transform: rotate(-200deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: center center; - -moz-transform: rotate(0); - opacity: 1; - } -} -@-o-keyframes rotateIn { - 0% { - -o-transform-origin: center center; - -o-transform: rotate(-200deg); - opacity: 0; - } - - 100% { - -o-transform-origin: center center; - -o-transform: rotate(0); - opacity: 1; - } -} -@keyframes rotateIn { - 0% { - transform-origin: center center; - transform: rotate(-200deg); - opacity: 0; - } - - 100% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } -} - -.animated.rotateIn { - -webkit-animation-name: rotateIn; - -moz-animation-name: rotateIn; - -o-animation-name: rotateIn; - animation-name: rotateIn; -} -@-webkit-keyframes rotateInUpLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInUpLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInUpLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } - - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } -} - -.animated.rotateInUpLeft { - -webkit-animation-name: rotateInUpLeft; - -moz-animation-name: rotateInUpLeft; - -o-animation-name: rotateInUpLeft; - animation-name: rotateInUpLeft; -} -@-webkit-keyframes rotateInDownLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInDownLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInDownLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(-90deg); - opacity: 0; - } - - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } -} - -.animated.rotateInDownLeft { - -webkit-animation-name: rotateInDownLeft; - -moz-animation-name: rotateInDownLeft; - -o-animation-name: rotateInDownLeft; - animation-name: rotateInDownLeft; -} -@-webkit-keyframes rotateInUpRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInUpRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInUpRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } - - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } -} - -.animated.rotateInUpRight { - -webkit-animation-name: rotateInUpRight; - -moz-animation-name: rotateInUpRight; - -o-animation-name: rotateInUpRight; - animation-name: rotateInUpRight; -} -@-webkit-keyframes rotateInDownRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInDownRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInDownRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } - - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } -} - -.animated.rotateInDownRight { - -webkit-animation-name: rotateInDownRight; - -moz-animation-name: rotateInDownRight; - -o-animation-name: rotateInDownRight; - animation-name: rotateInDownRight; -} -@-webkit-keyframes rotateOut { - 0% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(200deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOut { - 0% { - -moz-transform-origin: center center; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: center center; - -moz-transform: rotate(200deg); - opacity: 0; - } -} - -@-o-keyframes rotateOut { - 0% { - -o-transform-origin: center center; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: center center; - -o-transform: rotate(200deg); - opacity: 0; - } -} - -@keyframes rotateOut { - 0% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: center center; - transform: rotate(200deg); - opacity: 0; - } -} - -.animated.rotateOut { - -webkit-animation-name: rotateOut; - -moz-animation-name: rotateOut; - -o-animation-name: rotateOut; - animation-name: rotateOut; -} -@-webkit-keyframes rotateOutUpLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutUpLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutUpLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } -} - -@keyframes rotateOutUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: left bottom; - transform: rotate(-90deg); - opacity: 0; - } -} - -.animated.rotateOutUpLeft { - -webkit-animation-name: rotateOutUpLeft; - -moz-animation-name: rotateOutUpLeft; - -o-animation-name: rotateOutUpLeft; - animation-name: rotateOutUpLeft; -} -@-webkit-keyframes rotateOutDownLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutDownLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutDownLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(90deg); - opacity: 0; - } -} - -@keyframes rotateOutDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } -} - -.animated.rotateOutDownLeft { - -webkit-animation-name: rotateOutDownLeft; - -moz-animation-name: rotateOutDownLeft; - -o-animation-name: rotateOutDownLeft; - animation-name: rotateOutDownLeft; -} -@-webkit-keyframes rotateOutUpRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutUpRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutUpRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(90deg); - opacity: 0; - } -} - -@keyframes rotateOutUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } -} - -.animated.rotateOutUpRight { - -webkit-animation-name: rotateOutUpRight; - -moz-animation-name: rotateOutUpRight; - -o-animation-name: rotateOutUpRight; - animation-name: rotateOutUpRight; -} -@-webkit-keyframes rotateOutDownRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutDownRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutDownRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } -} - -@keyframes rotateOutDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } -} - -.animated.rotateOutDownRight { - -webkit-animation-name: rotateOutDownRight; - -moz-animation-name: rotateOutDownRight; - -o-animation-name: rotateOutDownRight; - animation-name: rotateOutDownRight; -} -@-webkit-keyframes hinge { - 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 100% { -webkit-transform: translateY(700px); opacity: 0; } -} - -@-moz-keyframes hinge { - 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 100% { -moz-transform: translateY(700px); opacity: 0; } + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +.bounceOutRight { + -webkit-animation-name: bounceOutRight; + animation-name: bounceOutRight; +} + +@-webkit-keyframes bounceOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +@keyframes bounceOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 20% { + opacity: 1; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +@-webkit-keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} + +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} + +@-webkit-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } } -@-o-keyframes hinge { - 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 100% { -o-transform: translateY(700px); opacity: 0; } +.fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; } -@keyframes hinge { - 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } - 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } - 100% { transform: translateY(700px); opacity: 0; } +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } } -.animated.hinge { - -webkit-animation-name: hinge; - -moz-animation-name: hinge; - -o-animation-name: hinge; - animation-name: hinge; +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } } -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@-webkit-keyframes rollIn { - 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; } -@-moz-keyframes rollIn { - 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } +@-webkit-keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } } -@-o-keyframes rollIn { - 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } +@keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; +} + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } } -@keyframes rollIn { - 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } } -.animated.rollIn { - -webkit-animation-name: rollIn; - -moz-animation-name: rollIn; - -o-animation-name: rollIn; - animation-name: rollIn; +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; } -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@-webkit-keyframes rollOut { - 0% { - opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg); - } +@-webkit-keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } - 100% { - opacity: 0; - -webkit-transform: translateX(100%) rotate(120deg); - } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } } -@-moz-keyframes rollOut { - 0% { - opacity: 1; - -moz-transform: translateX(0px) rotate(0deg); - } +@keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} - 100% { - opacity: 0; - -moz-transform: translateX(100%) rotate(120deg); - } +.fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; } -@-o-keyframes rollOut { - 0% { - opacity: 1; - -o-transform: translateX(0px) rotate(0deg); - } +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } - 100% { - opacity: 0; - -o-transform: translateX(100%) rotate(120deg); - } + 100% { + opacity: 0; + } } -@keyframes rollOut { - 0% { - opacity: 1; - transform: translateX(0px) rotate(0deg); - } +@keyframes fadeOut { + 0% { + opacity: 1; + } - 100% { - opacity: 0; - transform: translateX(100%) rotate(120deg); - } + 100% { + opacity: 0; + } } -.animated.rollOut { - -webkit-animation-name: rollOut; - -moz-animation-name: rollOut; - -o-animation-name: rollOut; - animation-name: rollOut; +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +@-webkit-keyframes fadeOutDownBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } +} + +@keyframes fadeOutDownBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(2000px); + transform: translateY(2000px); + } } -/* originally authored by Angelo Rohit - https://github.com/angelorohit */ +.fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} + +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } +} + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + } +} + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} + +@-webkit-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +@keyframes fadeOutLeftBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +.fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} + +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } +} + +@keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + transform: translateX(20px); + } +} + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} + +@-webkit-keyframes fadeOutRightBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +@keyframes fadeOutRightBig { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +.fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} + +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } +} + +@keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} + +@-webkit-keyframes fadeOutUpBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +@keyframes fadeOutUpBig { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +.fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} + +@-webkit-keyframes flip { + 0% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 100% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +@keyframes flip { + 0% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 80% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 100% { + -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} + +.animated.flip { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flip; + animation-name: flip; +} + +@-webkit-keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateX(-10deg); + transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateX(10deg); + transform: perspective(400px) rotateX(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} + +@keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateX(-10deg); + transform: perspective(400px) rotateX(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateX(10deg); + transform: perspective(400px) rotateX(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} + +.flipInX { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInX; + animation-name: flipInX; +} + +@-webkit-keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateY(-10deg); + transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateY(10deg); + transform: perspective(400px) rotateY(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} + +@keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotateY(-10deg); + transform: perspective(400px) rotateY(-10deg); + } + + 70% { + -webkit-transform: perspective(400px) rotateY(10deg); + transform: perspective(400px) rotateY(10deg); + } + + 100% { + -webkit-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} + +.flipInY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInY; + animation-name: flipInY; +} + +@-webkit-keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +@keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px) rotateX(0deg); + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +.flipOutX { + -webkit-animation-name: flipOutX; + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; +} + +@-webkit-keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} + +@keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px) rotateY(0deg); + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} + +.flipOutY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + animation-name: flipOutY; +} @-webkit-keyframes lightSpeedIn { - 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } -} + 0% { + -webkit-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } -@-moz-keyframes lightSpeedIn { - 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } -} + 60% { + -webkit-transform: translateX(-20%) skewX(30deg); + transform: translateX(-20%) skewX(30deg); + opacity: 1; + } -@-o-keyframes lightSpeedIn { - 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } + 80% { + -webkit-transform: translateX(0%) skewX(-15deg); + transform: translateX(0%) skewX(-15deg); + opacity: 1; + } + + 100% { + -webkit-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } } @keyframes lightSpeedIn { - 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } + 0% { + -webkit-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } + + 60% { + -webkit-transform: translateX(-20%) skewX(30deg); + transform: translateX(-20%) skewX(30deg); + opacity: 1; + } + + 80% { + -webkit-transform: translateX(0%) skewX(-15deg); + transform: translateX(0%) skewX(-15deg); + opacity: 1; + } + + 100% { + -webkit-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } } -.animated.lightSpeedIn { - -webkit-animation-name: lightSpeedIn; - -moz-animation-name: lightSpeedIn; - -o-animation-name: lightSpeedIn; - animation-name: lightSpeedIn; - - -webkit-animation-timing-function: ease-out; - -moz-animation-timing-function: ease-out; - -o-animation-timing-function: ease-out; - animation-timing-function: ease-out; +.lightSpeedIn { + -webkit-animation-name: lightSpeedIn; + animation-name: lightSpeedIn; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; } -.animated.lightSpeedIn { - -webkit-animation-duration: 0.5s; - -moz-animation-duration: 0.5s; - -o-animation-duration: 0.5s; - animation-duration: 0.5s; -} - -/* originally authored by Angelo Rohit - https://github.com/angelorohit */ - @-webkit-keyframes lightSpeedOut { - 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } -} + 0% { + -webkit-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } -@-moz-keyframes lightSpeedOut { - 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -@-o-keyframes lightSpeedOut { - 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } + 100% { + -webkit-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } } @keyframes lightSpeedOut { - 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } + 0% { + -webkit-transform: translateX(0%) skewX(0deg); + transform: translateX(0%) skewX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: translateX(100%) skewX(-30deg); + transform: translateX(100%) skewX(-30deg); + opacity: 0; + } } -.animated.lightSpeedOut { - -webkit-animation-name: lightSpeedOut; - -moz-animation-name: lightSpeedOut; - -o-animation-name: lightSpeedOut; - animation-name: lightSpeedOut; - - -webkit-animation-timing-function: ease-in; - -moz-animation-timing-function: ease-in; - -o-animation-timing-function: ease-in; - animation-timing-function: ease-in; +.lightSpeedOut { + -webkit-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } -.animated.lightSpeedOut { - -webkit-animation-duration: 0.25s; - -moz-animation-duration: 0.25s; - -o-animation-duration: 0.25s; - animation-duration: 0.25s; +@-webkit-keyframes rotateIn { + 0% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } } + +@keyframes rotateIn { + 0% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateIn { + -webkit-animation-name: rotateIn; + animation-name: rotateIn; +} + +@-webkit-keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; +} + +@-webkit-keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; +} + +@-webkit-keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; +} + +@-webkit-keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +@keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; +} + +@-webkit-keyframes rotateOut { + 0% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0; + } +} + +@keyframes rotateOut { + 0% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0; + } +} + +.rotateOut { + -webkit-animation-name: rotateOut; + animation-name: rotateOut; +} + +@-webkit-keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} + +@keyframes rotateOutDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; +} + +@-webkit-keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} + +@keyframes rotateOutDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; +} + +@-webkit-keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -transform-origin: left bottom; + -transform: rotate(-90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -transform-origin: left bottom; + -transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; +} + +@-webkit-keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} + +@keyframes rotateOutUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(0); + transform: rotate(0); + opacity: 1; + } + + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; +} + +@-webkit-keyframes slideInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes slideInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +.slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; +} + +@-webkit-keyframes slideInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes slideInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; +} + +@-webkit-keyframes slideInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes slideInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; +} + +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +@keyframes slideOutLeft { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-2000px); + transform: translateX(-2000px); + } +} + +.slideOutLeft { + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft; +} + +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +@keyframes slideOutRight { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + } +} + +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; +} + +@-webkit-keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +@keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-2000px); + transform: translateY(-2000px); + } +} + +.slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; +} + +@-webkit-keyframes hinge { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + -webkit-transform: rotate(80deg); + transform: rotate(80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 80% { + -webkit-transform: rotate(60deg) translateY(0); + transform: rotate(60deg) translateY(0); + opacity: 1; + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 100% { + -webkit-transform: translateY(700px); + transform: translateY(700px); + opacity: 0; + } +} + +@keyframes hinge { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + -webkit-transform: rotate(80deg); + transform: rotate(80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 80% { + -webkit-transform: rotate(60deg) translateY(0); + transform: rotate(60deg) translateY(0); + opacity: 1; + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 100% { + -webkit-transform: translateY(700px); + transform: translateY(700px); + opacity: 0; + } +} + +.hinge { + -webkit-animation-name: hinge; + animation-name: hinge; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%) rotate(-120deg); + transform: translateX(-100%) rotate(-120deg); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } +} + +@keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translateX(-100%) rotate(-120deg); + transform: translateX(-100%) rotate(-120deg); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } +} + +.rollIn { + -webkit-animation-name: rollIn; + animation-name: rollIn; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-webkit-keyframes rollOut { + 0% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(100%) rotate(120deg); + transform: translateX(100%) rotate(120deg); + } +} + +@keyframes rollOut { + 0% { + opacity: 1; + -webkit-transform: translateX(0px) rotate(0deg); + transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(100%) rotate(120deg); + transform: translateX(100%) rotate(120deg); + } +} + +.rollOut { + -webkit-animation-name: rollOut; + animation-name: rollOut; +} \ No newline at end of file diff --git a/animate.min.css b/animate.min.css index 6604846..ae1d3e9 100644 --- a/animate.min.css +++ b/animate.min.css @@ -1 +1 @@ -@charset "UTF-8";body{-webkit-backface-visibility:hidden;}.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}@-moz-keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}@-o-keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}@keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}.animated.flash{-webkit-animation-name:flash;-moz-animation-name:flash;-o-animation-name:flash;animation-name:flash;}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}20%,40%,60%,80%{-webkit-transform:translateX(10px);}}@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0);}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}20%,40%,60%,80%{-moz-transform:translateX(10px);}}@-o-keyframes shake{0%,100%{-o-transform:translateX(0);}10%,30%,50%,70%,90%{-o-transform:translateX(-10px);}20%,40%,60%,80%{-o-transform:translateX(10px);}}@keyframes shake{0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-10px);}20%,40%,60%,80%{transform:translateX(10px);}}.animated.shake{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake;}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}40%{-webkit-transform:translateY(-30px);}60%{-webkit-transform:translateY(-15px);}}@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);}40%{-moz-transform:translateY(-30px);}60%{-moz-transform:translateY(-15px);}}@-o-keyframes bounce{0%,20%,50%,80%,100%{-o-transform:translateY(0);}40%{-o-transform:translateY(-30px);}60%{-o-transform:translateY(-15px);}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-30px);}60%{transform:translateY(-15px);}}.animated.bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-o-animation-name:bounce;animation-name:bounce;}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}100%{-webkit-transform:scale(1) rotate(0);}}@-moz-keyframes tada{0%{-moz-transform:scale(1);}10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}100%{-moz-transform:scale(1) rotate(0);}}@-o-keyframes tada{0%{-o-transform:scale(1);}10%,20%{-o-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-o-transform:scale(1.1) rotate(3deg);}40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg);}100%{-o-transform:scale(1) rotate(0);}}@keyframes tada{0%{transform:scale(1);}10%,20%{transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}40%,60%,80%{transform:scale(1.1) rotate(-3deg);}100%{transform:scale(1) rotate(0);}}.animated.tada{-webkit-animation-name:tada;-moz-animation-name:tada;-o-animation-name:tada;animation-name:tada;}@-webkit-keyframes swing{20%,40%,60%,80%,100%{-webkit-transform-origin:top center;}20%{-webkit-transform:rotate(15deg);}40%{-webkit-transform:rotate(-10deg);}60%{-webkit-transform:rotate(5deg);}80%{-webkit-transform:rotate(-5deg);}100%{-webkit-transform:rotate(0deg);}}@-moz-keyframes swing{20%{-moz-transform:rotate(15deg);}40%{-moz-transform:rotate(-10deg);}60%{-moz-transform:rotate(5deg);}80%{-moz-transform:rotate(-5deg);}100%{-moz-transform:rotate(0deg);}}@-o-keyframes swing{20%{-o-transform:rotate(15deg);}40%{-o-transform:rotate(-10deg);}60%{-o-transform:rotate(5deg);}80%{-o-transform:rotate(-5deg);}100%{-o-transform:rotate(0deg);}}@keyframes swing{20%{transform:rotate(15deg);}40%{transform:rotate(-10deg);}60%{transform:rotate(5deg);}80%{transform:rotate(-5deg);}100%{transform:rotate(0deg);}}.animated.swing{-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;-moz-animation-name:swing;-o-animation-name:swing;animation-name:swing;}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);}15%{-webkit-transform:translateX(-25%) rotate(-5deg);}30%{-webkit-transform:translateX(20%) rotate(3deg);}45%{-webkit-transform:translateX(-15%) rotate(-3deg);}60%{-webkit-transform:translateX(10%) rotate(2deg);}75%{-webkit-transform:translateX(-5%) rotate(-1deg);}100%{-webkit-transform:translateX(0%);}}@-moz-keyframes wobble{0%{-moz-transform:translateX(0%);}15%{-moz-transform:translateX(-25%) rotate(-5deg);}30%{-moz-transform:translateX(20%) rotate(3deg);}45%{-moz-transform:translateX(-15%) rotate(-3deg);}60%{-moz-transform:translateX(10%) rotate(2deg);}75%{-moz-transform:translateX(-5%) rotate(-1deg);}100%{-moz-transform:translateX(0%);}}@-o-keyframes wobble{0%{-o-transform:translateX(0%);}15%{-o-transform:translateX(-25%) rotate(-5deg);}30%{-o-transform:translateX(20%) rotate(3deg);}45%{-o-transform:translateX(-15%) rotate(-3deg);}60%{-o-transform:translateX(10%) rotate(2deg);}75%{-o-transform:translateX(-5%) rotate(-1deg);}100%{-o-transform:translateX(0%);}}@keyframes wobble{0%{transform:translateX(0%);}15%{transform:translateX(-25%) rotate(-5deg);}30%{transform:translateX(20%) rotate(3deg);}45%{transform:translateX(-15%) rotate(-3deg);}60%{transform:translateX(10%) rotate(2deg);}75%{transform:translateX(-5%) rotate(-1deg);}100%{transform:translateX(0%);}}.animated.wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble;}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);}50%{-webkit-transform:scale(1.1);}100%{-webkit-transform:scale(1);}}@-moz-keyframes pulse{0%{-moz-transform:scale(1);}50%{-moz-transform:scale(1.1);}100%{-moz-transform:scale(1);}}@-o-keyframes pulse{0%{-o-transform:scale(1);}50%{-o-transform:scale(1.1);}100%{-o-transform:scale(1);}}@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}.animated.pulse{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse;}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;}}@-moz-keyframes flip{0%{-moz-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-moz-animation-timing-function:ease-out;}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-moz-animation-timing-function:ease-out;}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}80%{-moz-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-moz-animation-timing-function:ease-in;}100%{-moz-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-moz-animation-timing-function:ease-in;}}@-o-keyframes flip{0%{-o-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-o-animation-timing-function:ease-out;}40%{-o-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-o-animation-timing-function:ease-out;}50%{-o-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function:ease-in;}80%{-o-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-o-animation-timing-function:ease-in;}100%{-o-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-o-animation-timing-function:ease-in;}}@keyframes flip{0%{transform:perspective(400px) translateZ(0) rotateY(0) scale(1);animation-timing-function:ease-out;}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);animation-timing-function:ease-out;}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}80%{transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);animation-timing-function:ease-in;}100%{transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);animation-timing-function:ease-in;}}.animated.flip{-webkit-backface-visibility:visible !important;-webkit-animation-name:flip;-moz-backface-visibility:visible !important;-moz-animation-name:flip;-o-backface-visibility:visible !important;-o-animation-name:flip;backface-visibility:visible !important;animation-name:flip;}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateX(-10deg);}70%{-webkit-transform:perspective(400px) rotateX(10deg);}100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}}@-moz-keyframes flipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateX(-10deg);}70%{-moz-transform:perspective(400px) rotateX(10deg);}100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}}@-o-keyframes flipInX{0%{-o-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-o-transform:perspective(400px) rotateX(-10deg);}70%{-o-transform:perspective(400px) rotateX(10deg);}100%{-o-transform:perspective(400px) rotateX(0deg);opacity:1;}}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}40%{transform:perspective(400px) rotateX(-10deg);}70%{transform:perspective(400px) rotateX(10deg);}100%{transform:perspective(400px) rotateX(0deg);opacity:1;}}.animated.flipInX{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible !important;-moz-animation-name:flipInX;-o-backface-visibility:visible !important;-o-animation-name:flipInX;backface-visibility:visible !important;animation-name:flipInX;}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}}@-moz-keyframes flipOutX{0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}}@-o-keyframes flipOutX{0%{-o-transform:perspective(400px) rotateX(0deg);opacity:1;}100%{-o-transform:perspective(400px) rotateX(90deg);opacity:0;}}@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1;}100%{transform:perspective(400px) rotateX(90deg);opacity:0;}}.animated.flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible !important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible !important;-o-animation-name:flipOutX;-o-backface-visibility:visible !important;animation-name:flipOutX;backface-visibility:visible !important;}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateY(-10deg);}70%{-webkit-transform:perspective(400px) rotateY(10deg);}100%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}}@-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateY(-10deg);}70%{-moz-transform:perspective(400px) rotateY(10deg);}100%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;}}@-o-keyframes flipInY{0%{-o-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-o-transform:perspective(400px) rotateY(-10deg);}70%{-o-transform:perspective(400px) rotateY(10deg);}100%{-o-transform:perspective(400px) rotateY(0deg);opacity:1;}}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0;}40%{transform:perspective(400px) rotateY(-10deg);}70%{transform:perspective(400px) rotateY(10deg);}100%{transform:perspective(400px) rotateY(0deg);opacity:1;}}.animated.flipInY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInY;-moz-backface-visibility:visible !important;-moz-animation-name:flipInY;-o-backface-visibility:visible !important;-o-animation-name:flipInY;backface-visibility:visible !important;animation-name:flipInY;}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}}@-moz-keyframes flipOutY{0%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;}100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}}@-o-keyframes flipOutY{0%{-o-transform:perspective(400px) rotateY(0deg);opacity:1;}100%{-o-transform:perspective(400px) rotateY(90deg);opacity:0;}}@keyframes flipOutY{0%{transform:perspective(400px) rotateY(0deg);opacity:1;}100%{transform:perspective(400px) rotateY(90deg);opacity:0;}}.animated.flipOutY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipOutY;-moz-backface-visibility:visible !important;-moz-animation-name:flipOutY;-o-backface-visibility:visible !important;-o-animation-name:flipOutY;backface-visibility:visible !important;animation-name:flipOutY;}@-webkit-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}@-moz-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}@-o-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}.animated.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn;}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px);}100%{opacity:1;-moz-transform:translateX(0);}}@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px);}100%{opacity:1;-o-transform:translateX(0);}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px);}100%{opacity:1;transform:translateX(0);}}.animated.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px);}100%{opacity:1;-moz-transform:translateX(0);}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px);}100%{opacity:1;-o-transform:translateX(0);}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px);}100%{opacity:1;transform:translateX(0);}}.animated.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight;}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInUpBig{0%{opacity:0;-moz-transform:translateY(2000px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInUpBig{0%{opacity:0;-o-transform:translateY(2000px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInUpBig{-webkit-animation-name:fadeInUpBig;-moz-animation-name:fadeInUpBig;-o-animation-name:fadeInUpBig;animation-name:fadeInUpBig;}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInDownBig{0%{opacity:0;-moz-transform:translateY(-2000px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInDownBig{0%{opacity:0;-o-transform:translateY(-2000px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInDownBig{-webkit-animation-name:fadeInDownBig;-moz-animation-name:fadeInDownBig;-o-animation-name:fadeInDownBig;animation-name:fadeInDownBig;}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeInLeftBig{0%{opacity:0;-moz-transform:translateX(-2000px);}100%{opacity:1;-moz-transform:translateX(0);}}@-o-keyframes fadeInLeftBig{0%{opacity:0;-o-transform:translateX(-2000px);}100%{opacity:1;-o-transform:translateX(0);}}@keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px);}100%{opacity:1;transform:translateX(0);}}.animated.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig;}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeInRightBig{0%{opacity:0;-moz-transform:translateX(2000px);}100%{opacity:1;-moz-transform:translateX(0);}}@-o-keyframes fadeInRightBig{0%{opacity:0;-o-transform:translateX(2000px);}100%{opacity:1;-o-transform:translateX(0);}}@keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px);}100%{opacity:1;transform:translateX(0);}}.animated.fadeInRightBig{-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig;}@-webkit-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}@-moz-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}@-o-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}@keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}.animated.fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-o-animation-name:fadeOut;animation-name:fadeOut;}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(-20px);}}@-moz-keyframes fadeOutUp{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(-20px);}}@-o-keyframes fadeOutUp{0%{opacity:1;-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(-20px);}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-20px);}}.animated.fadeOutUp{-webkit-animation-name:fadeOutUp;-moz-animation-name:fadeOutUp;-o-animation-name:fadeOutUp;animation-name:fadeOutUp;}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(20px);}}@-moz-keyframes fadeOutDown{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(20px);}}@-o-keyframes fadeOutDown{0%{opacity:1;-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(20px);}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(20px);}}.animated.fadeOutDown{-webkit-animation-name:fadeOutDown;-moz-animation-name:fadeOutDown;-o-animation-name:fadeOutDown;animation-name:fadeOutDown;}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-20px);}}@-moz-keyframes fadeOutLeft{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-20px);}}@-o-keyframes fadeOutLeft{0%{opacity:1;-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(-20px);}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(-20px);}}.animated.fadeOutLeft{-webkit-animation-name:fadeOutLeft;-moz-animation-name:fadeOutLeft;-o-animation-name:fadeOutLeft;animation-name:fadeOutLeft;}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(20px);}}@-moz-keyframes fadeOutRight{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(20px);}}@-o-keyframes fadeOutRight{0%{opacity:1;-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(20px);}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(20px);}}.animated.fadeOutRight{-webkit-animation-name:fadeOutRight;-moz-animation-name:fadeOutRight;-o-animation-name:fadeOutRight;animation-name:fadeOutRight;}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(-2000px);}}@-moz-keyframes fadeOutUpBig{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(-2000px);}}@-o-keyframes fadeOutUpBig{0%{opacity:1;-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(-2000px);}}@keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-2000px);}}.animated.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;-moz-animation-name:fadeOutUpBig;-o-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig;}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(2000px);}}@-moz-keyframes fadeOutDownBig{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(2000px);}}@-o-keyframes fadeOutDownBig{0%{opacity:1;-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(2000px);}}@keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(2000px);}}.animated.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;-moz-animation-name:fadeOutDownBig;-o-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig;}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-2000px);}}@-moz-keyframes fadeOutLeftBig{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-2000px);}}@-o-keyframes fadeOutLeftBig{0%{opacity:1;-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(-2000px);}}@keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(-2000px);}}.animated.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;-moz-animation-name:fadeOutLeftBig;-o-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig;}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(2000px);}}@-moz-keyframes fadeOutRightBig{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(2000px);}}@-o-keyframes fadeOutRightBig{0%{opacity:1;-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(2000px);}}@keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(2000px);}}.animated.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;-moz-animation-name:fadeOutRightBig;-o-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig;}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);}50%{opacity:1;-webkit-transform:scale(1.05);}70%{-webkit-transform:scale(.9);}100%{-webkit-transform:scale(1);}}@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3);}50%{opacity:1;-moz-transform:scale(1.05);}70%{-moz-transform:scale(.9);}100%{-moz-transform:scale(1);}}@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3);}50%{opacity:1;-o-transform:scale(1.05);}70%{-o-transform:scale(.9);}100%{-o-transform:scale(1);}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(.9);}100%{transform:scale(1);}}@-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);}100%{-webkit-transform:translateY(0);}}@-moz-keyframes slideInDown{0%{opacity:0;-moz-transform:translateY(-2000px);}100%{-moz-transform:translateY(0);}}@-o-keyframes slideInDown{0%{opacity:0;-o-transform:translateY(-2000px);}100%{-o-transform:translateY(0);}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-2000px);}100%{transform:translateY(0);}}.slideInDown{-webkit-animation-name:slideInDown;-moz-animation-name:slideInDown;-o-animation-name:slideInDown;animation-name:slideInDown;}@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes slideInLeft{0%{opacity:0;-moz-transform:translateX(-2000px);}100%{-moz-transform:translateX(0);}}@-o-keyframes slideInLeft{0%{opacity:0;-o-transform:translateX(-2000px);}100%{-o-transform:translateX(0);}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-2000px);}100%{transform:translateX(0);}}.slideInLeft{-webkit-animation-name:slideInLeft;-moz-animation-name:slideInLeft;-o-animation-name:slideInLeft;animation-name:slideInLeft;}@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes slideInRight{0%{opacity:0;-moz-transform:translateX(2000px);}100%{-moz-transform:translateX(0);}}@-o-keyframes slideInRight{0%{opacity:0;-o-transform:translateX(2000px);}100%{-o-transform:translateX(0);}}@keyframes slideInRight{0%{opacity:0;transform:translateX(2000px);}100%{transform:translateX(0);}}.slideInRight{-webkit-animation-name:slideInRight;-moz-animation-name:slideInRight;-o-animation-name:slideInRight;animation-name:slideInRight;}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-2000px);}}@-moz-keyframes slideOutLeft{0%{-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-2000px);}}@-o-keyframes slideOutLeft{0%{-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(-2000px);}}@keyframes slideOutLeft{0%{transform:translateX(0);}100%{opacity:0;transform:translateX(-2000px);}}.slideOutLeft{-webkit-animation-name:slideOutLeft;-moz-animation-name:slideOutLeft;-o-animation-name:slideOutLeft;animation-name:slideOutLeft;}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(2000px);}}@-moz-keyframes slideOutRight{0%{-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(2000px);}}@-o-keyframes slideOutRight{0%{-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(2000px);}}@keyframes slideOutRight{0%{transform:translateX(0);}100%{opacity:0;transform:translateX(2000px);}}.slideOutRight{-webkit-animation-name:slideOutRight;-moz-animation-name:slideOutRight;-o-animation-name:slideOutRight;animation-name:slideOutRight;}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(-2000px);}}@-moz-keyframes slideOutUp{0%{-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(-2000px);}}@-o-keyframes slideOutUp{0%{-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(-2000px);}}@keyframes slideOutUp{0%{transform:translateY(0);}100%{opacity:0;transform:translateY(-2000px);}}.slideOutUp{-webkit-animation-name:slideOutUp;-moz-animation-name:slideOutUp;-o-animation-name:slideOutUp;animation-name:slideOutUp;}.animated.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn;}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);}60%{opacity:1;-webkit-transform:translateY(-30px);}80%{-webkit-transform:translateY(10px);}100%{-webkit-transform:translateY(0);}}@-moz-keyframes bounceInUp{0%{opacity:0;-moz-transform:translateY(2000px);}60%{opacity:1;-moz-transform:translateY(-30px);}80%{-moz-transform:translateY(10px);}100%{-moz-transform:translateY(0);}}@-o-keyframes bounceInUp{0%{opacity:0;-o-transform:translateY(2000px);}60%{opacity:1;-o-transform:translateY(-30px);}80%{-o-transform:translateY(10px);}100%{-o-transform:translateY(0);}}@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px);}60%{opacity:1;transform:translateY(-30px);}80%{transform:translateY(10px);}100%{transform:translateY(0);}}.animated.bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-o-animation-name:bounceInUp;animation-name:bounceInUp;}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);}60%{opacity:1;-webkit-transform:translateY(30px);}80%{-webkit-transform:translateY(-10px);}100%{-webkit-transform:translateY(0);}}@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px);}60%{opacity:1;-moz-transform:translateY(30px);}80%{-moz-transform:translateY(-10px);}100%{-moz-transform:translateY(0);}}@-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translateY(-2000px);}60%{opacity:1;-o-transform:translateY(30px);}80%{-o-transform:translateY(-10px);}100%{-o-transform:translateY(0);}}@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);}60%{opacity:1;transform:translateY(30px);}80%{transform:translateY(-10px);}100%{transform:translateY(0);}}.animated.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown;}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);}60%{opacity:1;-webkit-transform:translateX(30px);}80%{-webkit-transform:translateX(-10px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes bounceInLeft{0%{opacity:0;-moz-transform:translateX(-2000px);}60%{opacity:1;-moz-transform:translateX(30px);}80%{-moz-transform:translateX(-10px);}100%{-moz-transform:translateX(0);}}@-o-keyframes bounceInLeft{0%{opacity:0;-o-transform:translateX(-2000px);}60%{opacity:1;-o-transform:translateX(30px);}80%{-o-transform:translateX(-10px);}100%{-o-transform:translateX(0);}}@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px);}60%{opacity:1;transform:translateX(30px);}80%{transform:translateX(-10px);}100%{transform:translateX(0);}}.animated.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;animation-name:bounceInLeft;}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);}60%{opacity:1;-webkit-transform:translateX(-30px);}80%{-webkit-transform:translateX(10px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes bounceInRight{0%{opacity:0;-moz-transform:translateX(2000px);}60%{opacity:1;-moz-transform:translateX(-30px);}80%{-moz-transform:translateX(10px);}100%{-moz-transform:translateX(0);}}@-o-keyframes bounceInRight{0%{opacity:0;-o-transform:translateX(2000px);}60%{opacity:1;-o-transform:translateX(-30px);}80%{-o-transform:translateX(10px);}100%{-o-transform:translateX(0);}}@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px);}60%{opacity:1;transform:translateX(-30px);}80%{transform:translateX(10px);}100%{transform:translateX(0);}}.animated.bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-o-animation-name:bounceInRight;animation-name:bounceInRight;}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);}25%{-webkit-transform:scale(.95);}50%{opacity:1;-webkit-transform:scale(1.1);}100%{opacity:0;-webkit-transform:scale(.3);}}@-moz-keyframes bounceOut{0%{-moz-transform:scale(1);}25%{-moz-transform:scale(.95);}50%{opacity:1;-moz-transform:scale(1.1);}100%{opacity:0;-moz-transform:scale(.3);}}@-o-keyframes bounceOut{0%{-o-transform:scale(1);}25%{-o-transform:scale(.95);}50%{opacity:1;-o-transform:scale(1.1);}100%{opacity:0;-o-transform:scale(.3);}}@keyframes bounceOut{0%{transform:scale(1);}25%{transform:scale(.95);}50%{opacity:1;transform:scale(1.1);}100%{opacity:0;transform:scale(.3);}}.animated.bounceOut{-webkit-animation-name:bounceOut;-moz-animation-name:bounceOut;-o-animation-name:bounceOut;animation-name:bounceOut;}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(20px);}100%{opacity:0;-webkit-transform:translateY(-2000px);}}@-moz-keyframes bounceOutUp{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(20px);}100%{opacity:0;-moz-transform:translateY(-2000px);}}@-o-keyframes bounceOutUp{0%{-o-transform:translateY(0);}20%{opacity:1;-o-transform:translateY(20px);}100%{opacity:0;-o-transform:translateY(-2000px);}}@keyframes bounceOutUp{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(20px);}100%{opacity:0;transform:translateY(-2000px);}}.animated.bounceOutUp{-webkit-animation-name:bounceOutUp;-moz-animation-name:bounceOutUp;-o-animation-name:bounceOutUp;animation-name:bounceOutUp;}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(-20px);}100%{opacity:0;-webkit-transform:translateY(2000px);}}@-moz-keyframes bounceOutDown{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(-20px);}100%{opacity:0;-moz-transform:translateY(2000px);}}@-o-keyframes bounceOutDown{0%{-o-transform:translateY(0);}20%{opacity:1;-o-transform:translateY(-20px);}100%{opacity:0;-o-transform:translateY(2000px);}}@keyframes bounceOutDown{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(-20px);}100%{opacity:0;transform:translateY(2000px);}}.animated.bounceOutDown{-webkit-animation-name:bounceOutDown;-moz-animation-name:bounceOutDown;-o-animation-name:bounceOutDown;animation-name:bounceOutDown;}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(20px);}100%{opacity:0;-webkit-transform:translateX(-2000px);}}@-moz-keyframes bounceOutLeft{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(20px);}100%{opacity:0;-moz-transform:translateX(-2000px);}}@-o-keyframes bounceOutLeft{0%{-o-transform:translateX(0);}20%{opacity:1;-o-transform:translateX(20px);}100%{opacity:0;-o-transform:translateX(-2000px);}}@keyframes bounceOutLeft{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(20px);}100%{opacity:0;transform:translateX(-2000px);}}.animated.bounceOutLeft{-webkit-animation-name:bounceOutLeft;-moz-animation-name:bounceOutLeft;-o-animation-name:bounceOutLeft;animation-name:bounceOutLeft;}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(-20px);}100%{opacity:0;-webkit-transform:translateX(2000px);}}@-moz-keyframes bounceOutRight{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(-20px);}100%{opacity:0;-moz-transform:translateX(2000px);}}@-o-keyframes bounceOutRight{0%{-o-transform:translateX(0);}20%{opacity:1;-o-transform:translateX(-20px);}100%{opacity:0;-o-transform:translateX(2000px);}}@keyframes bounceOutRight{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(-20px);}100%{opacity:0;transform:translateX(2000px);}}.animated.bounceOutRight{-webkit-animation-name:bounceOutRight;-moz-animation-name:bounceOutRight;-o-animation-name:bounceOutRight;animation-name:bounceOutRight;}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0;}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateIn{0%{-moz-transform-origin:center center;-moz-transform:rotate(-200deg);opacity:0;}100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateIn{0%{-o-transform-origin:center center;-o-transform:rotate(-200deg);opacity:0;}100%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1;}}@keyframes rotateIn{0%{transform-origin:center center;transform:rotate(-200deg);opacity:0;}100%{transform-origin:center center;transform:rotate(0);opacity:1;}}.animated.rotateIn{-webkit-animation-name:rotateIn;-moz-animation-name:rotateIn;-o-animation-name:rotateIn;animation-name:rotateIn;}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateInUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateInUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0;}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}}.animated.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;-moz-animation-name:rotateInUpLeft;-o-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateInDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateInDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0;}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}}.animated.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;-moz-animation-name:rotateInDownLeft;-o-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateInUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateInUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0;}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}}.animated.rotateInUpRight{-webkit-animation-name:rotateInUpRight;-moz-animation-name:rotateInUpRight;-o-animation-name:rotateInUpRight;animation-name:rotateInUpRight;}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateInDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateInDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0;}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}}.animated.rotateInDownRight{-webkit-animation-name:rotateInDownRight;-moz-animation-name:rotateInDownRight;-o-animation-name:rotateInDownRight;animation-name:rotateInDownRight;}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}}@-moz-keyframes rotateOut{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}}@-o-keyframes rotateOut{0%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:center center;-o-transform:rotate(200deg);opacity:0;}}@keyframes rotateOut{0%{transform-origin:center center;transform:rotate(0);opacity:1;}100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}}.animated.rotateOut{-webkit-animation-name:rotateOut;-moz-animation-name:rotateOut;-o-animation-name:rotateOut;animation-name:rotateOut;}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}}@-moz-keyframes rotateOutUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}}@-o-keyframes rotateOutUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0;}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}}.animated.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;-moz-animation-name:rotateOutUpLeft;-o-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}}@-moz-keyframes rotateOutDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}}@-o-keyframes rotateOutDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0;}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}}.animated.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;-moz-animation-name:rotateOutDownLeft;-o-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}}@-moz-keyframes rotateOutUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}}@-o-keyframes rotateOutUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0;}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}}.animated.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;-moz-animation-name:rotateOutUpRight;-o-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}}@-moz-keyframes rotateOutDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}}@-o-keyframes rotateOutDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0;}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}}.animated.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;-moz-animation-name:rotateOutDownRight;-o-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}100%{-webkit-transform:translateY(700px);opacity:0;}}@-moz-keyframes hinge{0%{-moz-transform:rotate(0);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}20%,60%{-moz-transform:rotate(80deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}40%{-moz-transform:rotate(60deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}80%{-moz-transform:rotate(60deg) translateY(0);opacity:1;-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}100%{-moz-transform:translateY(700px);opacity:0;}}@-o-keyframes hinge{0%{-o-transform:rotate(0);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}20%,60%{-o-transform:rotate(80deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}40%{-o-transform:rotate(60deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}80%{-o-transform:rotate(60deg) translateY(0);opacity:1;-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}100%{-o-transform:translateY(700px);opacity:0;}}@keyframes hinge{0%{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out;}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out;}40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;}80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out;}100%{transform:translateY(700px);opacity:0;}}.animated.hinge{-webkit-animation-name:hinge;-moz-animation-name:hinge;-o-animation-name:hinge;animation-name:hinge;}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);}}@-moz-keyframes rollIn{0%{opacity:0;-moz-transform:translateX(-100%) rotate(-120deg);}100%{opacity:1;-moz-transform:translateX(0px) rotate(0deg);}}@-o-keyframes rollIn{0%{opacity:0;-o-transform:translateX(-100%) rotate(-120deg);}100%{opacity:1;-o-transform:translateX(0px) rotate(0deg);}}@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);}100%{opacity:1;transform:translateX(0px) rotate(0deg);}}.animated.rollIn{-webkit-animation-name:rollIn;-moz-animation-name:rollIn;-o-animation-name:rollIn;animation-name:rollIn;}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);}}@-moz-keyframes rollOut{0%{opacity:1;-moz-transform:translateX(0px) rotate(0deg);}100%{opacity:0;-moz-transform:translateX(100%) rotate(120deg);}}@-o-keyframes rollOut{0%{opacity:1;-o-transform:translateX(0px) rotate(0deg);}100%{opacity:0;-o-transform:translateX(100%) rotate(120deg);}}@keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg);}100%{opacity:0;transform:translateX(100%) rotate(120deg);}}.animated.rollOut{-webkit-animation-name:rollOut;-moz-animation-name:rollOut;-o-animation-name:rollOut;animation-name:rollOut;}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0;}60%{-webkit-transform:translateX(-20%) skewX(30deg);opacity:1;}80%{-webkit-transform:translateX(0%) skewX(-15deg);opacity:1;}100%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}}@-moz-keyframes lightSpeedIn{0%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0;}60%{-moz-transform:translateX(-20%) skewX(30deg);opacity:1;}80%{-moz-transform:translateX(0%) skewX(-15deg);opacity:1;}100%{-moz-transform:translateX(0%) skewX(0deg);opacity:1;}}@-o-keyframes lightSpeedIn{0%{-o-transform:translateX(100%) skewX(-30deg);opacity:0;}60%{-o-transform:translateX(-20%) skewX(30deg);opacity:1;}80%{-o-transform:translateX(0%) skewX(-15deg);opacity:1;}100%{-o-transform:translateX(0%) skewX(0deg);opacity:1;}}@keyframes lightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);opacity:0;}60%{transform:translateX(-20%) skewX(30deg);opacity:1;}80%{transform:translateX(0%) skewX(-15deg);opacity:1;}100%{transform:translateX(0%) skewX(0deg);opacity:1;}}.animated.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-moz-animation-name:lightSpeedIn;-o-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;-moz-animation-timing-function:ease-out;-o-animation-timing-function:ease-out;animation-timing-function:ease-out;}.animated.lightSpeedIn{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s;}@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}100%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0;}}@-moz-keyframes lightSpeedOut{0%{-moz-transform:translateX(0%) skewX(0deg);opacity:1;}100%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0;}}@-o-keyframes lightSpeedOut{0%{-o-transform:translateX(0%) skewX(0deg);opacity:1;}100%{-o-transform:translateX(100%) skewX(-30deg);opacity:0;}}@keyframes lightSpeedOut{0%{transform:translateX(0%) skewX(0deg);opacity:1;}100%{transform:translateX(100%) skewX(-30deg);opacity:0;}}.animated.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-moz-animation-name:lightSpeedOut;-o-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in;}.animated.lightSpeedOut{-webkit-animation-duration:0.25s;-moz-animation-duration:0.25s;-o-animation-duration:0.25s;animation-duration:0.25s;} \ No newline at end of file +@charset "UTF-8";body{-webkit-backface-visibility:hidden;backface-visibility:hidden}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9)rotate(-3deg);transform:scale(.9)rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg);transform:scale(1.1)rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg);transform:scale(1.1)rotate(-3deg)}100%{-webkit-transform:scale(1)rotate(0);transform:scale(1)rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9)rotate(-3deg);transform:scale(.9)rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg);transform:scale(1.1)rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg);transform:scale(1.1)rotate(-3deg)}100%{-webkit-transform:scale(1)rotate(0);transform:scale(1)rotate(0)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%)rotate(-5deg);transform:translateX(-25%)rotate(-5deg)}30%{-webkit-transform:translateX(20%)rotate(3deg);transform:translateX(20%)rotate(3deg)}45%{-webkit-transform:translateX(-15%)rotate(-3deg);transform:translateX(-15%)rotate(-3deg)}60%{-webkit-transform:translateX(10%)rotate(2deg);transform:translateX(10%)rotate(2deg)}75%{-webkit-transform:translateX(-5%)rotate(-1deg);transform:translateX(-5%)rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}@keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%)rotate(-5deg);transform:translateX(-25%)rotate(-5deg)}30%{-webkit-transform:translateX(20%)rotate(3deg);transform:translateX(20%)rotate(3deg)}45%{-webkit-transform:translateX(-15%)rotate(-3deg);transform:translateX(-15%)rotate(-3deg)}60%{-webkit-transform:translateX(10%)rotate(2deg);transform:translateX(10%)rotate(2deg)}75%{-webkit-transform:translateX(-5%)rotate(-1deg);transform:translateX(-5%)rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}@keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px)translateZ(0)rotateY(0)scale(1);transform:perspective(400px)translateZ(0)rotateY(0)scale(1)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1)}50%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95)}80%,100%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1)}}@keyframes flip{0%{-webkit-transform:perspective(400px)translateZ(0)rotateY(0)scale(1);transform:perspective(400px)translateZ(0)rotateY(0)scale(1)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(170deg)scale(1)}50%{-webkit-transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(.95)}80%,100%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1);transform:perspective(400px)translateZ(0)rotateY(360deg)scale(1)}}.animated.flip{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateX(-10deg);transform:perspective(400px)rotateX(-10deg)}70%{-webkit-transform:perspective(400px)rotateX(10deg);transform:perspective(400px)rotateX(10deg)}100%{-webkit-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}}@keyframes flipInX{0%{-webkit-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateX(-10deg);transform:perspective(400px)rotateX(-10deg)}70%{-webkit-transform:perspective(400px)rotateX(10deg);transform:perspective(400px)rotateX(10deg)}100%{-webkit-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateY(-10deg);transform:perspective(400px)rotateY(-10deg)}70%{-webkit-transform:perspective(400px)rotateY(10deg);transform:perspective(400px)rotateY(10deg)}100%{-webkit-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}}@keyframes flipInY{0%{-webkit-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px)rotateY(-10deg);transform:perspective(400px)rotateY(-10deg)}70%{-webkit-transform:perspective(400px)rotateY(10deg);transform:perspective(400px)rotateY(10deg)}100%{-webkit-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px)rotateX(0);transform:perspective(400px)rotateX(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateX(90deg);transform:perspective(400px)rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px)rotateY(0);transform:perspective(400px)rotateY(0);opacity:1}100%{-webkit-transform:perspective(400px)rotateY(90deg);transform:perspective(400px)rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%)skewX(30deg);transform:translateX(-20%)skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%)skewX(-15deg);transform:translateX(0%)skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%)skewX(30deg);transform:translateX(-20%)skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%)skewX(-15deg);transform:translateX(0%)skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}100%{-webkit-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}}@keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%)skewX(0);transform:translateX(0%)skewX(0);opacity:1}100%{-webkit-transform:translateX(100%)skewX(-30deg);transform:translateX(100%)skewX(-30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,100%{-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,100%{-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:center center;transform-origin:center center}100%{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:left bottom;transform-origin:left bottom}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-transform-origin:left bottom;-transform:rotate(-90deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-transform-origin:left bottom;-transform:rotate(-90deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}0%,100%{-webkit-transform-origin:right bottom;transform-origin:right bottom}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0)}0%,20%,60%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg)}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}40%,80%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg)translateY(0);transform:rotate(60deg)translateY(0);opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}@keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0)}0%,20%,60%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg)}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg)}40%,80%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg)translateY(0);transform:rotate(60deg)translateY(0);opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%)rotate(-120deg);transform:translateX(-100%)rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%)rotate(-120deg);transform:translateX(-100%)rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}100%{opacity:0;-webkit-transform:translateX(100%)rotate(120deg);transform:translateX(100%)rotate(120deg)}}@keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0)rotate(0);transform:translateX(0)rotate(0)}100%{opacity:0;-webkit-transform:translateX(100%)rotate(120deg);transform:translateX(100%)rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut} \ No newline at end of file diff --git a/bower.json b/bower.json index 9b8e2d0..90bd8c0 100644 --- a/bower.json +++ b/bower.json @@ -1,5 +1,5 @@ { "name": "animate.css", - "version": "2.1.0", + "version": "3.0.0", "main": "./animate.css" } diff --git a/package.json b/package.json new file mode 100644 index 0000000..32960a6 --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "animate.css", + "version": "3.0.0", + "devDependencies": { + "grunt": "~0.4.1", + "grunt-autoprefixer": "~0.4.0", + "grunt-contrib-sass": "~0.5.0", + "grunt-contrib-watch": "~0.5.3", + "grunt-csso": "~0.5.0", + "grunt-contrib-concat": "~0.3.0" + } +} diff --git a/source/_base.css b/source/_base.css new file mode 100644 index 0000000..22cdfc8 --- /dev/null +++ b/source/_base.css @@ -0,0 +1,26 @@ +@charset "UTF-8"; +/*! +Animate.css - http://daneden.me/animate +Licensed under the MIT license + +Copyright (c) 2013 Daniel Eden + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +*/ + +body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ + backface-visibility: hidden; +} + +.animated { + animation-duration: 1s; + animation-fill-mode: both; +} + +.animated.hinge { + animation-duration: 2s; +} \ No newline at end of file diff --git a/source/attention_seekers/bounce.css b/source/attention_seekers/bounce.css new file mode 100644 index 0000000..a554e35 --- /dev/null +++ b/source/attention_seekers/bounce.css @@ -0,0 +1,9 @@ +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} + 40% {transform: translateY(-30px);} + 60% {transform: translateY(-15px);} +} + +.bounce { + animation-name: bounce; +} \ No newline at end of file diff --git a/source/attention_seekers/flash.css b/source/attention_seekers/flash.css new file mode 100644 index 0000000..5f36d8a --- /dev/null +++ b/source/attention_seekers/flash.css @@ -0,0 +1,8 @@ +@keyframes flash { + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} +} + +.flash { + animation-name: flash; +} \ No newline at end of file diff --git a/source/attention_seekers/pulse.css b/source/attention_seekers/pulse.css new file mode 100644 index 0000000..b77622c --- /dev/null +++ b/source/attention_seekers/pulse.css @@ -0,0 +1,11 @@ +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.1); } + 100% { transform: scale(1); } +} + +.pulse { + animation-name: pulse; +} \ No newline at end of file diff --git a/source/attention_seekers/shake.css b/source/attention_seekers/shake.css new file mode 100644 index 0000000..69180ba --- /dev/null +++ b/source/attention_seekers/shake.css @@ -0,0 +1,9 @@ +@keyframes shake { + 0%, 100% {transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} + 20%, 40%, 60%, 80% {transform: translateX(10px);} +} + +.shake { + animation-name: shake; +} \ No newline at end of file diff --git a/source/attention_seekers/swing.css b/source/attention_seekers/swing.css new file mode 100644 index 0000000..70e7261 --- /dev/null +++ b/source/attention_seekers/swing.css @@ -0,0 +1,12 @@ +@keyframes swing { + 20% { transform: rotate(15deg); } + 40% { transform: rotate(-10deg); } + 60% { transform: rotate(5deg); } + 80% { transform: rotate(-5deg); } + 100% { transform: rotate(0deg); } +} + +.swing { + transform-origin: top center; + animation-name: swing; +} \ No newline at end of file diff --git a/source/attention_seekers/tada.css b/source/attention_seekers/tada.css new file mode 100644 index 0000000..172ac2f --- /dev/null +++ b/source/attention_seekers/tada.css @@ -0,0 +1,11 @@ +@keyframes tada { + 0% {transform: scale(1);} + 10%, 20% {transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} + 100% {transform: scale(1) rotate(0);} +} + +.tada { + animation-name: tada; +} \ No newline at end of file diff --git a/source/attention_seekers/wobble.css b/source/attention_seekers/wobble.css new file mode 100644 index 0000000..d4e16e6 --- /dev/null +++ b/source/attention_seekers/wobble.css @@ -0,0 +1,15 @@ +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes wobble { + 0% { transform: translateX(0%); } + 15% { transform: translateX(-25%) rotate(-5deg); } + 30% { transform: translateX(20%) rotate(3deg); } + 45% { transform: translateX(-15%) rotate(-3deg); } + 60% { transform: translateX(10%) rotate(2deg); } + 75% { transform: translateX(-5%) rotate(-1deg); } + 100% { transform: translateX(0%); } +} + +.wobble { + animation-name: wobble; +} \ No newline at end of file diff --git a/source/bounce.css b/source/bounce.css deleted file mode 100644 index 8da5b73..0000000 --- a/source/bounce.css +++ /dev/null @@ -1,29 +0,0 @@ -@-webkit-keyframes bounce { - 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} - 40% {-webkit-transform: translateY(-30px);} - 60% {-webkit-transform: translateY(-15px);} -} - -@-moz-keyframes bounce { - 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} - 40% {-moz-transform: translateY(-30px);} - 60% {-moz-transform: translateY(-15px);} -} - -@-o-keyframes bounce { - 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} - 40% {-o-transform: translateY(-30px);} - 60% {-o-transform: translateY(-15px);} -} -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} - 40% {transform: translateY(-30px);} - 60% {transform: translateY(-15px);} -} - -.bounce { - -webkit-animation-name: bounce; - -moz-animation-name: bounce; - -o-animation-name: bounce; - animation-name: bounce; -} \ No newline at end of file diff --git a/source/bounceIn.css b/source/bounceIn.css deleted file mode 100644 index d720f54..0000000 --- a/source/bounceIn.css +++ /dev/null @@ -1,86 +0,0 @@ -@-webkit-keyframes bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.3); - } - - 50% { - opacity: 1; - -webkit-transform: scale(1.05); - } - - 70% { - -webkit-transform: scale(.9); - } - - 100% { - -webkit-transform: scale(1); - } -} - -@-moz-keyframes bounceIn { - 0% { - opacity: 0; - -moz-transform: scale(.3); - } - - 50% { - opacity: 1; - -moz-transform: scale(1.05); - } - - 70% { - -moz-transform: scale(.9); - } - - 100% { - -moz-transform: scale(1); - } -} - -@-o-keyframes bounceIn { - 0% { - opacity: 0; - -o-transform: scale(.3); - } - - 50% { - opacity: 1; - -o-transform: scale(1.05); - } - - 70% { - -o-transform: scale(.9); - } - - 100% { - -o-transform: scale(1); - } -} - -@keyframes bounceIn { - 0% { - opacity: 0; - transform: scale(.3); - } - - 50% { - opacity: 1; - transform: scale(1.05); - } - - 70% { - transform: scale(.9); - } - - 100% { - transform: scale(1); - } -} - -.bounceIn { - -webkit-animation-name: bounceIn; - -moz-animation-name: bounceIn; - -o-animation-name: bounceIn; - animation-name: bounceIn; -} \ No newline at end of file diff --git a/source/bounceInDown.css b/source/bounceInDown.css deleted file mode 100644 index 8e63fa4..0000000 --- a/source/bounceInDown.css +++ /dev/null @@ -1,86 +0,0 @@ -@-webkit-keyframes bounceInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } - - 60% { - opacity: 1; - -webkit-transform: translateY(30px); - } - - 80% { - -webkit-transform: translateY(-10px); - } - - 100% { - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes bounceInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateY(30px); - } - - 80% { - -moz-transform: translateY(-10px); - } - - 100% { - -moz-transform: translateY(0); - } -} - -@-o-keyframes bounceInDown { - 0% { - opacity: 0; - -o-transform: translateY(-2000px); - } - - 60% { - opacity: 1; - -o-transform: translateY(30px); - } - - 80% { - -o-transform: translateY(-10px); - } - - 100% { - -o-transform: translateY(0); - } -} - -@keyframes bounceInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 60% { - opacity: 1; - transform: translateY(30px); - } - - 80% { - transform: translateY(-10px); - } - - 100% { - transform: translateY(0); - } -} - -.bounceInDown { - -webkit-animation-name: bounceInDown; - -moz-animation-name: bounceInDown; - -o-animation-name: bounceInDown; - animation-name: bounceInDown; -} \ No newline at end of file diff --git a/source/bounceInLeft.css b/source/bounceInLeft.css deleted file mode 100644 index 8225f43..0000000 --- a/source/bounceInLeft.css +++ /dev/null @@ -1,86 +0,0 @@ -@-webkit-keyframes bounceInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } - - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - } - - 80% { - -webkit-transform: translateX(-10px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes bounceInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateX(30px); - } - - 80% { - -moz-transform: translateX(-10px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes bounceInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-2000px); - } - - 60% { - opacity: 1; - -o-transform: translateX(30px); - } - - 80% { - -o-transform: translateX(-10px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes bounceInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 60% { - opacity: 1; - transform: translateX(30px); - } - - 80% { - transform: translateX(-10px); - } - - 100% { - transform: translateX(0); - } -} - -.bounceInLeft { - -webkit-animation-name: bounceInLeft; - -moz-animation-name: bounceInLeft; - -o-animation-name: bounceInLeft; - animation-name: bounceInLeft; -} \ No newline at end of file diff --git a/source/bounceInRight.css b/source/bounceInRight.css deleted file mode 100644 index 57e3588..0000000 --- a/source/bounceInRight.css +++ /dev/null @@ -1,86 +0,0 @@ -@-webkit-keyframes bounceInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - } - - 60% { - opacity: 1; - -webkit-transform: translateX(-30px); - } - - 80% { - -webkit-transform: translateX(10px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes bounceInRight { - 0% { - opacity: 0; - -moz-transform: translateX(2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateX(-30px); - } - - 80% { - -moz-transform: translateX(10px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes bounceInRight { - 0% { - opacity: 0; - -o-transform: translateX(2000px); - } - - 60% { - opacity: 1; - -o-transform: translateX(-30px); - } - - 80% { - -o-transform: translateX(10px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes bounceInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 60% { - opacity: 1; - transform: translateX(-30px); - } - - 80% { - transform: translateX(10px); - } - - 100% { - transform: translateX(0); - } -} - -.bounceInRight { - -webkit-animation-name: bounceInRight; - -moz-animation-name: bounceInRight; - -o-animation-name: bounceInRight; - animation-name: bounceInRight; -} \ No newline at end of file diff --git a/source/bounceInUp.css b/source/bounceInUp.css deleted file mode 100644 index f8dbdc7..0000000 --- a/source/bounceInUp.css +++ /dev/null @@ -1,85 +0,0 @@ -@-webkit-keyframes bounceInUp { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - } - - 60% { - opacity: 1; - -webkit-transform: translateY(-30px); - } - - 80% { - -webkit-transform: translateY(10px); - } - - 100% { - -webkit-transform: translateY(0); - } -} -@-moz-keyframes bounceInUp { - 0% { - opacity: 0; - -moz-transform: translateY(2000px); - } - - 60% { - opacity: 1; - -moz-transform: translateY(-30px); - } - - 80% { - -moz-transform: translateY(10px); - } - - 100% { - -moz-transform: translateY(0); - } -} - -@-o-keyframes bounceInUp { - 0% { - opacity: 0; - -o-transform: translateY(2000px); - } - - 60% { - opacity: 1; - -o-transform: translateY(-30px); - } - - 80% { - -o-transform: translateY(10px); - } - - 100% { - -o-transform: translateY(0); - } -} - -@keyframes bounceInUp { - 0% { - opacity: 0; - transform: translateY(2000px); - } - - 60% { - opacity: 1; - transform: translateY(-30px); - } - - 80% { - transform: translateY(10px); - } - - 100% { - transform: translateY(0); - } -} - -.bounceInUp { - -webkit-animation-name: bounceInUp; - -moz-animation-name: bounceInUp; - -o-animation-name: bounceInUp; - animation-name: bounceInUp; -} \ No newline at end of file diff --git a/source/bounceOut.css b/source/bounceOut.css deleted file mode 100644 index c37f296..0000000 --- a/source/bounceOut.css +++ /dev/null @@ -1,86 +0,0 @@ -@-webkit-keyframes bounceOut { - 0% { - -webkit-transform: scale(1); - } - - 25% { - -webkit-transform: scale(.95); - } - - 50% { - opacity: 1; - -webkit-transform: scale(1.1); - } - - 100% { - opacity: 0; - -webkit-transform: scale(.3); - } -} - -@-moz-keyframes bounceOut { - 0% { - -moz-transform: scale(1); - } - - 25% { - -moz-transform: scale(.95); - } - - 50% { - opacity: 1; - -moz-transform: scale(1.1); - } - - 100% { - opacity: 0; - -moz-transform: scale(.3); - } -} - -@-o-keyframes bounceOut { - 0% { - -o-transform: scale(1); - } - - 25% { - -o-transform: scale(.95); - } - - 50% { - opacity: 1; - -o-transform: scale(1.1); - } - - 100% { - opacity: 0; - -o-transform: scale(.3); - } -} - -@keyframes bounceOut { - 0% { - transform: scale(1); - } - - 25% { - transform: scale(.95); - } - - 50% { - opacity: 1; - transform: scale(1.1); - } - - 100% { - opacity: 0; - transform: scale(.3); - } -} - -.bounceOut { - -webkit-animation-name: bounceOut; - -moz-animation-name: bounceOut; - -o-animation-name: bounceOut; - animation-name: bounceOut; -} \ No newline at end of file diff --git a/source/bounceOutDown.css b/source/bounceOutDown.css deleted file mode 100644 index a3691ad..0000000 --- a/source/bounceOutDown.css +++ /dev/null @@ -1,70 +0,0 @@ -@-webkit-keyframes bounceOutDown { - 0% { - -webkit-transform: translateY(0); - } - - 20% { - opacity: 1; - -webkit-transform: translateY(-20px); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(2000px); - } -} - -@-moz-keyframes bounceOutDown { - 0% { - -moz-transform: translateY(0); - } - - 20% { - opacity: 1; - -moz-transform: translateY(-20px); - } - - 100% { - opacity: 0; - -moz-transform: translateY(2000px); - } -} - -@-o-keyframes bounceOutDown { - 0% { - -o-transform: translateY(0); - } - - 20% { - opacity: 1; - -o-transform: translateY(-20px); - } - - 100% { - opacity: 0; - -o-transform: translateY(2000px); - } -} - -@keyframes bounceOutDown { - 0% { - transform: translateY(0); - } - - 20% { - opacity: 1; - transform: translateY(-20px); - } - - 100% { - opacity: 0; - transform: translateY(2000px); - } -} - -.bounceOutDown { - -webkit-animation-name: bounceOutDown; - -moz-animation-name: bounceOutDown; - -o-animation-name: bounceOutDown; - animation-name: bounceOutDown; -} \ No newline at end of file diff --git a/source/bounceOutLeft.css b/source/bounceOutLeft.css deleted file mode 100644 index 7f83501..0000000 --- a/source/bounceOutLeft.css +++ /dev/null @@ -1,70 +0,0 @@ -@-webkit-keyframes bounceOutLeft { - 0% { - -webkit-transform: translateX(0); - } - - 20% { - opacity: 1; - -webkit-transform: translateX(20px); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } -} - -@-moz-keyframes bounceOutLeft { - 0% { - -moz-transform: translateX(0); - } - - 20% { - opacity: 1; - -moz-transform: translateX(20px); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-2000px); - } -} - -@-o-keyframes bounceOutLeft { - 0% { - -o-transform: translateX(0); - } - - 20% { - opacity: 1; - -o-transform: translateX(20px); - } - - 100% { - opacity: 0; - -o-transform: translateX(-2000px); - } -} - -@keyframes bounceOutLeft { - 0% { - transform: translateX(0); - } - - 20% { - opacity: 1; - transform: translateX(20px); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.bounceOutLeft { - -webkit-animation-name: bounceOutLeft; - -moz-animation-name: bounceOutLeft; - -o-animation-name: bounceOutLeft; - animation-name: bounceOutLeft; -} \ No newline at end of file diff --git a/source/bounceOutRight.css b/source/bounceOutRight.css deleted file mode 100644 index 58fabae..0000000 --- a/source/bounceOutRight.css +++ /dev/null @@ -1,70 +0,0 @@ -@-webkit-keyframes bounceOutRight { - 0% { - -webkit-transform: translateX(0); - } - - 20% { - opacity: 1; - -webkit-transform: translateX(-20px); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - } -} - -@-moz-keyframes bounceOutRight { - 0% { - -moz-transform: translateX(0); - } - - 20% { - opacity: 1; - -moz-transform: translateX(-20px); - } - - 100% { - opacity: 0; - -moz-transform: translateX(2000px); - } -} - -@-o-keyframes bounceOutRight { - 0% { - -o-transform: translateX(0); - } - - 20% { - opacity: 1; - -o-transform: translateX(-20px); - } - - 100% { - opacity: 0; - -o-transform: translateX(2000px); - } -} - -@keyframes bounceOutRight { - 0% { - transform: translateX(0); - } - - 20% { - opacity: 1; - transform: translateX(-20px); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.bounceOutRight { - -webkit-animation-name: bounceOutRight; - -moz-animation-name: bounceOutRight; - -o-animation-name: bounceOutRight; - animation-name: bounceOutRight; -} \ No newline at end of file diff --git a/source/bounceOutUp.css b/source/bounceOutUp.css deleted file mode 100644 index 482907d..0000000 --- a/source/bounceOutUp.css +++ /dev/null @@ -1,70 +0,0 @@ -@-webkit-keyframes bounceOutUp { - 0% { - -webkit-transform: translateY(0); - } - - 20% { - opacity: 1; - -webkit-transform: translateY(20px); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } -} - -@-moz-keyframes bounceOutUp { - 0% { - -moz-transform: translateY(0); - } - - 20% { - opacity: 1; - -moz-transform: translateY(20px); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-2000px); - } -} - -@-o-keyframes bounceOutUp { - 0% { - -o-transform: translateY(0); - } - - 20% { - opacity: 1; - -o-transform: translateY(20px); - } - - 100% { - opacity: 0; - -o-transform: translateY(-2000px); - } -} - -@keyframes bounceOutUp { - 0% { - transform: translateY(0); - } - - 20% { - opacity: 1; - transform: translateY(20px); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.bounceOutUp { - -webkit-animation-name: bounceOutUp; - -moz-animation-name: bounceOutUp; - -o-animation-name: bounceOutUp; - animation-name: bounceOutUp; -} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceIn.css b/source/bouncing_entrances/bounceIn.css new file mode 100644 index 0000000..f872596 --- /dev/null +++ b/source/bouncing_entrances/bounceIn.css @@ -0,0 +1,23 @@ +@keyframes bounceIn { + 0% { + opacity: 0; + transform: scale(.3); + } + + 50% { + opacity: 1; + transform: scale(1.05); + } + + 70% { + transform: scale(.9); + } + + 100% { + transform: scale(1); + } +} + +.bounceIn { + animation-name: bounceIn; +} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceInDown.css b/source/bouncing_entrances/bounceInDown.css new file mode 100644 index 0000000..698c78d --- /dev/null +++ b/source/bouncing_entrances/bounceInDown.css @@ -0,0 +1,23 @@ +@keyframes bounceInDown { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + + 60% { + opacity: 1; + transform: translateY(30px); + } + + 80% { + transform: translateY(-10px); + } + + 100% { + transform: translateY(0); + } +} + +.bounceInDown { + animation-name: bounceInDown; +} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceInLeft.css b/source/bouncing_entrances/bounceInLeft.css new file mode 100644 index 0000000..8907502 --- /dev/null +++ b/source/bouncing_entrances/bounceInLeft.css @@ -0,0 +1,23 @@ +@keyframes bounceInLeft { + 0% { + opacity: 0; + transform: translateX(-2000px); + } + + 60% { + opacity: 1; + transform: translateX(30px); + } + + 80% { + transform: translateX(-10px); + } + + 100% { + transform: translateX(0); + } +} + +.bounceInLeft { + animation-name: bounceInLeft; +} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceInRight.css b/source/bouncing_entrances/bounceInRight.css new file mode 100644 index 0000000..c19e3d2 --- /dev/null +++ b/source/bouncing_entrances/bounceInRight.css @@ -0,0 +1,23 @@ +@keyframes bounceInRight { + 0% { + opacity: 0; + transform: translateX(2000px); + } + + 60% { + opacity: 1; + transform: translateX(-30px); + } + + 80% { + transform: translateX(10px); + } + + 100% { + transform: translateX(0); + } +} + +.bounceInRight { + animation-name: bounceInRight; +} \ No newline at end of file diff --git a/source/bouncing_entrances/bounceInUp.css b/source/bouncing_entrances/bounceInUp.css new file mode 100644 index 0000000..4ae91f1 --- /dev/null +++ b/source/bouncing_entrances/bounceInUp.css @@ -0,0 +1,23 @@ +@keyframes bounceInUp { + 0% { + opacity: 0; + transform: translateY(2000px); + } + + 60% { + opacity: 1; + transform: translateY(-30px); + } + + 80% { + transform: translateY(10px); + } + + 100% { + transform: translateY(0); + } +} + +.bounceInUp { + animation-name: bounceInUp; +} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOut.css b/source/bouncing_exits/bounceOut.css new file mode 100644 index 0000000..559f4de --- /dev/null +++ b/source/bouncing_exits/bounceOut.css @@ -0,0 +1,23 @@ +@keyframes bounceOut { + 0% { + transform: scale(1); + } + + 25% { + transform: scale(.95); + } + + 50% { + opacity: 1; + transform: scale(1.1); + } + + 100% { + opacity: 0; + transform: scale(.3); + } +} + +.bounceOut { + animation-name: bounceOut; +} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOutDown.css b/source/bouncing_exits/bounceOutDown.css new file mode 100644 index 0000000..43d8a43 --- /dev/null +++ b/source/bouncing_exits/bounceOutDown.css @@ -0,0 +1,19 @@ +@keyframes bounceOutDown { + 0% { + transform: translateY(0); + } + + 20% { + opacity: 1; + transform: translateY(-20px); + } + + 100% { + opacity: 0; + transform: translateY(2000px); + } +} + +.bounceOutDown { + animation-name: bounceOutDown; +} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOutLeft.css b/source/bouncing_exits/bounceOutLeft.css new file mode 100644 index 0000000..9ec4061 --- /dev/null +++ b/source/bouncing_exits/bounceOutLeft.css @@ -0,0 +1,19 @@ +@keyframes bounceOutLeft { + 0% { + transform: translateX(0); + } + + 20% { + opacity: 1; + transform: translateX(20px); + } + + 100% { + opacity: 0; + transform: translateX(-2000px); + } +} + +.bounceOutLeft { + animation-name: bounceOutLeft; +} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOutRight.css b/source/bouncing_exits/bounceOutRight.css new file mode 100644 index 0000000..5534733 --- /dev/null +++ b/source/bouncing_exits/bounceOutRight.css @@ -0,0 +1,19 @@ +@keyframes bounceOutRight { + 0% { + transform: translateX(0); + } + + 20% { + opacity: 1; + transform: translateX(-20px); + } + + 100% { + opacity: 0; + transform: translateX(2000px); + } +} + +.bounceOutRight { + animation-name: bounceOutRight; +} \ No newline at end of file diff --git a/source/bouncing_exits/bounceOutUp.css b/source/bouncing_exits/bounceOutUp.css new file mode 100644 index 0000000..a8606b8 --- /dev/null +++ b/source/bouncing_exits/bounceOutUp.css @@ -0,0 +1,19 @@ +@keyframes bounceOutUp { + 0% { + transform: translateY(0); + } + + 20% { + opacity: 1; + transform: translateY(20px); + } + + 100% { + opacity: 0; + transform: translateY(-2000px); + } +} + +.bounceOutUp { + animation-name: bounceOutUp; +} \ No newline at end of file diff --git a/source/fadeIn.css b/source/fadeIn.css deleted file mode 100644 index 50282ac..0000000 --- a/source/fadeIn.css +++ /dev/null @@ -1,26 +0,0 @@ -@-webkit-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@-moz-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@-o-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -@keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} -} - -.fadeIn { - -webkit-animation-name: fadeIn; - -moz-animation-name: fadeIn; - -o-animation-name: fadeIn; - animation-name: fadeIn; -} \ No newline at end of file diff --git a/source/fadeInDown.css b/source/fadeInDown.css deleted file mode 100644 index 1c00291..0000000 --- a/source/fadeInDown.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-20px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInDown { - 0% { - opacity: 0; - -o-transform: translateY(-20px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInDown { - -webkit-animation-name: fadeInDown; - -moz-animation-name: fadeInDown; - -o-animation-name: fadeInDown; - animation-name: fadeInDown; -} \ No newline at end of file diff --git a/source/fadeInDownBig.css b/source/fadeInDownBig.css deleted file mode 100644 index d35817e..0000000 --- a/source/fadeInDownBig.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeInDownBig { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInDownBig { - 0% { - opacity: 0; - -moz-transform: translateY(-2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInDownBig { - 0% { - opacity: 0; - -o-transform: translateY(-2000px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInDownBig { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInDownBig { - -webkit-animation-name: fadeInDownBig; - -moz-animation-name: fadeInDownBig; - -o-animation-name: fadeInDownBig; - animation-name: fadeInDownBig; -} \ No newline at end of file diff --git a/source/fadeInLeft.css b/source/fadeInLeft.css deleted file mode 100644 index 66a6c99..0000000 --- a/source/fadeInLeft.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes fadeInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-20px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} - -@-o-keyframes fadeInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-20px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} - -@keyframes fadeInLeft { - 0% { - opacity: 0; - transform: translateX(-20px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInLeft { - -webkit-animation-name: fadeInLeft; - -moz-animation-name: fadeInLeft; - -o-animation-name: fadeInLeft; - animation-name: fadeInLeft; -} \ No newline at end of file diff --git a/source/fadeInLeftBig.css b/source/fadeInLeftBig.css deleted file mode 100644 index bea317d..0000000 --- a/source/fadeInLeftBig.css +++ /dev/null @@ -1,51 +0,0 @@ -@-webkit-keyframes fadeInLeftBig { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} -@-moz-keyframes fadeInLeftBig { - 0% { - opacity: 0; - -moz-transform: translateX(-2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} -@-o-keyframes fadeInLeftBig { - 0% { - opacity: 0; - -o-transform: translateX(-2000px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} -@keyframes fadeInLeftBig { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInLeftBig { - -webkit-animation-name: fadeInLeftBig; - -moz-animation-name: fadeInLeftBig; - -o-animation-name: fadeInLeftBig; - animation-name: fadeInLeftBig; -} \ No newline at end of file diff --git a/source/fadeInRight.css b/source/fadeInRight.css deleted file mode 100644 index 6c60134..0000000 --- a/source/fadeInRight.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes fadeInRight { - 0% { - opacity: 0; - -moz-transform: translateX(20px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} - -@-o-keyframes fadeInRight { - 0% { - opacity: 0; - -o-transform: translateX(20px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} - -@keyframes fadeInRight { - 0% { - opacity: 0; - transform: translateX(20px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInRight { - -webkit-animation-name: fadeInRight; - -moz-animation-name: fadeInRight; - -o-animation-name: fadeInRight; - animation-name: fadeInRight; -} \ No newline at end of file diff --git a/source/fadeInRightBig.css b/source/fadeInRightBig.css deleted file mode 100644 index 6a442b8..0000000 --- a/source/fadeInRightBig.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeInRightBig { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes fadeInRightBig { - 0% { - opacity: 0; - -moz-transform: translateX(2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateX(0); - } -} - -@-o-keyframes fadeInRightBig { - 0% { - opacity: 0; - -o-transform: translateX(2000px); - } - - 100% { - opacity: 1; - -o-transform: translateX(0); - } -} - -@keyframes fadeInRightBig { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -.fadeInRightBig { - -webkit-animation-name: fadeInRightBig; - -moz-animation-name: fadeInRightBig; - -o-animation-name: fadeInRightBig; - animation-name: fadeInRightBig; -} \ No newline at end of file diff --git a/source/fadeInUp.css b/source/fadeInUp.css deleted file mode 100644 index 54b4d26..0000000 --- a/source/fadeInUp.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeInUp { - 0% { - opacity: 0; - -webkit-transform: translateY(20px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInUp { - 0% { - opacity: 0; - -moz-transform: translateY(20px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInUp { - 0% { - opacity: 0; - -o-transform: translateY(20px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInUp { - -webkit-animation-name: fadeInUp; - -moz-animation-name: fadeInUp; - -o-animation-name: fadeInUp; - animation-name: fadeInUp; -} \ No newline at end of file diff --git a/source/fadeInUpBig.css b/source/fadeInUpBig.css deleted file mode 100644 index 1f28c09..0000000 --- a/source/fadeInUpBig.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeInUpBig { - 0% { - opacity: 0; - -webkit-transform: translateY(2000px); - } - - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes fadeInUpBig { - 0% { - opacity: 0; - -moz-transform: translateY(2000px); - } - - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} - -@-o-keyframes fadeInUpBig { - 0% { - opacity: 0; - -o-transform: translateY(2000px); - } - - 100% { - opacity: 1; - -o-transform: translateY(0); - } -} - -@keyframes fadeInUpBig { - 0% { - opacity: 0; - transform: translateY(2000px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.fadeInUpBig { - -webkit-animation-name: fadeInUpBig; - -moz-animation-name: fadeInUpBig; - -o-animation-name: fadeInUpBig; - animation-name: fadeInUpBig; -} \ No newline at end of file diff --git a/source/fadeOut.css b/source/fadeOut.css deleted file mode 100644 index ba64505..0000000 --- a/source/fadeOut.css +++ /dev/null @@ -1,26 +0,0 @@ -@-webkit-keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -@-moz-keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -@-o-keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -@keyframes fadeOut { - 0% {opacity: 1;} - 100% {opacity: 0;} -} - -.fadeOut { - -webkit-animation-name: fadeOut; - -moz-animation-name: fadeOut; - -o-animation-name: fadeOut; - animation-name: fadeOut; -} \ No newline at end of file diff --git a/source/fadeOutDown.css b/source/fadeOutDown.css deleted file mode 100644 index 214e753..0000000 --- a/source/fadeOutDown.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeOutDown { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(20px); - } -} - -@-moz-keyframes fadeOutDown { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(20px); - } -} - -@-o-keyframes fadeOutDown { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(20px); - } -} - -@keyframes fadeOutDown { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(20px); - } -} - -.fadeOutDown { - -webkit-animation-name: fadeOutDown; - -moz-animation-name: fadeOutDown; - -o-animation-name: fadeOutDown; - animation-name: fadeOutDown; -} \ No newline at end of file diff --git a/source/fadeOutDownBig.css b/source/fadeOutDownBig.css deleted file mode 100644 index 21e34fd..0000000 --- a/source/fadeOutDownBig.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeOutDownBig { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(2000px); - } -} - -@-moz-keyframes fadeOutDownBig { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(2000px); - } -} - -@-o-keyframes fadeOutDownBig { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(2000px); - } -} - -@keyframes fadeOutDownBig { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(2000px); - } -} - -.fadeOutDownBig { - -webkit-animation-name: fadeOutDownBig; - -moz-animation-name: fadeOutDownBig; - -o-animation-name: fadeOutDownBig; - animation-name: fadeOutDownBig; -} \ No newline at end of file diff --git a/source/fadeOutLeft.css b/source/fadeOutLeft.css deleted file mode 100644 index 90ce81e..0000000 --- a/source/fadeOutLeft.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeOutLeft { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-20px); - } -} - -@-moz-keyframes fadeOutLeft { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-20px); - } -} - -@-o-keyframes fadeOutLeft { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(-20px); - } -} - -@keyframes fadeOutLeft { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-20px); - } -} - -.fadeOutLeft { - -webkit-animation-name: fadeOutLeft; - -moz-animation-name: fadeOutLeft; - -o-animation-name: fadeOutLeft; - animation-name: fadeOutLeft; -} \ No newline at end of file diff --git a/source/fadeOutLeftBig.css b/source/fadeOutLeftBig.css deleted file mode 100644 index 0e3ab3d..0000000 --- a/source/fadeOutLeftBig.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeOutLeftBig { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } -} - -@-moz-keyframes fadeOutLeftBig { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-2000px); - } -} - -@-o-keyframes fadeOutLeftBig { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(-2000px); - } -} - -@keyframes fadeOutLeftBig { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.fadeOutLeftBig { - -webkit-animation-name: fadeOutLeftBig; - -moz-animation-name: fadeOutLeftBig; - -o-animation-name: fadeOutLeftBig; - animation-name: fadeOutLeftBig; -} \ No newline at end of file diff --git a/source/fadeOutRight.css b/source/fadeOutRight.css deleted file mode 100644 index 39dd83b..0000000 --- a/source/fadeOutRight.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeOutRight { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(20px); - } -} - -@-moz-keyframes fadeOutRight { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(20px); - } -} - -@-o-keyframes fadeOutRight { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(20px); - } -} - -@keyframes fadeOutRight { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(20px); - } -} - -.fadeOutRight { - -webkit-animation-name: fadeOutRight; - -moz-animation-name: fadeOutRight; - -o-animation-name: fadeOutRight; - animation-name: fadeOutRight; -} \ No newline at end of file diff --git a/source/fadeOutRightBig.css b/source/fadeOutRightBig.css deleted file mode 100644 index 5682f1e..0000000 --- a/source/fadeOutRightBig.css +++ /dev/null @@ -1,51 +0,0 @@ -@-webkit-keyframes fadeOutRightBig { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - } -} -@-moz-keyframes fadeOutRightBig { - 0% { - opacity: 1; - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(2000px); - } -} -@-o-keyframes fadeOutRightBig { - 0% { - opacity: 1; - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(2000px); - } -} -@keyframes fadeOutRightBig { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.fadeOutRightBig { - -webkit-animation-name: fadeOutRightBig; - -moz-animation-name: fadeOutRightBig; - -o-animation-name: fadeOutRightBig; - animation-name: fadeOutRightBig; -} \ No newline at end of file diff --git a/source/fadeOutUp.css b/source/fadeOutUp.css deleted file mode 100644 index cf6115a..0000000 --- a/source/fadeOutUp.css +++ /dev/null @@ -1,51 +0,0 @@ -@-webkit-keyframes fadeOutUp { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-20px); - } -} -@-moz-keyframes fadeOutUp { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-20px); - } -} -@-o-keyframes fadeOutUp { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(-20px); - } -} -@keyframes fadeOutUp { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-20px); - } -} - -.fadeOutUp { - -webkit-animation-name: fadeOutUp; - -moz-animation-name: fadeOutUp; - -o-animation-name: fadeOutUp; - animation-name: fadeOutUp; -} \ No newline at end of file diff --git a/source/fadeOutUpBig.css b/source/fadeOutUpBig.css deleted file mode 100644 index 40e6a3b..0000000 --- a/source/fadeOutUpBig.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes fadeOutUpBig { - 0% { - opacity: 1; - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } -} - -@-moz-keyframes fadeOutUpBig { - 0% { - opacity: 1; - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-2000px); - } -} - -@-o-keyframes fadeOutUpBig { - 0% { - opacity: 1; - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(-2000px); - } -} - -@keyframes fadeOutUpBig { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.fadeOutUpBig { - -webkit-animation-name: fadeOutUpBig; - -moz-animation-name: fadeOutUpBig; - -o-animation-name: fadeOutUpBig; - animation-name: fadeOutUpBig; -} \ No newline at end of file diff --git a/source/fading_entrances/fadeIn.css b/source/fading_entrances/fadeIn.css new file mode 100644 index 0000000..2916944 --- /dev/null +++ b/source/fading_entrances/fadeIn.css @@ -0,0 +1,8 @@ +@keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +.fadeIn { + animation-name: fadeIn; +} \ No newline at end of file diff --git a/source/fading_entrances/fadeInDown.css b/source/fading_entrances/fadeInDown.css new file mode 100644 index 0000000..4328fba --- /dev/null +++ b/source/fading_entrances/fadeInDown.css @@ -0,0 +1,15 @@ +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInDown { + animation-name: fadeInDown; +} \ No newline at end of file diff --git a/source/fading_entrances/fadeInDownBig.css b/source/fading_entrances/fadeInDownBig.css new file mode 100644 index 0000000..cca41ff --- /dev/null +++ b/source/fading_entrances/fadeInDownBig.css @@ -0,0 +1,15 @@ +@keyframes fadeInDownBig { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInDownBig { + animation-name: fadeInDownBig; +} \ No newline at end of file diff --git a/source/fading_entrances/fadeInLeft.css b/source/fading_entrances/fadeInLeft.css new file mode 100644 index 0000000..18ba4ea --- /dev/null +++ b/source/fading_entrances/fadeInLeft.css @@ -0,0 +1,15 @@ +@keyframes fadeInLeft { + 0% { + opacity: 0; + transform: translateX(-20px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInLeft { + animation-name: fadeInLeft; +} \ No newline at end of file diff --git a/source/fading_entrances/fadeInLeftBig.css b/source/fading_entrances/fadeInLeftBig.css new file mode 100644 index 0000000..43df0d2 --- /dev/null +++ b/source/fading_entrances/fadeInLeftBig.css @@ -0,0 +1,15 @@ +@keyframes fadeInLeftBig { + 0% { + opacity: 0; + transform: translateX(-2000px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInLeftBig { + animation-name: fadeInLeftBig; +} \ No newline at end of file diff --git a/source/fading_entrances/fadeInRight.css b/source/fading_entrances/fadeInRight.css new file mode 100644 index 0000000..1fe7767 --- /dev/null +++ b/source/fading_entrances/fadeInRight.css @@ -0,0 +1,15 @@ +@keyframes fadeInRight { + 0% { + opacity: 0; + transform: translateX(20px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInRight { + animation-name: fadeInRight; +} \ No newline at end of file diff --git a/source/fading_entrances/fadeInRightBig.css b/source/fading_entrances/fadeInRightBig.css new file mode 100644 index 0000000..ab19aec --- /dev/null +++ b/source/fading_entrances/fadeInRightBig.css @@ -0,0 +1,15 @@ +@keyframes fadeInRightBig { + 0% { + opacity: 0; + transform: translateX(2000px); + } + + 100% { + opacity: 1; + transform: translateX(0); + } +} + +.fadeInRightBig { + animation-name: fadeInRightBig; +} \ No newline at end of file diff --git a/source/fading_entrances/fadeInUp.css b/source/fading_entrances/fadeInUp.css new file mode 100644 index 0000000..0aeb471 --- /dev/null +++ b/source/fading_entrances/fadeInUp.css @@ -0,0 +1,15 @@ +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInUp { + animation-name: fadeInUp; +} \ No newline at end of file diff --git a/source/fading_entrances/fadeInUpBig.css b/source/fading_entrances/fadeInUpBig.css new file mode 100644 index 0000000..e964f3d --- /dev/null +++ b/source/fading_entrances/fadeInUpBig.css @@ -0,0 +1,15 @@ +@keyframes fadeInUpBig { + 0% { + opacity: 0; + transform: translateY(2000px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInUpBig { + animation-name: fadeInUpBig; +} \ No newline at end of file diff --git a/source/fading_exits/fadeOut.css b/source/fading_exits/fadeOut.css new file mode 100644 index 0000000..ea9051f --- /dev/null +++ b/source/fading_exits/fadeOut.css @@ -0,0 +1,8 @@ +@keyframes fadeOut { + 0% {opacity: 1;} + 100% {opacity: 0;} +} + +.fadeOut { + animation-name: fadeOut; +} \ No newline at end of file diff --git a/source/fading_exits/fadeOutDown.css b/source/fading_exits/fadeOutDown.css new file mode 100644 index 0000000..c02763c --- /dev/null +++ b/source/fading_exits/fadeOutDown.css @@ -0,0 +1,15 @@ +@keyframes fadeOutDown { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(20px); + } +} + +.fadeOutDown { + animation-name: fadeOutDown; +} \ No newline at end of file diff --git a/source/fading_exits/fadeOutDownBig.css b/source/fading_exits/fadeOutDownBig.css new file mode 100644 index 0000000..bb0bb61 --- /dev/null +++ b/source/fading_exits/fadeOutDownBig.css @@ -0,0 +1,15 @@ +@keyframes fadeOutDownBig { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(2000px); + } +} + +.fadeOutDownBig { + animation-name: fadeOutDownBig; +} \ No newline at end of file diff --git a/source/fading_exits/fadeOutLeft.css b/source/fading_exits/fadeOutLeft.css new file mode 100644 index 0000000..d86012a --- /dev/null +++ b/source/fading_exits/fadeOutLeft.css @@ -0,0 +1,15 @@ +@keyframes fadeOutLeft { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(-20px); + } +} + +.fadeOutLeft { + animation-name: fadeOutLeft; +} \ No newline at end of file diff --git a/source/fading_exits/fadeOutLeftBig.css b/source/fading_exits/fadeOutLeftBig.css new file mode 100644 index 0000000..c74fc51 --- /dev/null +++ b/source/fading_exits/fadeOutLeftBig.css @@ -0,0 +1,15 @@ +@keyframes fadeOutLeftBig { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(-2000px); + } +} + +.fadeOutLeftBig { + animation-name: fadeOutLeftBig; +} \ No newline at end of file diff --git a/source/fading_exits/fadeOutRight.css b/source/fading_exits/fadeOutRight.css new file mode 100644 index 0000000..54b62ec --- /dev/null +++ b/source/fading_exits/fadeOutRight.css @@ -0,0 +1,15 @@ +@keyframes fadeOutRight { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(20px); + } +} + +.fadeOutRight { + animation-name: fadeOutRight; +} \ No newline at end of file diff --git a/source/fading_exits/fadeOutRightBig.css b/source/fading_exits/fadeOutRightBig.css new file mode 100644 index 0000000..344998d --- /dev/null +++ b/source/fading_exits/fadeOutRightBig.css @@ -0,0 +1,15 @@ +@keyframes fadeOutRightBig { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(2000px); + } +} + +.fadeOutRightBig { + animation-name: fadeOutRightBig; +} \ No newline at end of file diff --git a/source/fading_exits/fadeOutUp.css b/source/fading_exits/fadeOutUp.css new file mode 100644 index 0000000..c872ab8 --- /dev/null +++ b/source/fading_exits/fadeOutUp.css @@ -0,0 +1,15 @@ +@keyframes fadeOutUp { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(-20px); + } +} + +.fadeOutUp { + animation-name: fadeOutUp; +} \ No newline at end of file diff --git a/source/fading_exits/fadeOutUpBig.css b/source/fading_exits/fadeOutUpBig.css new file mode 100644 index 0000000..9029557 --- /dev/null +++ b/source/fading_exits/fadeOutUpBig.css @@ -0,0 +1,15 @@ +@keyframes fadeOutUpBig { + 0% { + opacity: 1; + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(-2000px); + } +} + +.fadeOutUpBig { + animation-name: fadeOutUpBig; +} \ No newline at end of file diff --git a/source/flash.css b/source/flash.css deleted file mode 100644 index 6e3d2f4..0000000 --- a/source/flash.css +++ /dev/null @@ -1,26 +0,0 @@ -@-webkit-keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} -} - -@-moz-keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} -} - -@-o-keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} -} - -@keyframes flash { - 0%, 50%, 100% {opacity: 1;} - 25%, 75% {opacity: 0;} -} - -.flash { - -webkit-animation-name: flash; - -moz-animation-name: flash; - -o-animation-name: flash; - animation-name: flash; -} \ No newline at end of file diff --git a/source/flip.css b/source/flip.css deleted file mode 100644 index a5ad909..0000000 --- a/source/flip.css +++ /dev/null @@ -1,99 +0,0 @@ -@-webkit-keyframes flip { - 0% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - -webkit-animation-timing-function: ease-out; - } - 40% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - -webkit-animation-timing-function: ease-out; - } - 50% { - -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - -webkit-animation-timing-function: ease-in; - } - 80% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - -webkit-animation-timing-function: ease-in; - } - 100% { - -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - -webkit-animation-timing-function: ease-in; - } -} -@-moz-keyframes flip { - 0% { - -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - -moz-animation-timing-function: ease-out; - } - 40% { - -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - -moz-animation-timing-function: ease-out; - } - 50% { - -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - -moz-animation-timing-function: ease-in; - } - 80% { - -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - -moz-animation-timing-function: ease-in; - } - 100% { - -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - -moz-animation-timing-function: ease-in; - } -} -@-o-keyframes flip { - 0% { - -o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - -o-animation-timing-function: ease-out; - } - 40% { - -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - -o-animation-timing-function: ease-out; - } - 50% { - -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - -o-animation-timing-function: ease-in; - } - 80% { - -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - -o-animation-timing-function: ease-in; - } - 100% { - -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - -o-animation-timing-function: ease-in; - } -} -@keyframes flip { - 0% { - transform: perspective(400px) translateZ(0) rotateY(0) scale(1); - animation-timing-function: ease-out; - } - 40% { - transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); - animation-timing-function: ease-out; - } - 50% { - transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); - animation-timing-function: ease-in; - } - 80% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); - animation-timing-function: ease-in; - } - 100% { - transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); - animation-timing-function: ease-in; - } -} - -.animated.flip { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flip; - -moz-backface-visibility: visible !important; - -moz-animation-name: flip; - -o-backface-visibility: visible !important; - -o-animation-name: flip; - backface-visibility: visible !important; - animation-name: flip; -} diff --git a/source/flipInX.css b/source/flipInX.css deleted file mode 100644 index 106e67b..0000000 --- a/source/flipInX.css +++ /dev/null @@ -1,87 +0,0 @@ -@-webkit-keyframes flipInX { - 0% { - -webkit-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotateX(-10deg); - } - - 70% { - -webkit-transform: perspective(400px) rotateX(10deg); - } - - 100% { - -webkit-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} -@-moz-keyframes flipInX { - 0% { - -moz-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - -moz-transform: perspective(400px) rotateX(-10deg); - } - - 70% { - -moz-transform: perspective(400px) rotateX(10deg); - } - - 100% { - -moz-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} -@-o-keyframes flipInX { - 0% { - -o-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - -o-transform: perspective(400px) rotateX(-10deg); - } - - 70% { - -o-transform: perspective(400px) rotateX(10deg); - } - - 100% { - -o-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} -@keyframes flipInX { - 0% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } - - 40% { - transform: perspective(400px) rotateX(-10deg); - } - - 70% { - transform: perspective(400px) rotateX(10deg); - } - - 100% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } -} - -.flipInX { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flipInX; - -moz-backface-visibility: visible !important; - -moz-animation-name: flipInX; - -o-backface-visibility: visible !important; - -o-animation-name: flipInX; - backface-visibility: visible !important; - animation-name: flipInX; -} \ No newline at end of file diff --git a/source/flipInY.css b/source/flipInY.css deleted file mode 100644 index c1a64e5..0000000 --- a/source/flipInY.css +++ /dev/null @@ -1,87 +0,0 @@ -@-webkit-keyframes flipInY { - 0% { - -webkit-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotateY(-10deg); - } - - 70% { - -webkit-transform: perspective(400px) rotateY(10deg); - } - - 100% { - -webkit-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} -@-moz-keyframes flipInY { - 0% { - -moz-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - -moz-transform: perspective(400px) rotateY(-10deg); - } - - 70% { - -moz-transform: perspective(400px) rotateY(10deg); - } - - 100% { - -moz-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} -@-o-keyframes flipInY { - 0% { - -o-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - -o-transform: perspective(400px) rotateY(-10deg); - } - - 70% { - -o-transform: perspective(400px) rotateY(10deg); - } - - 100% { - -o-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} -@keyframes flipInY { - 0% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } - - 40% { - transform: perspective(400px) rotateY(-10deg); - } - - 70% { - transform: perspective(400px) rotateY(10deg); - } - - 100% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } -} - -.flipInY { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flipInY; - -moz-backface-visibility: visible !important; - -moz-animation-name: flipInY; - -o-backface-visibility: visible !important; - -o-animation-name: flipInY; - backface-visibility: visible !important; - animation-name: flipInY; -} \ No newline at end of file diff --git a/source/flipOutX.css b/source/flipOutX.css deleted file mode 100644 index 1b55926..0000000 --- a/source/flipOutX.css +++ /dev/null @@ -1,54 +0,0 @@ -@-webkit-keyframes flipOutX { - 0% { - -webkit-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - -webkit-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -@-moz-keyframes flipOutX { - 0% { - -moz-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - -moz-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -@-o-keyframes flipOutX { - 0% { - -o-transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - -o-transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -@keyframes flipOutX { - 0% { - transform: perspective(400px) rotateX(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateX(90deg); - opacity: 0; - } -} - -.flipOutX { - -webkit-animation-name: flipOutX; - -webkit-backface-visibility: visible !important; - -moz-animation-name: flipOutX; - -moz-backface-visibility: visible !important; - -o-animation-name: flipOutX; - -o-backface-visibility: visible !important; - animation-name: flipOutX; - backface-visibility: visible !important; -} \ No newline at end of file diff --git a/source/flipOutY.css b/source/flipOutY.css deleted file mode 100644 index 3bc2dd2..0000000 --- a/source/flipOutY.css +++ /dev/null @@ -1,51 +0,0 @@ -@-webkit-keyframes flipOutY { - 0% { - -webkit-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - -webkit-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} -@-moz-keyframes flipOutY { - 0% { - -moz-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - -moz-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} -@-o-keyframes flipOutY { - 0% { - -o-transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - -o-transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} -@keyframes flipOutY { - 0% { - transform: perspective(400px) rotateY(0deg); - opacity: 1; - } - 100% { - transform: perspective(400px) rotateY(90deg); - opacity: 0; - } -} - -.flipOutY { - -webkit-backface-visibility: visible !important; - -webkit-animation-name: flipOutY; - -moz-backface-visibility: visible !important; - -moz-animation-name: flipOutY; - -o-backface-visibility: visible !important; - -o-animation-name: flipOutY; - backface-visibility: visible !important; - animation-name: flipOutY; -} \ No newline at end of file diff --git a/source/flippers/flip.css b/source/flippers/flip.css new file mode 100644 index 0000000..c7e77bf --- /dev/null +++ b/source/flippers/flip.css @@ -0,0 +1,27 @@ +@keyframes flip { + 0% { + transform: perspective(400px) translateZ(0) rotateY(0) scale(1); + animation-timing-function: ease-out; + } + 40% { + transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); + animation-timing-function: ease-out; + } + 50% { + transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); + animation-timing-function: ease-in; + } + 80% { + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); + animation-timing-function: ease-in; + } + 100% { + transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); + animation-timing-function: ease-in; + } +} + +.animated.flip { + backface-visibility: visible !important; + animation-name: flip; +} diff --git a/source/flippers/flipInX.css b/source/flippers/flipInX.css new file mode 100644 index 0000000..dce639f --- /dev/null +++ b/source/flippers/flipInX.css @@ -0,0 +1,24 @@ +@keyframes flipInX { + 0% { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + + 40% { + transform: perspective(400px) rotateX(-10deg); + } + + 70% { + transform: perspective(400px) rotateX(10deg); + } + + 100% { + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } +} + +.flipInX { + backface-visibility: visible !important; + animation-name: flipInX; +} \ No newline at end of file diff --git a/source/flippers/flipInY.css b/source/flippers/flipInY.css new file mode 100644 index 0000000..0078030 --- /dev/null +++ b/source/flippers/flipInY.css @@ -0,0 +1,24 @@ +@keyframes flipInY { + 0% { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + + 40% { + transform: perspective(400px) rotateY(-10deg); + } + + 70% { + transform: perspective(400px) rotateY(10deg); + } + + 100% { + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } +} + +.flipInY { + backface-visibility: visible !important; + animation-name: flipInY; +} \ No newline at end of file diff --git a/source/flippers/flipOutX.css b/source/flippers/flipOutX.css new file mode 100644 index 0000000..4bb32d0 --- /dev/null +++ b/source/flippers/flipOutX.css @@ -0,0 +1,15 @@ +@keyframes flipOutX { + 0% { + transform: perspective(400px) rotateX(0deg); + opacity: 1; + } + 100% { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } +} + +.flipOutX { + animation-name: flipOutX; + backface-visibility: visible !important; +} \ No newline at end of file diff --git a/source/flippers/flipOutY.css b/source/flippers/flipOutY.css new file mode 100644 index 0000000..948caf8 --- /dev/null +++ b/source/flippers/flipOutY.css @@ -0,0 +1,15 @@ +@keyframes flipOutY { + 0% { + transform: perspective(400px) rotateY(0deg); + opacity: 1; + } + 100% { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} + +.flipOutY { + backface-visibility: visible !important; + animation-name: flipOutY; +} \ No newline at end of file diff --git a/source/hinge.css b/source/hinge.css deleted file mode 100644 index 548d0f2..0000000 --- a/source/hinge.css +++ /dev/null @@ -1,38 +0,0 @@ -@-webkit-keyframes hinge { - 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 100% { -webkit-transform: translateY(700px); opacity: 0; } -} - -@-moz-keyframes hinge { - 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 100% { -moz-transform: translateY(700px); opacity: 0; } -} - -@-o-keyframes hinge { - 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 100% { -o-transform: translateY(700px); opacity: 0; } -} - -@keyframes hinge { - 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } - 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } - 100% { transform: translateY(700px); opacity: 0; } -} - -.hinge { - -webkit-animation-name: hinge; - -moz-animation-name: hinge; - -o-animation-name: hinge; - animation-name: hinge; -} \ No newline at end of file diff --git a/source/lightSpeedIn.css b/source/lightSpeedIn.css deleted file mode 100644 index c4f6fbd..0000000 --- a/source/lightSpeedIn.css +++ /dev/null @@ -1,39 +0,0 @@ -@-webkit-keyframes lightSpeedIn { - 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } -} - -@-moz-keyframes lightSpeedIn { - 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } -} - -@-o-keyframes lightSpeedIn { - 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } -} - -@keyframes lightSpeedIn { - 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } - 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } - 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } - 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } -} - -.lightSpeedIn { - -webkit-animation-name: lightSpeedIn; - -moz-animation-name: lightSpeedIn; - -o-animation-name: lightSpeedIn; - animation-name: lightSpeedIn; - - -webkit-animation-timing-function: ease-out; - -moz-animation-timing-function: ease-out; - -o-animation-timing-function: ease-out; - animation-timing-function: ease-out; -} \ No newline at end of file diff --git a/source/lightSpeedOut.css b/source/lightSpeedOut.css deleted file mode 100644 index 7c08703..0000000 --- a/source/lightSpeedOut.css +++ /dev/null @@ -1,31 +0,0 @@ -@-webkit-keyframes lightSpeedOut { - 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -@-moz-keyframes lightSpeedOut { - 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -@-o-keyframes lightSpeedOut { - 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -@keyframes lightSpeedOut { - 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } - 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } -} - -.lightSpeedOut { - -webkit-animation-name: lightSpeedOut; - -moz-animation-name: lightSpeedOut; - -o-animation-name: lightSpeedOut; - animation-name: lightSpeedOut; - - -webkit-animation-timing-function: ease-in; - -moz-animation-timing-function: ease-in; - -o-animation-timing-function: ease-in; - animation-timing-function: ease-in; -} \ No newline at end of file diff --git a/source/lightspeed/lightSpeedIn.css b/source/lightspeed/lightSpeedIn.css new file mode 100644 index 0000000..dee261e --- /dev/null +++ b/source/lightspeed/lightSpeedIn.css @@ -0,0 +1,11 @@ +@keyframes lightSpeedIn { + 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } + 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } + 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } + 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } +} + +.lightSpeedIn { + animation-name: lightSpeedIn; + animation-timing-function: ease-out; +} \ No newline at end of file diff --git a/source/lightspeed/lightSpeedOut.css b/source/lightspeed/lightSpeedOut.css new file mode 100644 index 0000000..927f6b4 --- /dev/null +++ b/source/lightspeed/lightSpeedOut.css @@ -0,0 +1,10 @@ +@keyframes lightSpeedOut { + 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } + 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } +} + +.lightSpeedOut { + animation-name: lightSpeedOut; + + animation-timing-function: ease-in; +} \ No newline at end of file diff --git a/source/pulse.css b/source/pulse.css deleted file mode 100644 index c67f2c0..0000000 --- a/source/pulse.css +++ /dev/null @@ -1,29 +0,0 @@ -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes pulse { - 0% { -webkit-transform: scale(1); } - 50% { -webkit-transform: scale(1.1); } - 100% { -webkit-transform: scale(1); } -} -@-moz-keyframes pulse { - 0% { -moz-transform: scale(1); } - 50% { -moz-transform: scale(1.1); } - 100% { -moz-transform: scale(1); } -} -@-o-keyframes pulse { - 0% { -o-transform: scale(1); } - 50% { -o-transform: scale(1.1); } - 100% { -o-transform: scale(1); } -} -@keyframes pulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.1); } - 100% { transform: scale(1); } -} - -.pulse { - -webkit-animation-name: pulse; - -moz-animation-name: pulse; - -o-animation-name: pulse; - animation-name: pulse; -} \ No newline at end of file diff --git a/source/rollIn.css b/source/rollIn.css deleted file mode 100644 index 8f48a5e..0000000 --- a/source/rollIn.css +++ /dev/null @@ -1,28 +0,0 @@ -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes rollIn { - 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } -} - -@-moz-keyframes rollIn { - 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } -} - -@-o-keyframes rollIn { - 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } -} - -@keyframes rollIn { - 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } - 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } -} - -.rollIn { - -webkit-animation-name: rollIn; - -moz-animation-name: rollIn; - -o-animation-name: rollIn; - animation-name: rollIn; -} \ No newline at end of file diff --git a/source/rollOut.css b/source/rollOut.css deleted file mode 100644 index 5d90c6f..0000000 --- a/source/rollOut.css +++ /dev/null @@ -1,56 +0,0 @@ -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes rollOut { - 0% { - opacity: 1; - -webkit-transform: translateX(0px) rotate(0deg); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(100%) rotate(120deg); - } -} - -@-moz-keyframes rollOut { - 0% { - opacity: 1; - -moz-transform: translateX(0px) rotate(0deg); - } - - 100% { - opacity: 0; - -moz-transform: translateX(100%) rotate(120deg); - } -} - -@-o-keyframes rollOut { - 0% { - opacity: 1; - -o-transform: translateX(0px) rotate(0deg); - } - - 100% { - opacity: 0; - -o-transform: translateX(100%) rotate(120deg); - } -} - -@keyframes rollOut { - 0% { - opacity: 1; - transform: translateX(0px) rotate(0deg); - } - - 100% { - opacity: 0; - transform: translateX(100%) rotate(120deg); - } -} - -.rollOut { - -webkit-animation-name: rollOut; - -moz-animation-name: rollOut; - -o-animation-name: rollOut; - animation-name: rollOut; -} \ No newline at end of file diff --git a/source/rotateIn.css b/source/rotateIn.css deleted file mode 100644 index 67abf3d..0000000 --- a/source/rotateIn.css +++ /dev/null @@ -1,59 +0,0 @@ -@-webkit-keyframes rotateIn { - 0% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(-200deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(0); - opacity: 1; - } -} -@-moz-keyframes rotateIn { - 0% { - -moz-transform-origin: center center; - -moz-transform: rotate(-200deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: center center; - -moz-transform: rotate(0); - opacity: 1; - } -} -@-o-keyframes rotateIn { - 0% { - -o-transform-origin: center center; - -o-transform: rotate(-200deg); - opacity: 0; - } - - 100% { - -o-transform-origin: center center; - -o-transform: rotate(0); - opacity: 1; - } -} -@keyframes rotateIn { - 0% { - transform-origin: center center; - transform: rotate(-200deg); - opacity: 0; - } - - 100% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } -} - -.rotateIn { - -webkit-animation-name: rotateIn; - -moz-animation-name: rotateIn; - -o-animation-name: rotateIn; - animation-name: rotateIn; -} \ No newline at end of file diff --git a/source/rotateInDownLeft.css b/source/rotateInDownLeft.css deleted file mode 100644 index a56bbab..0000000 --- a/source/rotateInDownLeft.css +++ /dev/null @@ -1,62 +0,0 @@ -@-webkit-keyframes rotateInDownLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInDownLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInDownLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(-90deg); - opacity: 0; - } - - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInDownLeft { - -webkit-animation-name: rotateInDownLeft; - -moz-animation-name: rotateInDownLeft; - -o-animation-name: rotateInDownLeft; - animation-name: rotateInDownLeft; -} \ No newline at end of file diff --git a/source/rotateInDownRight.css b/source/rotateInDownRight.css deleted file mode 100644 index 5952cb9..0000000 --- a/source/rotateInDownRight.css +++ /dev/null @@ -1,62 +0,0 @@ -@-webkit-keyframes rotateInDownRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInDownRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInDownRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } - - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInDownRight { - -webkit-animation-name: rotateInDownRight; - -moz-animation-name: rotateInDownRight; - -o-animation-name: rotateInDownRight; - animation-name: rotateInDownRight; -} \ No newline at end of file diff --git a/source/rotateInUpLeft.css b/source/rotateInUpLeft.css deleted file mode 100644 index 536163b..0000000 --- a/source/rotateInUpLeft.css +++ /dev/null @@ -1,62 +0,0 @@ -@-webkit-keyframes rotateInUpLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInUpLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInUpLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } - - 100% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInUpLeft { - -webkit-animation-name: rotateInUpLeft; - -moz-animation-name: rotateInUpLeft; - -o-animation-name: rotateInUpLeft; - animation-name: rotateInUpLeft; -} \ No newline at end of file diff --git a/source/rotateInUpRight.css b/source/rotateInUpRight.css deleted file mode 100644 index 35c073d..0000000 --- a/source/rotateInUpRight.css +++ /dev/null @@ -1,62 +0,0 @@ -@-webkit-keyframes rotateInUpRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } -} - -@-moz-keyframes rotateInUpRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } -} - -@-o-keyframes rotateInUpRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } -} - -@keyframes rotateInUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } - - 100% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } -} - -.rotateInUpRight { - -webkit-animation-name: rotateInUpRight; - -moz-animation-name: rotateInUpRight; - -o-animation-name: rotateInUpRight; - animation-name: rotateInUpRight; -} \ No newline at end of file diff --git a/source/rotateOut.css b/source/rotateOut.css deleted file mode 100644 index 55a3f72..0000000 --- a/source/rotateOut.css +++ /dev/null @@ -1,62 +0,0 @@ -@-webkit-keyframes rotateOut { - 0% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: center center; - -webkit-transform: rotate(200deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOut { - 0% { - -moz-transform-origin: center center; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: center center; - -moz-transform: rotate(200deg); - opacity: 0; - } -} - -@-o-keyframes rotateOut { - 0% { - -o-transform-origin: center center; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: center center; - -o-transform: rotate(200deg); - opacity: 0; - } -} - -@keyframes rotateOut { - 0% { - transform-origin: center center; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: center center; - transform: rotate(200deg); - opacity: 0; - } -} - -.rotateOut { - -webkit-animation-name: rotateOut; - -moz-animation-name: rotateOut; - -o-animation-name: rotateOut; - animation-name: rotateOut; -} \ No newline at end of file diff --git a/source/rotateOutDownLeft.css b/source/rotateOutDownLeft.css deleted file mode 100644 index 43b59f4..0000000 --- a/source/rotateOutDownLeft.css +++ /dev/null @@ -1,62 +0,0 @@ -@-webkit-keyframes rotateOutDownLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutDownLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutDownLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(90deg); - opacity: 0; - } -} - -@keyframes rotateOutDownLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: left bottom; - transform: rotate(90deg); - opacity: 0; - } -} - -.rotateOutDownLeft { - -webkit-animation-name: rotateOutDownLeft; - -moz-animation-name: rotateOutDownLeft; - -o-animation-name: rotateOutDownLeft; - animation-name: rotateOutDownLeft; -} \ No newline at end of file diff --git a/source/rotateOutDownRight.css b/source/rotateOutDownRight.css deleted file mode 100644 index 5e6d6af..0000000 --- a/source/rotateOutDownRight.css +++ /dev/null @@ -1,62 +0,0 @@ -@-webkit-keyframes rotateOutDownRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutDownRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutDownRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } -} - -@keyframes rotateOutDownRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: right bottom; - transform: rotate(-90deg); - opacity: 0; - } -} - -.rotateOutDownRight { - -webkit-animation-name: rotateOutDownRight; - -moz-animation-name: rotateOutDownRight; - -o-animation-name: rotateOutDownRight; - animation-name: rotateOutDownRight; -} \ No newline at end of file diff --git a/source/rotateOutUpLeft.css b/source/rotateOutUpLeft.css deleted file mode 100644 index 3ec432a..0000000 --- a/source/rotateOutUpLeft.css +++ /dev/null @@ -1,62 +0,0 @@ -@-webkit-keyframes rotateOutUpLeft { - 0% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: left bottom; - -webkit-transform: rotate(-90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutUpLeft { - 0% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: left bottom; - -moz-transform: rotate(-90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutUpLeft { - 0% { - -o-transform-origin: left bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: left bottom; - -o-transform: rotate(-90deg); - opacity: 0; - } -} - -@keyframes rotateOutUpLeft { - 0% { - transform-origin: left bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - -transform-origin: left bottom; - -transform: rotate(-90deg); - opacity: 0; - } -} - -.rotateOutUpLeft { - -webkit-animation-name: rotateOutUpLeft; - -moz-animation-name: rotateOutUpLeft; - -o-animation-name: rotateOutUpLeft; - animation-name: rotateOutUpLeft; -} \ No newline at end of file diff --git a/source/rotateOutUpRight.css b/source/rotateOutUpRight.css deleted file mode 100644 index f202181..0000000 --- a/source/rotateOutUpRight.css +++ /dev/null @@ -1,62 +0,0 @@ -@-webkit-keyframes rotateOutUpRight { - 0% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(0); - opacity: 1; - } - - 100% { - -webkit-transform-origin: right bottom; - -webkit-transform: rotate(90deg); - opacity: 0; - } -} - -@-moz-keyframes rotateOutUpRight { - 0% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(0); - opacity: 1; - } - - 100% { - -moz-transform-origin: right bottom; - -moz-transform: rotate(90deg); - opacity: 0; - } -} - -@-o-keyframes rotateOutUpRight { - 0% { - -o-transform-origin: right bottom; - -o-transform: rotate(0); - opacity: 1; - } - - 100% { - -o-transform-origin: right bottom; - -o-transform: rotate(90deg); - opacity: 0; - } -} - -@keyframes rotateOutUpRight { - 0% { - transform-origin: right bottom; - transform: rotate(0); - opacity: 1; - } - - 100% { - transform-origin: right bottom; - transform: rotate(90deg); - opacity: 0; - } -} - -.rotateOutUpRight { - -webkit-animation-name: rotateOutUpRight; - -moz-animation-name: rotateOutUpRight; - -o-animation-name: rotateOutUpRight; - animation-name: rotateOutUpRight; -} \ No newline at end of file diff --git a/source/rotating_entrances/rotateIn.css b/source/rotating_entrances/rotateIn.css new file mode 100644 index 0000000..a1ecc2e --- /dev/null +++ b/source/rotating_entrances/rotateIn.css @@ -0,0 +1,17 @@ +@keyframes rotateIn { + 0% { + transform-origin: center center; + transform: rotate(-200deg); + opacity: 0; + } + + 100% { + transform-origin: center center; + transform: rotate(0); + opacity: 1; + } +} + +.rotateIn { + animation-name: rotateIn; +} \ No newline at end of file diff --git a/source/rotating_entrances/rotateInDownLeft.css b/source/rotating_entrances/rotateInDownLeft.css new file mode 100644 index 0000000..d347488 --- /dev/null +++ b/source/rotating_entrances/rotateInDownLeft.css @@ -0,0 +1,17 @@ +@keyframes rotateInDownLeft { + 0% { + transform-origin: left bottom; + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownLeft { + animation-name: rotateInDownLeft; +} \ No newline at end of file diff --git a/source/rotating_entrances/rotateInDownRight.css b/source/rotating_entrances/rotateInDownRight.css new file mode 100644 index 0000000..9205910 --- /dev/null +++ b/source/rotating_entrances/rotateInDownRight.css @@ -0,0 +1,17 @@ +@keyframes rotateInDownRight { + 0% { + transform-origin: right bottom; + transform: rotate(90deg); + opacity: 0; + } + + 100% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInDownRight { + animation-name: rotateInDownRight; +} \ No newline at end of file diff --git a/source/rotating_entrances/rotateInUpLeft.css b/source/rotating_entrances/rotateInUpLeft.css new file mode 100644 index 0000000..d2f8dfa --- /dev/null +++ b/source/rotating_entrances/rotateInUpLeft.css @@ -0,0 +1,17 @@ +@keyframes rotateInUpLeft { + 0% { + transform-origin: left bottom; + transform: rotate(90deg); + opacity: 0; + } + + 100% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpLeft { + animation-name: rotateInUpLeft; +} \ No newline at end of file diff --git a/source/rotating_entrances/rotateInUpRight.css b/source/rotating_entrances/rotateInUpRight.css new file mode 100644 index 0000000..5b4c50d --- /dev/null +++ b/source/rotating_entrances/rotateInUpRight.css @@ -0,0 +1,17 @@ +@keyframes rotateInUpRight { + 0% { + transform-origin: right bottom; + transform: rotate(-90deg); + opacity: 0; + } + + 100% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } +} + +.rotateInUpRight { + animation-name: rotateInUpRight; +} \ No newline at end of file diff --git a/source/rotating_exits/rotateOut.css b/source/rotating_exits/rotateOut.css new file mode 100644 index 0000000..d81e919 --- /dev/null +++ b/source/rotating_exits/rotateOut.css @@ -0,0 +1,17 @@ +@keyframes rotateOut { + 0% { + transform-origin: center center; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: center center; + transform: rotate(200deg); + opacity: 0; + } +} + +.rotateOut { + animation-name: rotateOut; +} \ No newline at end of file diff --git a/source/rotating_exits/rotateOutDownLeft.css b/source/rotating_exits/rotateOutDownLeft.css new file mode 100644 index 0000000..d94c3c8 --- /dev/null +++ b/source/rotating_exits/rotateOutDownLeft.css @@ -0,0 +1,17 @@ +@keyframes rotateOutDownLeft { + 0% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: left bottom; + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutDownLeft { + animation-name: rotateOutDownLeft; +} \ No newline at end of file diff --git a/source/rotating_exits/rotateOutDownRight.css b/source/rotating_exits/rotateOutDownRight.css new file mode 100644 index 0000000..5d0b90f --- /dev/null +++ b/source/rotating_exits/rotateOutDownRight.css @@ -0,0 +1,17 @@ +@keyframes rotateOutDownRight { + 0% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: right bottom; + transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutDownRight { + animation-name: rotateOutDownRight; +} \ No newline at end of file diff --git a/source/rotating_exits/rotateOutUpLeft.css b/source/rotating_exits/rotateOutUpLeft.css new file mode 100644 index 0000000..54f99d6 --- /dev/null +++ b/source/rotating_exits/rotateOutUpLeft.css @@ -0,0 +1,17 @@ +@keyframes rotateOutUpLeft { + 0% { + transform-origin: left bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + -transform-origin: left bottom; + -transform: rotate(-90deg); + opacity: 0; + } +} + +.rotateOutUpLeft { + animation-name: rotateOutUpLeft; +} \ No newline at end of file diff --git a/source/rotating_exits/rotateOutUpRight.css b/source/rotating_exits/rotateOutUpRight.css new file mode 100644 index 0000000..528fa8b --- /dev/null +++ b/source/rotating_exits/rotateOutUpRight.css @@ -0,0 +1,17 @@ +@keyframes rotateOutUpRight { + 0% { + transform-origin: right bottom; + transform: rotate(0); + opacity: 1; + } + + 100% { + transform-origin: right bottom; + transform: rotate(90deg); + opacity: 0; + } +} + +.rotateOutUpRight { + animation-name: rotateOutUpRight; +} \ No newline at end of file diff --git a/source/shake.css b/source/shake.css deleted file mode 100644 index cf9122a..0000000 --- a/source/shake.css +++ /dev/null @@ -1,30 +0,0 @@ -@-webkit-keyframes shake { - 0%, 100% {-webkit-transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} - 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} -} - -@-moz-keyframes shake { - 0%, 100% {-moz-transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} - 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} -} - -@-o-keyframes shake { - 0%, 100% {-o-transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} - 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} -} - -@keyframes shake { - 0%, 100% {transform: translateX(0);} - 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} - 20%, 40%, 60%, 80% {transform: translateX(10px);} -} - -.shake { - -webkit-animation-name: shake; - -moz-animation-name: shake; - -o-animation-name: shake; - animation-name: shake; -} \ No newline at end of file diff --git a/source/slideInDown.css b/source/slideInDown.css deleted file mode 100644 index 5ca6198..0000000 --- a/source/slideInDown.css +++ /dev/null @@ -1,50 +0,0 @@ -@-webkit-keyframes slideInDown { - 0% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } - - 100% { - -webkit-transform: translateY(0); - } -} - -@-moz-keyframes slideInDown { - 0% { - opacity: 0; - -moz-transform: translateY(-2000px); - } - - 100% { - -moz-transform: translateY(0); - } -} - -@-o-keyframes slideInDown { - 0% { - opacity: 0; - -o-transform: translateY(-2000px); - } - - 100% { - -o-transform: translateY(0); - } -} - -@keyframes slideInDown { - 0% { - opacity: 0; - transform: translateY(-2000px); - } - - 100% { - transform: translateY(0); - } -} - -.slideInDown { - -webkit-animation-name: slideInDown; - -moz-animation-name: slideInDown; - -o-animation-name: slideInDown; - animation-name: slideInDown; -} \ No newline at end of file diff --git a/source/slideInLeft.css b/source/slideInLeft.css deleted file mode 100644 index 796e684..0000000 --- a/source/slideInLeft.css +++ /dev/null @@ -1,50 +0,0 @@ -@-webkit-keyframes slideInLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes slideInLeft { - 0% { - opacity: 0; - -moz-transform: translateX(-2000px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes slideInLeft { - 0% { - opacity: 0; - -o-transform: translateX(-2000px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes slideInLeft { - 0% { - opacity: 0; - transform: translateX(-2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInLeft { - -webkit-animation-name: slideInLeft; - -moz-animation-name: slideInLeft; - -o-animation-name: slideInLeft; - animation-name: slideInLeft; -} \ No newline at end of file diff --git a/source/slideInRight.css b/source/slideInRight.css deleted file mode 100644 index 3d20b29..0000000 --- a/source/slideInRight.css +++ /dev/null @@ -1,50 +0,0 @@ -@-webkit-keyframes slideInRight { - 0% { - opacity: 0; - -webkit-transform: translateX(2000px); - } - - 100% { - -webkit-transform: translateX(0); - } -} - -@-moz-keyframes slideInRight { - 0% { - opacity: 0; - -moz-transform: translateX(2000px); - } - - 100% { - -moz-transform: translateX(0); - } -} - -@-o-keyframes slideInRight { - 0% { - opacity: 0; - -o-transform: translateX(2000px); - } - - 100% { - -o-transform: translateX(0); - } -} - -@keyframes slideInRight { - 0% { - opacity: 0; - transform: translateX(2000px); - } - - 100% { - transform: translateX(0); - } -} - -.slideInRight { - -webkit-animation-name: slideInRight; - -moz-animation-name: slideInRight; - -o-animation-name: slideInRight; - animation-name: slideInRight; -} \ No newline at end of file diff --git a/source/slideOutLeft.css b/source/slideOutLeft.css deleted file mode 100644 index 8ae87a8..0000000 --- a/source/slideOutLeft.css +++ /dev/null @@ -1,50 +0,0 @@ -@-webkit-keyframes slideOutLeft { - 0% { - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(-2000px); - } -} - -@-moz-keyframes slideOutLeft { - 0% { - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(-2000px); - } -} - -@-o-keyframes slideOutLeft { - 0% { - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(-2000px); - } -} - -@keyframes slideOutLeft { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-2000px); - } -} - -.slideOutLeft { - -webkit-animation-name: slideOutLeft; - -moz-animation-name: slideOutLeft; - -o-animation-name: slideOutLeft; - animation-name: slideOutLeft; -} \ No newline at end of file diff --git a/source/slideOutRight.css b/source/slideOutRight.css deleted file mode 100644 index 1d30fa6..0000000 --- a/source/slideOutRight.css +++ /dev/null @@ -1,50 +0,0 @@ -@-webkit-keyframes slideOutRight { - 0% { - -webkit-transform: translateX(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateX(2000px); - } -} - -@-moz-keyframes slideOutRight { - 0% { - -moz-transform: translateX(0); - } - - 100% { - opacity: 0; - -moz-transform: translateX(2000px); - } -} - -@-o-keyframes slideOutRight { - 0% { - -o-transform: translateX(0); - } - - 100% { - opacity: 0; - -o-transform: translateX(2000px); - } -} - -@keyframes slideOutRight { - 0% { - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(2000px); - } -} - -.slideOutRight { - -webkit-animation-name: slideOutRight; - -moz-animation-name: slideOutRight; - -o-animation-name: slideOutRight; - animation-name: slideOutRight; -} \ No newline at end of file diff --git a/source/slideOutUp.css b/source/slideOutUp.css deleted file mode 100644 index a4aa791..0000000 --- a/source/slideOutUp.css +++ /dev/null @@ -1,50 +0,0 @@ -@-webkit-keyframes slideOutUp { - 0% { - -webkit-transform: translateY(0); - } - - 100% { - opacity: 0; - -webkit-transform: translateY(-2000px); - } -} - -@-moz-keyframes slideOutUp { - 0% { - -moz-transform: translateY(0); - } - - 100% { - opacity: 0; - -moz-transform: translateY(-2000px); - } -} - -@-o-keyframes slideOutUp { - 0% { - -o-transform: translateY(0); - } - - 100% { - opacity: 0; - -o-transform: translateY(-2000px); - } -} - -@keyframes slideOutUp { - 0% { - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-2000px); - } -} - -.slideOutUp { - -webkit-animation-name: slideOutUp; - -moz-animation-name: slideOutUp; - -o-animation-name: slideOutUp; - animation-name: slideOutUp; -} \ No newline at end of file diff --git a/source/sliders/slideInDown.css b/source/sliders/slideInDown.css new file mode 100644 index 0000000..397861d --- /dev/null +++ b/source/sliders/slideInDown.css @@ -0,0 +1,14 @@ +@keyframes slideInDown { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + + 100% { + transform: translateY(0); + } +} + +.slideInDown { + animation-name: slideInDown; +} \ No newline at end of file diff --git a/source/sliders/slideInLeft.css b/source/sliders/slideInLeft.css new file mode 100644 index 0000000..219d949 --- /dev/null +++ b/source/sliders/slideInLeft.css @@ -0,0 +1,14 @@ +@keyframes slideInLeft { + 0% { + opacity: 0; + transform: translateX(-2000px); + } + + 100% { + transform: translateX(0); + } +} + +.slideInLeft { + animation-name: slideInLeft; +} \ No newline at end of file diff --git a/source/sliders/slideInRight.css b/source/sliders/slideInRight.css new file mode 100644 index 0000000..7bde814 --- /dev/null +++ b/source/sliders/slideInRight.css @@ -0,0 +1,14 @@ +@keyframes slideInRight { + 0% { + opacity: 0; + transform: translateX(2000px); + } + + 100% { + transform: translateX(0); + } +} + +.slideInRight { + animation-name: slideInRight; +} \ No newline at end of file diff --git a/source/sliders/slideOutLeft.css b/source/sliders/slideOutLeft.css new file mode 100644 index 0000000..d0bbde7 --- /dev/null +++ b/source/sliders/slideOutLeft.css @@ -0,0 +1,14 @@ +@keyframes slideOutLeft { + 0% { + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(-2000px); + } +} + +.slideOutLeft { + animation-name: slideOutLeft; +} \ No newline at end of file diff --git a/source/sliders/slideOutRight.css b/source/sliders/slideOutRight.css new file mode 100644 index 0000000..1253906 --- /dev/null +++ b/source/sliders/slideOutRight.css @@ -0,0 +1,14 @@ +@keyframes slideOutRight { + 0% { + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(2000px); + } +} + +.slideOutRight { + animation-name: slideOutRight; +} \ No newline at end of file diff --git a/source/sliders/slideOutUp.css b/source/sliders/slideOutUp.css new file mode 100644 index 0000000..4c344d1 --- /dev/null +++ b/source/sliders/slideOutUp.css @@ -0,0 +1,14 @@ +@keyframes slideOutUp { + 0% { + transform: translateY(0); + } + + 100% { + opacity: 0; + transform: translateY(-2000px); + } +} + +.slideOutUp { + animation-name: slideOutUp; +} \ No newline at end of file diff --git a/source/specials/hinge.css b/source/specials/hinge.css new file mode 100644 index 0000000..0d063d9 --- /dev/null +++ b/source/specials/hinge.css @@ -0,0 +1,11 @@ +@keyframes hinge { + 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } + 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } + 100% { transform: translateY(700px); opacity: 0; } +} + +.hinge { + animation-name: hinge; +} \ No newline at end of file diff --git a/source/specials/rollIn.css b/source/specials/rollIn.css new file mode 100644 index 0000000..2398ca1 --- /dev/null +++ b/source/specials/rollIn.css @@ -0,0 +1,10 @@ +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes rollIn { + 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } + 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } +} + +.rollIn { + animation-name: rollIn; +} \ No newline at end of file diff --git a/source/specials/rollOut.css b/source/specials/rollOut.css new file mode 100644 index 0000000..4471b20 --- /dev/null +++ b/source/specials/rollOut.css @@ -0,0 +1,17 @@ +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes rollOut { + 0% { + opacity: 1; + transform: translateX(0px) rotate(0deg); + } + + 100% { + opacity: 0; + transform: translateX(100%) rotate(120deg); + } +} + +.rollOut { + animation-name: rollOut; +} \ No newline at end of file diff --git a/source/swing.css b/source/swing.css deleted file mode 100644 index 0365d35..0000000 --- a/source/swing.css +++ /dev/null @@ -1,43 +0,0 @@ -@-webkit-keyframes swing { - 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } - 20% { -webkit-transform: rotate(15deg); } - 40% { -webkit-transform: rotate(-10deg); } - 60% { -webkit-transform: rotate(5deg); } - 80% { -webkit-transform: rotate(-5deg); } - 100% { -webkit-transform: rotate(0deg); } -} - -@-moz-keyframes swing { - 20% { -moz-transform: rotate(15deg); } - 40% { -moz-transform: rotate(-10deg); } - 60% { -moz-transform: rotate(5deg); } - 80% { -moz-transform: rotate(-5deg); } - 100% { -moz-transform: rotate(0deg); } -} - -@-o-keyframes swing { - 20% { -o-transform: rotate(15deg); } - 40% { -o-transform: rotate(-10deg); } - 60% { -o-transform: rotate(5deg); } - 80% { -o-transform: rotate(-5deg); } - 100% { -o-transform: rotate(0deg); } -} - -@keyframes swing { - 20% { transform: rotate(15deg); } - 40% { transform: rotate(-10deg); } - 60% { transform: rotate(5deg); } - 80% { transform: rotate(-5deg); } - 100% { transform: rotate(0deg); } -} - -.swing { - -webkit-transform-origin: top center; - -moz-transform-origin: top center; - -o-transform-origin: top center; - transform-origin: top center; - -webkit-animation-name: swing; - -moz-animation-name: swing; - -o-animation-name: swing; - animation-name: swing; -} \ No newline at end of file diff --git a/source/tada.css b/source/tada.css deleted file mode 100644 index 52c597c..0000000 --- a/source/tada.css +++ /dev/null @@ -1,38 +0,0 @@ -@-webkit-keyframes tada { - 0% {-webkit-transform: scale(1);} - 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} - 100% {-webkit-transform: scale(1) rotate(0);} -} - -@-moz-keyframes tada { - 0% {-moz-transform: scale(1);} - 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} - 100% {-moz-transform: scale(1) rotate(0);} -} - -@-o-keyframes tada { - 0% {-o-transform: scale(1);} - 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} - 100% {-o-transform: scale(1) rotate(0);} -} - -@keyframes tada { - 0% {transform: scale(1);} - 10%, 20% {transform: scale(0.9) rotate(-3deg);} - 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} - 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} - 100% {transform: scale(1) rotate(0);} -} - -.tada { - -webkit-animation-name: tada; - -moz-animation-name: tada; - -o-animation-name: tada; - animation-name: tada; -} \ No newline at end of file diff --git a/source/wobble.css b/source/wobble.css deleted file mode 100644 index 3d875c8..0000000 --- a/source/wobble.css +++ /dev/null @@ -1,48 +0,0 @@ -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ - -@-webkit-keyframes wobble { - 0% { -webkit-transform: translateX(0%); } - 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } - 30% { -webkit-transform: translateX(20%) rotate(3deg); } - 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } - 60% { -webkit-transform: translateX(10%) rotate(2deg); } - 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } - 100% { -webkit-transform: translateX(0%); } -} - -@-moz-keyframes wobble { - 0% { -moz-transform: translateX(0%); } - 15% { -moz-transform: translateX(-25%) rotate(-5deg); } - 30% { -moz-transform: translateX(20%) rotate(3deg); } - 45% { -moz-transform: translateX(-15%) rotate(-3deg); } - 60% { -moz-transform: translateX(10%) rotate(2deg); } - 75% { -moz-transform: translateX(-5%) rotate(-1deg); } - 100% { -moz-transform: translateX(0%); } -} - -@-o-keyframes wobble { - 0% { -o-transform: translateX(0%); } - 15% { -o-transform: translateX(-25%) rotate(-5deg); } - 30% { -o-transform: translateX(20%) rotate(3deg); } - 45% { -o-transform: translateX(-15%) rotate(-3deg); } - 60% { -o-transform: translateX(10%) rotate(2deg); } - 75% { -o-transform: translateX(-5%) rotate(-1deg); } - 100% { -o-transform: translateX(0%); } -} - -@keyframes wobble { - 0% { transform: translateX(0%); } - 15% { transform: translateX(-25%) rotate(-5deg); } - 30% { transform: translateX(20%) rotate(3deg); } - 45% { transform: translateX(-15%) rotate(-3deg); } - 60% { transform: translateX(10%) rotate(2deg); } - 75% { transform: translateX(-5%) rotate(-1deg); } - 100% { transform: translateX(0%); } -} - -.wobble { - -webkit-animation-name: wobble; - -moz-animation-name: wobble; - -o-animation-name: wobble; - animation-name: wobble; -} \ No newline at end of file