[Pkg-javascript-commits] [animate.css] 01/02: Imported Upstream version 3.5.1~dfsg1
Alexandre Viau
aviau at moszumanska.debian.org
Tue Jan 5 20:07:39 UTC 2016
This is an automated email from the git hooks/post-receive script.
aviau pushed a commit to branch master
in repository animate.css.
commit cbf48c1e221dd07e0d7db66cecc067177e64ba58
Author: aviau <alexandre at alexandreviau.net>
Date: Tue Jan 5 15:02:40 2016 -0500
Imported Upstream version 3.5.1~dfsg1
---
.editorconfig | 11 +
.gitignore | 4 +
README.md | 173 ++
animate-config.json | 120 +
animate.css | 3340 +++++++++++++++++++++++
bower.json | 12 +
gulpfile.js | 99 +
package.json | 35 +
source/_base.css | 19 +
source/attention_seekers/bounce.css | 25 +
source/attention_seekers/flash.css | 13 +
source/attention_seekers/headShake.css | 30 +
source/attention_seekers/jello.css | 38 +
source/attention_seekers/pulse.css | 19 +
source/attention_seekers/rubberBand.css | 33 +
source/attention_seekers/shake.css | 17 +
source/attention_seekers/swing.css | 26 +
source/attention_seekers/tada.css | 25 +
source/attention_seekers/wobble.css | 35 +
source/bouncing_entrances/bounceIn.css | 36 +
source/bouncing_entrances/bounceInDown.css | 31 +
source/bouncing_entrances/bounceInLeft.css | 31 +
source/bouncing_entrances/bounceInRight.css | 31 +
source/bouncing_entrances/bounceInUp.css | 31 +
source/bouncing_exits/bounceOut.css | 19 +
source/bouncing_exits/bounceOutDown.css | 19 +
source/bouncing_exits/bounceOutLeft.css | 15 +
source/bouncing_exits/bounceOutRight.css | 15 +
source/bouncing_exits/bounceOutUp.css | 19 +
source/fading_entrances/fadeIn.css | 13 +
source/fading_entrances/fadeInDown.css | 15 +
source/fading_entrances/fadeInDownBig.css | 15 +
source/fading_entrances/fadeInLeft.css | 15 +
source/fading_entrances/fadeInLeftBig.css | 15 +
source/fading_entrances/fadeInRight.css | 15 +
source/fading_entrances/fadeInRightBig.css | 15 +
source/fading_entrances/fadeInUp.css | 15 +
source/fading_entrances/fadeInUpBig.css | 15 +
source/fading_exits/fadeOut.css | 13 +
source/fading_exits/fadeOutDown.css | 14 +
source/fading_exits/fadeOutDownBig.css | 14 +
source/fading_exits/fadeOutLeft.css | 14 +
source/fading_exits/fadeOutLeftBig.css | 14 +
source/fading_exits/fadeOutRight.css | 14 +
source/fading_exits/fadeOutRightBig.css | 14 +
source/fading_exits/fadeOutUp.css | 14 +
source/fading_exits/fadeOutUpBig.css | 14 +
source/flippers/flip.css | 31 +
source/flippers/flipInX.css | 30 +
source/flippers/flipInY.css | 30 +
source/flippers/flipOutX.css | 20 +
source/flippers/flipOutY.css | 20 +
source/lightspeed/lightSpeedIn.css | 26 +
source/lightspeed/lightSpeedOut.css | 15 +
source/rotating_entrances/rotateIn.css | 17 +
source/rotating_entrances/rotateInDownLeft.css | 17 +
source/rotating_entrances/rotateInDownRight.css | 17 +
source/rotating_entrances/rotateInUpLeft.css | 17 +
source/rotating_entrances/rotateInUpRight.css | 17 +
source/rotating_exits/rotateOut.css | 16 +
source/rotating_exits/rotateOutDownLeft.css | 16 +
source/rotating_exits/rotateOutDownRight.css | 16 +
source/rotating_exits/rotateOutUpLeft.css | 16 +
source/rotating_exits/rotateOutUpRight.css | 16 +
source/sliding_entrances/slideInDown.css | 14 +
source/sliding_entrances/slideInLeft.css | 14 +
source/sliding_entrances/slideInRight.css | 14 +
source/sliding_entrances/slideInUp.css | 14 +
source/sliding_exits/slideOutDown.css | 14 +
source/sliding_exits/slideOutLeft.css | 14 +
source/sliding_exits/slideOutRight.css | 14 +
source/sliding_exits/slideOutUp.css | 14 +
source/specials/hinge.css | 28 +
source/specials/rollIn.css | 17 +
source/specials/rollOut.css | 16 +
source/zooming_entrances/zoomIn.css | 14 +
source/zooming_entrances/zoomInDown.css | 17 +
source/zooming_entrances/zoomInLeft.css | 17 +
source/zooming_entrances/zoomInRight.css | 17 +
source/zooming_entrances/zoomInUp.css | 17 +
source/zooming_exits/zoomOut.css | 18 +
source/zooming_exits/zoomOutDown.css | 18 +
source/zooming_exits/zoomOutLeft.css | 16 +
source/zooming_exits/zoomOutRight.css | 16 +
source/zooming_exits/zoomOutUp.css | 18 +
85 files changed, 5257 insertions(+)
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..8951c39
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,11 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9621ab8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.sass-cache
+node_modules/
+.DS_Store
+test/
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4f188b5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,173 @@
+#Animate.css
+*Just-add-water CSS animation*
+
+`animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
+
+##Basic Usage
+1. Include the stylesheet on your document's `<head>`
+
+ ```html
+ <head>
+ <link rel="stylesheet" href="animate.min.css">
+ </head>
+ ```
+2. Add the class `animated` to the element you want to animate.
+ You may also want to include the class `infinite` for an infinite loop.
+
+3. Finally you need to add one of the following classes:
+
+ * `bounce`
+ * `flash`
+ * `pulse`
+ * `rubberBand`
+ * `shake`
+ * `headShake`
+ * `swing`
+ * `tada`
+ * `wobble`
+ * `jello`
+ * `bounceIn`
+ * `bounceInDown`
+ * `bounceInLeft`
+ * `bounceInRight`
+ * `bounceInUp`
+ * `bounceOut`
+ * `bounceOutDown`
+ * `bounceOutLeft`
+ * `bounceOutRight`
+ * `bounceOutUp`
+ * `fadeIn`
+ * `fadeInDown`
+ * `fadeInDownBig`
+ * `fadeInLeft`
+ * `fadeInLeftBig`
+ * `fadeInRight`
+ * `fadeInRightBig`
+ * `fadeInUp`
+ * `fadeInUpBig`
+ * `fadeOut`
+ * `fadeOutDown`
+ * `fadeOutDownBig`
+ * `fadeOutLeft`
+ * `fadeOutLeftBig`
+ * `fadeOutRight`
+ * `fadeOutRightBig`
+ * `fadeOutUp`
+ * `fadeOutUpBig`
+ * `flipInX`
+ * `flipInY`
+ * `flipOutX`
+ * `flipOutY`
+ * `lightSpeedIn`
+ * `lightSpeedOut`
+ * `rotateIn`
+ * `rotateInDownLeft`
+ * `rotateInDownRight`
+ * `rotateInUpLeft`
+ * `rotateInUpRight`
+ * `rotateOut`
+ * `rotateOutDownLeft`
+ * `rotateOutDownRight`
+ * `rotateOutUpLeft`
+ * `rotateOutUpRight`
+ * `hinge`
+ * `rollIn`
+ * `rollOut`
+ * `zoomIn`
+ * `zoomInDown`
+ * `zoomInLeft`
+ * `zoomInRight`
+ * `zoomInUp`
+ * `zoomOut`
+ * `zoomOutDown`
+ * `zoomOutLeft`
+ * `zoomOutRight`
+ * `zoomOutUp`
+ * `slideInDown`
+ * `slideInLeft`
+ * `slideInRight`
+ * `slideInUp`
+ * `slideOutDown`
+ * `slideOutLeft`
+ * `slideOutRight`
+ * `slideOutUp`
+
+Full example:
+```html
+<h1 class="animated infinite bounce">Example</h1>
+```
+
+[Check out all the animations here!](https://daneden.github.io/animate.css/)
+
+##Usage
+To use animate.css in your website, simply drop the stylesheet into your document's `<head>`, 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
+<head>
+ <link rel="stylesheet" href="animate.min.css">
+</head>
+```
+
+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
+$('#yourElement').addClass('animated bounceOutLeft');
+```
+
+You can also detect when an animation ends:
+
+<!--
+Before you make changes to this file, you should know that $('#yourElement').one() is *NOT A TYPO*
+
+http://api.jquery.com/one/
+-->
+
+```javascript
+$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
+```
+
+[View a video tutorial](https://www.youtube.com/watch?v=CBQGl6zokMs) on how to use Animate.css with jQuery here.
+
+**Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/).
+
+You can change the duration of your animations, add a delay or change the number of times that it plays:
+
+```css
+#yourElement {
+ -vendor-animation-duration: 3s;
+ -vendor-animation-delay: 2s;
+ -vendor-animation-iteration-count: infinite;
+}
+```
+
+*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)*
+
+## Custom Builds
+Animate.css is powered by [gulp.js](http://gulpjs.com/), and you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies:
+
+```sh
+$ cd path/to/animate.css/
+$ sudo npm install
+```
+
+Next, run `gulp` to compile your custom builds. For example, if you want only some of the the “attention seekers”, simply edit the `animate-config.json` file to select only the animations you want to use.
+
+```javascript
+"attention_seekers": {
+ "bounce": true,
+ "flash": false,
+ "pulse": false,
+ "shake": true,
+ "headShake": true,
+ "swing": true,
+ "tada": true,
+ "wobble": true,
+ "jello":true
+}
+```
+
+## 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.
diff --git a/animate-config.json b/animate-config.json
new file mode 100644
index 0000000..6260aff
--- /dev/null
+++ b/animate-config.json
@@ -0,0 +1,120 @@
+{
+
+ "attention_seekers": [
+ "bounce",
+ "flash",
+ "pulse",
+ "rubberBand",
+ "shake",
+ "headShake",
+ "swing",
+ "tada",
+ "wobble",
+ "jello"
+ ],
+
+ "bouncing_entrances": [
+ "bounceIn",
+ "bounceInDown",
+ "bounceInLeft",
+ "bounceInRight",
+ "bounceInUp"
+ ],
+
+ "bouncing_exits": [
+ "bounceOut",
+ "bounceOutDown",
+ "bounceOutLeft",
+ "bounceOutRight",
+ "bounceOutUp"
+ ],
+
+ "fading_entrances": [
+ "fadeIn",
+ "fadeInDown",
+ "fadeInDownBig",
+ "fadeInLeft",
+ "fadeInLeftBig",
+ "fadeInRight",
+ "fadeInRightBig",
+ "fadeInUp",
+ "fadeInUpBig"
+ ],
+
+ "fading_exits": [
+ "fadeOut",
+ "fadeOutDown",
+ "fadeOutDownBig",
+ "fadeOutLeft",
+ "fadeOutLeftBig",
+ "fadeOutRight",
+ "fadeOutRightBig",
+ "fadeOutUp",
+ "fadeOutUpBig"
+ ],
+
+ "flippers": [
+ "flip",
+ "flipInX",
+ "flipInY",
+ "flipOutX",
+ "flipOutY"
+ ],
+
+ "lightspeed": [
+ "lightSpeedIn",
+ "lightSpeedOut"
+ ],
+
+ "rotating_entrances": [
+ "rotateIn",
+ "rotateInDownLeft",
+ "rotateInDownRight",
+ "rotateInUpLeft",
+ "rotateInUpRight"
+ ],
+
+ "rotating_exits": [
+ "rotateOut",
+ "rotateOutDownLeft",
+ "rotateOutDownRight",
+ "rotateOutUpLeft",
+ "rotateOutUpRight"
+ ],
+
+ "specials": [
+ "hinge",
+ "rollIn",
+ "rollOut"
+ ],
+
+ "zooming_entrances": [
+ "zoomIn",
+ "zoomInDown",
+ "zoomInLeft",
+ "zoomInRight",
+ "zoomInUp"
+ ],
+
+ "zooming_exits": [
+ "zoomOut",
+ "zoomOutDown",
+ "zoomOutLeft",
+ "zoomOutRight",
+ "zoomOutUp"
+ ],
+
+ "sliding_entrances": [
+ "slideInDown",
+ "slideInLeft",
+ "slideInRight",
+ "slideInUp"
+ ],
+
+ "sliding_exits": [
+ "slideOutDown",
+ "slideOutLeft",
+ "slideOutRight",
+ "slideOutUp"
+ ]
+}
diff --git a/animate.css b/animate.css
new file mode 100644
index 0000000..188e78f
--- /dev/null
+++ b/animate.css
@@ -0,0 +1,3340 @@
+ at charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.5.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2016 Daniel Eden
+ */
+
+.animated {
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.animated.infinite {
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY,
+.animated.bounceIn,
+.animated.bounceOut {
+ -webkit-animation-duration: .75s;
+ animation-duration: .75s;
+}
+
+ at -webkit-keyframes bounce {
+ from, 20%, 53%, 80%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ -webkit-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ }
+
+ 40%, 43% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ -webkit-transform: translate3d(0, -30px, 0);
+ transform: translate3d(0, -30px, 0);
+ }
+
+ 70% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ -webkit-transform: translate3d(0, -15px, 0);
+ transform: translate3d(0, -15px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0,-4px,0);
+ transform: translate3d(0,-4px,0);
+ }
+}
+
+ at keyframes bounce {
+ from, 20%, 53%, 80%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ -webkit-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ }
+
+ 40%, 43% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ -webkit-transform: translate3d(0, -30px, 0);
+ transform: translate3d(0, -30px, 0);
+ }
+
+ 70% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ -webkit-transform: translate3d(0, -15px, 0);
+ transform: translate3d(0, -15px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0,-4px,0);
+ transform: translate3d(0,-4px,0);
+ }
+}
+
+.bounce {
+ -webkit-animation-name: bounce;
+ animation-name: bounce;
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+}
+
+ at -webkit-keyframes flash {
+ from, 50%, to {
+ opacity: 1;
+ }
+
+ 25%, 75% {
+ opacity: 0;
+ }
+}
+
+ at keyframes flash {
+ from, 50%, to {
+ opacity: 1;
+ }
+
+ 25%, 75% {
+ opacity: 0;
+ }
+}
+
+.flash {
+ -webkit-animation-name: flash;
+ animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+ at -webkit-keyframes pulse {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.05, 1.05, 1.05);
+ transform: scale3d(1.05, 1.05, 1.05);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+ at keyframes pulse {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.05, 1.05, 1.05);
+ transform: scale3d(1.05, 1.05, 1.05);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.pulse {
+ -webkit-animation-name: pulse;
+ animation-name: pulse;
+}
+
+ at -webkit-keyframes rubberBand {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 30% {
+ -webkit-transform: scale3d(1.25, 0.75, 1);
+ transform: scale3d(1.25, 0.75, 1);
+ }
+
+ 40% {
+ -webkit-transform: scale3d(0.75, 1.25, 1);
+ transform: scale3d(0.75, 1.25, 1);
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.15, 0.85, 1);
+ transform: scale3d(1.15, 0.85, 1);
+ }
+
+ 65% {
+ -webkit-transform: scale3d(.95, 1.05, 1);
+ transform: scale3d(.95, 1.05, 1);
+ }
+
+ 75% {
+ -webkit-transform: scale3d(1.05, .95, 1);
+ transform: scale3d(1.05, .95, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+ at keyframes rubberBand {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 30% {
+ -webkit-transform: scale3d(1.25, 0.75, 1);
+ transform: scale3d(1.25, 0.75, 1);
+ }
+
+ 40% {
+ -webkit-transform: scale3d(0.75, 1.25, 1);
+ transform: scale3d(0.75, 1.25, 1);
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.15, 0.85, 1);
+ transform: scale3d(1.15, 0.85, 1);
+ }
+
+ 65% {
+ -webkit-transform: scale3d(.95, 1.05, 1);
+ transform: scale3d(.95, 1.05, 1);
+ }
+
+ 75% {
+ -webkit-transform: scale3d(1.05, .95, 1);
+ transform: scale3d(1.05, .95, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.rubberBand {
+ -webkit-animation-name: rubberBand;
+ animation-name: rubberBand;
+}
+
+ at -webkit-keyframes shake {
+ from, to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 10%, 30%, 50%, 70%, 90% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 20%, 40%, 60%, 80% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+ }
+}
+
+ at keyframes shake {
+ from, to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 10%, 30%, 50%, 70%, 90% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 20%, 40%, 60%, 80% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+ }
+}
+
+.shake {
+ -webkit-animation-name: shake;
+ animation-name: shake;
+}
+
+ at -webkit-keyframes headShake {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 6.5% {
+ -webkit-transform: translateX(-6px) rotateY(-9deg);
+ transform: translateX(-6px) rotateY(-9deg);
+ }
+
+ 18.5% {
+ -webkit-transform: translateX(5px) rotateY(7deg);
+ transform: translateX(5px) rotateY(7deg);
+ }
+
+ 31.5% {
+ -webkit-transform: translateX(-3px) rotateY(-5deg);
+ transform: translateX(-3px) rotateY(-5deg);
+ }
+
+ 43.5% {
+ -webkit-transform: translateX(2px) rotateY(3deg);
+ transform: translateX(2px) rotateY(3deg);
+ }
+
+ 50% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+ at keyframes headShake {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 6.5% {
+ -webkit-transform: translateX(-6px) rotateY(-9deg);
+ transform: translateX(-6px) rotateY(-9deg);
+ }
+
+ 18.5% {
+ -webkit-transform: translateX(5px) rotateY(7deg);
+ transform: translateX(5px) rotateY(7deg);
+ }
+
+ 31.5% {
+ -webkit-transform: translateX(-3px) rotateY(-5deg);
+ transform: translateX(-3px) rotateY(-5deg);
+ }
+
+ 43.5% {
+ -webkit-transform: translateX(2px) rotateY(3deg);
+ transform: translateX(2px) rotateY(3deg);
+ }
+
+ 50% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.headShake {
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ -webkit-animation-name: headShake;
+ animation-name: headShake;
+}
+
+ at -webkit-keyframes swing {
+ 20% {
+ -webkit-transform: rotate3d(0, 0, 1, 15deg);
+ transform: rotate3d(0, 0, 1, 15deg);
+ }
+
+ 40% {
+ -webkit-transform: rotate3d(0, 0, 1, -10deg);
+ transform: rotate3d(0, 0, 1, -10deg);
+ }
+
+ 60% {
+ -webkit-transform: rotate3d(0, 0, 1, 5deg);
+ transform: rotate3d(0, 0, 1, 5deg);
+ }
+
+ 80% {
+ -webkit-transform: rotate3d(0, 0, 1, -5deg);
+ transform: rotate3d(0, 0, 1, -5deg);
+ }
+
+ to {
+ -webkit-transform: rotate3d(0, 0, 1, 0deg);
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
+}
+
+ at keyframes swing {
+ 20% {
+ -webkit-transform: rotate3d(0, 0, 1, 15deg);
+ transform: rotate3d(0, 0, 1, 15deg);
+ }
+
+ 40% {
+ -webkit-transform: rotate3d(0, 0, 1, -10deg);
+ transform: rotate3d(0, 0, 1, -10deg);
+ }
+
+ 60% {
+ -webkit-transform: rotate3d(0, 0, 1, 5deg);
+ transform: rotate3d(0, 0, 1, 5deg);
+ }
+
+ 80% {
+ -webkit-transform: rotate3d(0, 0, 1, -5deg);
+ transform: rotate3d(0, 0, 1, -5deg);
+ }
+
+ to {
+ -webkit-transform: rotate3d(0, 0, 1, 0deg);
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
+}
+
+.swing {
+ -webkit-transform-origin: top center;
+ transform-origin: top center;
+ -webkit-animation-name: swing;
+ animation-name: swing;
+}
+
+ at -webkit-keyframes tada {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 10%, 20% {
+ -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 30%, 50%, 70%, 90% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 40%, 60%, 80% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+ at keyframes tada {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 10%, 20% {
+ -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 30%, 50%, 70%, 90% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 40%, 60%, 80% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.tada {
+ -webkit-animation-name: tada;
+ animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+ at -webkit-keyframes wobble {
+ from {
+ -webkit-transform: none;
+ transform: none;
+ }
+
+ 15% {
+ -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ }
+
+ 30% {
+ -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 45% {
+ -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 60% {
+ -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes wobble {
+ from {
+ -webkit-transform: none;
+ transform: none;
+ }
+
+ 15% {
+ -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ }
+
+ 30% {
+ -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 45% {
+ -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 60% {
+ -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.wobble {
+ -webkit-animation-name: wobble;
+ animation-name: wobble;
+}
+
+ at -webkit-keyframes jello {
+ from, 11.1%, to {
+ -webkit-transform: none;
+ transform: none;
+ }
+
+ 22.2% {
+ -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+ transform: skewX(-12.5deg) skewY(-12.5deg);
+ }
+
+ 33.3% {
+ -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+ transform: skewX(6.25deg) skewY(6.25deg);
+ }
+
+ 44.4% {
+ -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+ transform: skewX(-3.125deg) skewY(-3.125deg);
+ }
+
+ 55.5% {
+ -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+ transform: skewX(1.5625deg) skewY(1.5625deg);
+ }
+
+ 66.6% {
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ }
+
+ 77.7% {
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+ transform: skewX(0.390625deg) skewY(0.390625deg);
+ }
+
+ 88.8% {
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ }
+}
+
+ at keyframes jello {
+ from, 11.1%, to {
+ -webkit-transform: none;
+ transform: none;
+ }
+
+ 22.2% {
+ -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+ transform: skewX(-12.5deg) skewY(-12.5deg);
+ }
+
+ 33.3% {
+ -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+ transform: skewX(6.25deg) skewY(6.25deg);
+ }
+
+ 44.4% {
+ -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+ transform: skewX(-3.125deg) skewY(-3.125deg);
+ }
+
+ 55.5% {
+ -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+ transform: skewX(1.5625deg) skewY(1.5625deg);
+ }
+
+ 66.6% {
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ }
+
+ 77.7% {
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+ transform: skewX(0.390625deg) skewY(0.390625deg);
+ }
+
+ 88.8% {
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ }
+}
+
+.jello {
+ -webkit-animation-name: jello;
+ animation-name: jello;
+ -webkit-transform-origin: center;
+ transform-origin: center;
+}
+
+ at -webkit-keyframes bounceIn {
+ from, 20%, 40%, 60%, 80%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+
+ 20% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ 40% {
+ -webkit-transform: scale3d(.9, .9, .9);
+ transform: scale3d(.9, .9, .9);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+
+ 80% {
+ -webkit-transform: scale3d(.97, .97, .97);
+ transform: scale3d(.97, .97, .97);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+ at keyframes bounceIn {
+ from, 20%, 40%, 60%, 80%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+
+ 20% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ 40% {
+ -webkit-transform: scale3d(.9, .9, .9);
+ transform: scale3d(.9, .9, .9);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+
+ 80% {
+ -webkit-transform: scale3d(.97, .97, .97);
+ transform: scale3d(.97, .97, .97);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.bounceIn {
+ -webkit-animation-name: bounceIn;
+ animation-name: bounceIn;
+}
+
+ at -webkit-keyframes bounceInDown {
+ from, 60%, 75%, 90%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -3000px, 0);
+ transform: translate3d(0, -3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 25px, 0);
+ transform: translate3d(0, 25px, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(0, -10px, 0);
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, 5px, 0);
+ transform: translate3d(0, 5px, 0);
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes bounceInDown {
+ from, 60%, 75%, 90%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -3000px, 0);
+ transform: translate3d(0, -3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 25px, 0);
+ transform: translate3d(0, 25px, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(0, -10px, 0);
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, 5px, 0);
+ transform: translate3d(0, 5px, 0);
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.bounceInDown {
+ -webkit-animation-name: bounceInDown;
+ animation-name: bounceInDown;
+}
+
+ at -webkit-keyframes bounceInLeft {
+ from, 60%, 75%, 90%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(-3000px, 0, 0);
+ transform: translate3d(-3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(25px, 0, 0);
+ transform: translate3d(25px, 0, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(5px, 0, 0);
+ transform: translate3d(5px, 0, 0);
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes bounceInLeft {
+ from, 60%, 75%, 90%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(-3000px, 0, 0);
+ transform: translate3d(-3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(25px, 0, 0);
+ transform: translate3d(25px, 0, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(5px, 0, 0);
+ transform: translate3d(5px, 0, 0);
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.bounceInLeft {
+ -webkit-animation-name: bounceInLeft;
+ animation-name: bounceInLeft;
+}
+
+ at -webkit-keyframes bounceInRight {
+ from, 60%, 75%, 90%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(3000px, 0, 0);
+ transform: translate3d(3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(-25px, 0, 0);
+ transform: translate3d(-25px, 0, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(-5px, 0, 0);
+ transform: translate3d(-5px, 0, 0);
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes bounceInRight {
+ from, 60%, 75%, 90%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(3000px, 0, 0);
+ transform: translate3d(3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(-25px, 0, 0);
+ transform: translate3d(-25px, 0, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(-5px, 0, 0);
+ transform: translate3d(-5px, 0, 0);
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.bounceInRight {
+ -webkit-animation-name: bounceInRight;
+ animation-name: bounceInRight;
+}
+
+ at -webkit-keyframes bounceInUp {
+ from, 60%, 75%, 90%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 3000px, 0);
+ transform: translate3d(0, 3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, -20px, 0);
+ transform: translate3d(0, -20px, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, -5px, 0);
+ transform: translate3d(0, -5px, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+ at keyframes bounceInUp {
+ from, 60%, 75%, 90%, to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 3000px, 0);
+ transform: translate3d(0, 3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, -20px, 0);
+ transform: translate3d(0, -20px, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, -5px, 0);
+ transform: translate3d(0, -5px, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.bounceInUp {
+ -webkit-animation-name: bounceInUp;
+ animation-name: bounceInUp;
+}
+
+ at -webkit-keyframes bounceOut {
+ 20% {
+ -webkit-transform: scale3d(.9, .9, .9);
+ transform: scale3d(.9, .9, .9);
+ }
+
+ 50%, 55% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+}
+
+ at keyframes bounceOut {
+ 20% {
+ -webkit-transform: scale3d(.9, .9, .9);
+ transform: scale3d(.9, .9, .9);
+ }
+
+ 50%, 55% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+}
+
+.bounceOut {
+ -webkit-animation-name: bounceOut;
+ animation-name: bounceOut;
+}
+
+ at -webkit-keyframes bounceOutDown {
+ 20% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 40%, 45% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, -20px, 0);
+ transform: translate3d(0, -20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+ at keyframes bounceOutDown {
+ 20% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 40%, 45% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, -20px, 0);
+ transform: translate3d(0, -20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+.bounceOutDown {
+ -webkit-animation-name: bounceOutDown;
+ animation-name: bounceOutDown;
+}
+
+ at -webkit-keyframes bounceOutLeft {
+ 20% {
+ opacity: 1;
+ -webkit-transform: translate3d(20px, 0, 0);
+ transform: translate3d(20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+ at keyframes bounceOutLeft {
+ 20% {
+ opacity: 1;
+ -webkit-transform: translate3d(20px, 0, 0);
+ transform: translate3d(20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+.bounceOutLeft {
+ -webkit-animation-name: bounceOutLeft;
+ animation-name: bounceOutLeft;
+}
+
+ at -webkit-keyframes bounceOutRight {
+ 20% {
+ opacity: 1;
+ -webkit-transform: translate3d(-20px, 0, 0);
+ transform: translate3d(-20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+ at keyframes bounceOutRight {
+ 20% {
+ opacity: 1;
+ -webkit-transform: translate3d(-20px, 0, 0);
+ transform: translate3d(-20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+.bounceOutRight {
+ -webkit-animation-name: bounceOutRight;
+ animation-name: bounceOutRight;
+}
+
+ at -webkit-keyframes bounceOutUp {
+ 20% {
+ -webkit-transform: translate3d(0, -10px, 0);
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 40%, 45% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 20px, 0);
+ transform: translate3d(0, 20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+ at keyframes bounceOutUp {
+ 20% {
+ -webkit-transform: translate3d(0, -10px, 0);
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 40%, 45% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 20px, 0);
+ transform: translate3d(0, 20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+.bounceOutUp {
+ -webkit-animation-name: bounceOutUp;
+ animation-name: bounceOutUp;
+}
+
+ at -webkit-keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+ at keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
+
+ at -webkit-keyframes fadeInDown {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes fadeInDown {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.fadeInDown {
+ -webkit-animation-name: fadeInDown;
+ animation-name: fadeInDown;
+}
+
+ at -webkit-keyframes fadeInDownBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes fadeInDownBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.fadeInDownBig {
+ -webkit-animation-name: fadeInDownBig;
+ animation-name: fadeInDownBig;
+}
+
+ at -webkit-keyframes fadeInLeft {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes fadeInLeft {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.fadeInLeft {
+ -webkit-animation-name: fadeInLeft;
+ animation-name: fadeInLeft;
+}
+
+ at -webkit-keyframes fadeInLeftBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes fadeInLeftBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.fadeInLeftBig {
+ -webkit-animation-name: fadeInLeftBig;
+ animation-name: fadeInLeftBig;
+}
+
+ at -webkit-keyframes fadeInRight {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes fadeInRight {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.fadeInRight {
+ -webkit-animation-name: fadeInRight;
+ animation-name: fadeInRight;
+}
+
+ at -webkit-keyframes fadeInRightBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes fadeInRightBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.fadeInRightBig {
+ -webkit-animation-name: fadeInRightBig;
+ animation-name: fadeInRightBig;
+}
+
+ at -webkit-keyframes fadeInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes fadeInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.fadeInUp {
+ -webkit-animation-name: fadeInUp;
+ animation-name: fadeInUp;
+}
+
+ at -webkit-keyframes fadeInUpBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes fadeInUpBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.fadeInUpBig {
+ -webkit-animation-name: fadeInUpBig;
+ animation-name: fadeInUpBig;
+}
+
+ at -webkit-keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+ at keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.fadeOut {
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+}
+
+ at -webkit-keyframes fadeOutDown {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+ at keyframes fadeOutDown {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+.fadeOutDown {
+ -webkit-animation-name: fadeOutDown;
+ animation-name: fadeOutDown;
+}
+
+ at -webkit-keyframes fadeOutDownBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+ at keyframes fadeOutDownBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+.fadeOutDownBig {
+ -webkit-animation-name: fadeOutDownBig;
+ animation-name: fadeOutDownBig;
+}
+
+ at -webkit-keyframes fadeOutLeft {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+ at keyframes fadeOutLeft {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+.fadeOutLeft {
+ -webkit-animation-name: fadeOutLeft;
+ animation-name: fadeOutLeft;
+}
+
+ at -webkit-keyframes fadeOutLeftBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+ at keyframes fadeOutLeftBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+.fadeOutLeftBig {
+ -webkit-animation-name: fadeOutLeftBig;
+ animation-name: fadeOutLeftBig;
+}
+
+ at -webkit-keyframes fadeOutRight {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+ at keyframes fadeOutRight {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.fadeOutRight {
+ -webkit-animation-name: fadeOutRight;
+ animation-name: fadeOutRight;
+}
+
+ at -webkit-keyframes fadeOutRightBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+ at keyframes fadeOutRightBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+.fadeOutRightBig {
+ -webkit-animation-name: fadeOutRightBig;
+ animation-name: fadeOutRightBig;
+}
+
+ at -webkit-keyframes fadeOutUp {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+ at keyframes fadeOutUp {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+.fadeOutUp {
+ -webkit-animation-name: fadeOutUp;
+ animation-name: fadeOutUp;
+}
+
+ at -webkit-keyframes fadeOutUpBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+ at keyframes fadeOutUpBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+.fadeOutUpBig {
+ -webkit-animation-name: fadeOutUpBig;
+ animation-name: fadeOutUpBig;
+}
+
+ at -webkit-keyframes flip {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 50% {
+ -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
+ transform: perspective(400px) scale3d(.95, .95, .95);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+}
+
+ at keyframes flip {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 50% {
+ -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
+ transform: perspective(400px) scale3d(.95, .95, .95);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+}
+
+.animated.flip {
+ -webkit-backface-visibility: visible;
+ backface-visibility: visible;
+ -webkit-animation-name: flip;
+ animation-name: flip;
+}
+
+ at -webkit-keyframes flipInX {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+}
+
+ at keyframes flipInX {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+}
+
+.flipInX {
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipInX;
+ animation-name: flipInX;
+}
+
+ at -webkit-keyframes flipInY {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+}
+
+ at keyframes flipInY {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+}
+
+.flipInY {
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipInY;
+ animation-name: flipInY;
+}
+
+ at -webkit-keyframes flipOutX {
+ from {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+
+ 30% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+ at keyframes flipOutX {
+ from {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+
+ 30% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+.flipOutX {
+ -webkit-animation-name: flipOutX;
+ animation-name: flipOutX;
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+}
+
+ at -webkit-keyframes flipOutY {
+ from {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+
+ 30% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+ at keyframes flipOutY {
+ from {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+
+ 30% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+.flipOutY {
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipOutY;
+ animation-name: flipOutY;
+}
+
+ at -webkit-keyframes lightSpeedIn {
+ from {
+ -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+ transform: translate3d(100%, 0, 0) skewX(-30deg);
+ opacity: 0;
+ }
+
+ 60% {
+ -webkit-transform: skewX(20deg);
+ transform: skewX(20deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: skewX(-5deg);
+ transform: skewX(-5deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+ at keyframes lightSpeedIn {
+ from {
+ -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+ transform: translate3d(100%, 0, 0) skewX(-30deg);
+ opacity: 0;
+ }
+
+ 60% {
+ -webkit-transform: skewX(20deg);
+ transform: skewX(20deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: skewX(-5deg);
+ transform: skewX(-5deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.lightSpeedIn {
+ -webkit-animation-name: lightSpeedIn;
+ animation-name: lightSpeedIn;
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+}
+
+ at -webkit-keyframes lightSpeedOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+ transform: translate3d(100%, 0, 0) skewX(30deg);
+ opacity: 0;
+ }
+}
+
+ at keyframes lightSpeedOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+ transform: translate3d(100%, 0, 0) skewX(30deg);
+ opacity: 0;
+ }
+}
+
+.lightSpeedOut {
+ -webkit-animation-name: lightSpeedOut;
+ animation-name: lightSpeedOut;
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+}
+
+ at -webkit-keyframes rotateIn {
+ from {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: rotate3d(0, 0, 1, -200deg);
+ transform: rotate3d(0, 0, 1, -200deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+ at keyframes rotateIn {
+ from {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: rotate3d(0, 0, 1, -200deg);
+ transform: rotate3d(0, 0, 1, -200deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateIn {
+ -webkit-animation-name: rotateIn;
+ animation-name: rotateIn;
+}
+
+ at -webkit-keyframes rotateInDownLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+ at keyframes rotateInDownLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateInDownLeft {
+ -webkit-animation-name: rotateInDownLeft;
+ animation-name: rotateInDownLeft;
+}
+
+ at -webkit-keyframes rotateInDownRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+ at keyframes rotateInDownRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateInDownRight {
+ -webkit-animation-name: rotateInDownRight;
+ animation-name: rotateInDownRight;
+}
+
+ at -webkit-keyframes rotateInUpLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+ at keyframes rotateInUpLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateInUpLeft {
+ -webkit-animation-name: rotateInUpLeft;
+ animation-name: rotateInUpLeft;
+}
+
+ at -webkit-keyframes rotateInUpRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -90deg);
+ transform: rotate3d(0, 0, 1, -90deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+ at keyframes rotateInUpRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -90deg);
+ transform: rotate3d(0, 0, 1, -90deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: none;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateInUpRight {
+ -webkit-animation-name: rotateInUpRight;
+ animation-name: rotateInUpRight;
+}
+
+ at -webkit-keyframes rotateOut {
+ from {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: rotate3d(0, 0, 1, 200deg);
+ transform: rotate3d(0, 0, 1, 200deg);
+ opacity: 0;
+ }
+}
+
+ at keyframes rotateOut {
+ from {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: rotate3d(0, 0, 1, 200deg);
+ transform: rotate3d(0, 0, 1, 200deg);
+ opacity: 0;
+ }
+}
+
+.rotateOut {
+ -webkit-animation-name: rotateOut;
+ animation-name: rotateOut;
+}
+
+ at -webkit-keyframes rotateOutDownLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+}
+
+ at keyframes rotateOutDownLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutDownLeft {
+ -webkit-animation-name: rotateOutDownLeft;
+ animation-name: rotateOutDownLeft;
+}
+
+ at -webkit-keyframes rotateOutDownRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+ at keyframes rotateOutDownRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutDownRight {
+ -webkit-animation-name: rotateOutDownRight;
+ animation-name: rotateOutDownRight;
+}
+
+ at -webkit-keyframes rotateOutUpLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+ at keyframes rotateOutUpLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutUpLeft {
+ -webkit-animation-name: rotateOutUpLeft;
+ animation-name: rotateOutUpLeft;
+}
+
+ at -webkit-keyframes rotateOutUpRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 90deg);
+ transform: rotate3d(0, 0, 1, 90deg);
+ opacity: 0;
+ }
+}
+
+ at keyframes rotateOutUpRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 90deg);
+ transform: rotate3d(0, 0, 1, 90deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutUpRight {
+ -webkit-animation-name: rotateOutUpRight;
+ animation-name: rotateOutUpRight;
+}
+
+ at -webkit-keyframes hinge {
+ 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: rotate3d(0, 0, 1, 80deg);
+ transform: rotate3d(0, 0, 1, 80deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 40%, 80% {
+ -webkit-transform: rotate3d(0, 0, 1, 60deg);
+ transform: rotate3d(0, 0, 1, 60deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 700px, 0);
+ transform: translate3d(0, 700px, 0);
+ opacity: 0;
+ }
+}
+
+ at keyframes hinge {
+ 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: rotate3d(0, 0, 1, 80deg);
+ transform: rotate3d(0, 0, 1, 80deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 40%, 80% {
+ -webkit-transform: rotate3d(0, 0, 1, 60deg);
+ transform: rotate3d(0, 0, 1, 60deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 700px, 0);
+ transform: translate3d(0, 700px, 0);
+ opacity: 0;
+ }
+}
+
+.hinge {
+ -webkit-animation-name: hinge;
+ animation-name: hinge;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+ at -webkit-keyframes rollIn {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+ transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+ at keyframes rollIn {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+ transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: none;
+ transform: none;
+ }
+}
+
+.rollIn {
+ -webkit-animation-name: rollIn;
+ animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+ at -webkit-keyframes rollOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ }
+}
+
+ at keyframes rollOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ }
+}
+
+.rollOut {
+ -webkit-animation-name: rollOut;
+ animation-name: rollOut;
+}
+
+ at -webkit-keyframes zoomIn {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+ at keyframes zoomIn {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+.zoomIn {
+ -webkit-animation-name: zoomIn;
+ animation-name: zoomIn;
+}
+
+ at -webkit-keyframes zoomInDown {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+ transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+ at keyframes zoomInDown {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+ transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomInDown {
+ -webkit-animation-name: zoomInDown;
+ animation-name: zoomInDown;
+}
+
+ at -webkit-keyframes zoomInLeft {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+ transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+ transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+ at keyframes zoomInLeft {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+ transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+ transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomInLeft {
+ -webkit-animation-name: zoomInLeft;
+ animation-name: zoomInLeft;
+}
+
+ at -webkit-keyframes zoomInRight {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+ transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+ transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+ at keyframes zoomInRight {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+ transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+ transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomInRight {
+ -webkit-animation-name: zoomInRight;
+ animation-name: zoomInRight;
+}
+
+ at -webkit-keyframes zoomInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+ transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+ at keyframes zoomInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+ transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomInUp {
+ -webkit-animation-name: zoomInUp;
+ animation-name: zoomInUp;
+}
+
+ at -webkit-keyframes zoomOut {
+ from {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+ at keyframes zoomOut {
+ from {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ -webkit-transform: scale3d(.3, .3, .3);
+ transform: scale3d(.3, .3, .3);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.zoomOut {
+ -webkit-animation-name: zoomOut;
+ animation-name: zoomOut;
+}
+
+ at -webkit-keyframes zoomOutDown {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+ transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+ at keyframes zoomOutDown {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+ transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomOutDown {
+ -webkit-animation-name: zoomOutDown;
+ animation-name: zoomOutDown;
+}
+
+ at -webkit-keyframes zoomOutLeft {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+ transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+ transform: scale(.1) translate3d(-2000px, 0, 0);
+ -webkit-transform-origin: left center;
+ transform-origin: left center;
+ }
+}
+
+ at keyframes zoomOutLeft {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+ transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+ transform: scale(.1) translate3d(-2000px, 0, 0);
+ -webkit-transform-origin: left center;
+ transform-origin: left center;
+ }
+}
+
+.zoomOutLeft {
+ -webkit-animation-name: zoomOutLeft;
+ animation-name: zoomOutLeft;
+}
+
+ at -webkit-keyframes zoomOutRight {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+ transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+ transform: scale(.1) translate3d(2000px, 0, 0);
+ -webkit-transform-origin: right center;
+ transform-origin: right center;
+ }
+}
+
+ at keyframes zoomOutRight {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+ transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+ transform: scale(.1) translate3d(2000px, 0, 0);
+ -webkit-transform-origin: right center;
+ transform-origin: right center;
+ }
+}
+
+.zoomOutRight {
+ -webkit-animation-name: zoomOutRight;
+ animation-name: zoomOutRight;
+}
+
+ at -webkit-keyframes zoomOutUp {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+ transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+ at keyframes zoomOutUp {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+ transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomOutUp {
+ -webkit-animation-name: zoomOutUp;
+ animation-name: zoomOutUp;
+}
+
+ at -webkit-keyframes slideInDown {
+ from {
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+ at keyframes slideInDown {
+ from {
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInDown {
+ -webkit-animation-name: slideInDown;
+ animation-name: slideInDown;
+}
+
+ at -webkit-keyframes slideInLeft {
+ from {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+ at keyframes slideInLeft {
+ from {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInLeft {
+ -webkit-animation-name: slideInLeft;
+ animation-name: slideInLeft;
+}
+
+ at -webkit-keyframes slideInRight {
+ from {
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+ at keyframes slideInRight {
+ from {
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInRight {
+ -webkit-animation-name: slideInRight;
+ animation-name: slideInRight;
+}
+
+ at -webkit-keyframes slideInUp {
+ from {
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+ at keyframes slideInUp {
+ from {
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInUp {
+ -webkit-animation-name: slideInUp;
+ animation-name: slideInUp;
+}
+
+ at -webkit-keyframes slideOutDown {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+ at keyframes slideOutDown {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+.slideOutDown {
+ -webkit-animation-name: slideOutDown;
+ animation-name: slideOutDown;
+}
+
+ at -webkit-keyframes slideOutLeft {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+ at keyframes slideOutLeft {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+.slideOutLeft {
+ -webkit-animation-name: slideOutLeft;
+ animation-name: slideOutLeft;
+}
+
+ at -webkit-keyframes slideOutRight {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+ at keyframes slideOutRight {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.slideOutRight {
+ -webkit-animation-name: slideOutRight;
+ animation-name: slideOutRight;
+}
+
+ at -webkit-keyframes slideOutUp {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+ at keyframes slideOutUp {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+.slideOutUp {
+ -webkit-animation-name: slideOutUp;
+ animation-name: slideOutUp;
+}
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..d0cc4c5
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,12 @@
+{
+ "name": "animate.css",
+ "main": "./animate.css",
+ "ignore": [
+ ".*",
+ "source",
+ "*.yml",
+ "Gemfile",
+ "Gemfile.lock",
+ "*.md"
+ ]
+}
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..c0701d8
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,99 @@
+// Utilities
+var fs = require('fs');
+
+// Gulp
+var gulp = require('gulp');
+
+// Gulp plugins
+var gutil = require('gulp-util');
+var concat = require('gulp-concat');
+var header = require('gulp-header');
+var autoprefixer = require('gulp-autoprefixer');
+var runSequence = require('run-sequence');
+var minify = require('gulp-cssnano');
+var rename = require('gulp-rename');
+
+// Misc/global vars
+var pkg = JSON.parse(fs.readFileSync('package.json'));
+var activatedAnimations = activateAnimations();
+
+// Task options
+var opts = {
+ destPath: './',
+ concatName: 'animate.css',
+
+ autoprefixer: {
+ browsers: ['last 2 versions'],
+ cascade: false
+ },
+
+ minRename: {
+ suffix: '.min'
+ },
+
+ banner: [
+ '@charset "UTF-8";\n',
+ '/*!',
+ ' * <%= name %> -<%= homepage %>',
+ ' * Version - <%= version %>',
+ ' * Licensed under the MIT license - http://opensource.org/licenses/MIT',
+ ' *',
+ ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
+ ' */\n\n'
+ ].join('\n')
+};
+
+// ----------------------------
+// Gulp task definitions
+// ----------------------------
+
+gulp.task('default', function() {
+ runSequence('createCSS', 'addHeader');
+});
+
+gulp.task('createCSS', function() {
+ return gulp.src(activatedAnimations)
+ .pipe(concat(opts.concatName))
+ .pipe(autoprefixer(opts.autoprefixer))
+ .pipe(gulp.dest(opts.destPath))
+ .pipe(rename(opts.minRename))
+ .pipe(minify({reduceIdents: {keyframes: false}}))
+ .pipe(gulp.dest(opts.destPath));
+});
+
+gulp.task('addHeader', function() {
+ return gulp.src('*.css')
+ .pipe(header(opts.banner, pkg))
+ .pipe(gulp.dest(opts.destPath));
+});
+
+// ----------------------------
+// Helpers/functions
+// ----------------------------
+
+// Read the config file and return an array of the animations to be activated
+function activateAnimations() {
+ var categories = JSON.parse(fs.readFileSync('animate-config.json')),
+ category, files, file,
+ target = [ 'source/_base.css' ],
+ count = 0;
+
+ for (category in categories) {
+ if (categories.hasOwnProperty(category)) {
+ files = categories[category];
+
+ for (var i = 0; i < files.length; ++i) {
+ target.push('source/' + category + '/' + files[i] + '.css');
+ count += 1;
+ }
+ }
+ }
+
+ if (!count) {
+ gutil.log('No animations activated.');
+ } else {
+ gutil.log(count + (count > 1 ? ' animations' : ' animation') + ' activated.');
+ }
+
+ return target;
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8d7bf19
--- /dev/null
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "animate.css",
+ "version": "3.5.0",
+ "main": "animate.css",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/daneden/animate.css.git"
+ },
+ "author": {
+ "name": "Daniel Eden"
+ },
+ "homepage": "http://daneden.me/animate",
+ "license": "MIT",
+ "style": "./animate.css",
+ "jspm": {
+ "main": "animate.css!",
+ "format": "global",
+ "directories": {
+ "lib": "./"
+ }
+ },
+ "devDependencies": {
+ "gulp": "^3.9.0",
+ "gulp-autoprefixer": "^3.1.0",
+ "gulp-concat": "^2.6.0",
+ "gulp-cssnano": "^2.0.0",
+ "gulp-header": "^1.7.1",
+ "gulp-rename": "^1.2.2",
+ "gulp-util": "^3.0.7",
+ "run-sequence": "^1.1.5"
+ },
+ "spm": {
+ "main": "./animate.css"
+ }
+}
diff --git a/source/_base.css b/source/_base.css
new file mode 100644
index 0000000..630dc79
--- /dev/null
+++ b/source/_base.css
@@ -0,0 +1,19 @@
+.animated {
+ animation-duration: 1s;
+ animation-fill-mode: both;
+}
+
+.animated.infinite {
+ animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+ animation-duration: 2s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY,
+.animated.bounceIn,
+.animated.bounceOut {
+ animation-duration: .75s;
+}
diff --git a/source/attention_seekers/bounce.css b/source/attention_seekers/bounce.css
new file mode 100644
index 0000000..87e3d50
--- /dev/null
+++ b/source/attention_seekers/bounce.css
@@ -0,0 +1,25 @@
+ at keyframes bounce {
+ from, 20%, 53%, 80%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ transform: translate3d(0,0,0);
+ }
+
+ 40%, 43% {
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ transform: translate3d(0, -30px, 0);
+ }
+
+ 70% {
+ animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+ transform: translate3d(0, -15px, 0);
+ }
+
+ 90% {
+ transform: translate3d(0,-4px,0);
+ }
+}
+
+.bounce {
+ animation-name: bounce;
+ transform-origin: center bottom;
+}
diff --git a/source/attention_seekers/flash.css b/source/attention_seekers/flash.css
new file mode 100644
index 0000000..8ad7225
--- /dev/null
+++ b/source/attention_seekers/flash.css
@@ -0,0 +1,13 @@
+ at keyframes flash {
+ from, 50%, to {
+ opacity: 1;
+ }
+
+ 25%, 75% {
+ opacity: 0;
+ }
+}
+
+.flash {
+ animation-name: flash;
+}
diff --git a/source/attention_seekers/headShake.css b/source/attention_seekers/headShake.css
new file mode 100644
index 0000000..6298b27
--- /dev/null
+++ b/source/attention_seekers/headShake.css
@@ -0,0 +1,30 @@
+ at keyframes headShake {
+ 0% {
+ transform: translateX(0);
+ }
+
+ 6.5% {
+ transform: translateX(-6px) rotateY(-9deg);
+ }
+
+ 18.5% {
+ transform: translateX(5px) rotateY(7deg);
+ }
+
+ 31.5% {
+ transform: translateX(-3px) rotateY(-5deg);
+ }
+
+ 43.5% {
+ transform: translateX(2px) rotateY(3deg);
+ }
+
+ 50% {
+ transform: translateX(0);
+ }
+}
+
+.headShake {
+ animation-timing-function: ease-in-out;
+ animation-name: headShake;
+}
diff --git a/source/attention_seekers/jello.css b/source/attention_seekers/jello.css
new file mode 100644
index 0000000..4487249
--- /dev/null
+++ b/source/attention_seekers/jello.css
@@ -0,0 +1,38 @@
+ at keyframes jello {
+ from, 11.1%, to {
+ transform: none;
+ }
+
+ 22.2% {
+ transform: skewX(-12.5deg) skewY(-12.5deg);
+ }
+
+ 33.3% {
+ transform: skewX(6.25deg) skewY(6.25deg);
+ }
+
+ 44.4% {
+ transform: skewX(-3.125deg) skewY(-3.125deg);
+ }
+
+ 55.5% {
+ transform: skewX(1.5625deg) skewY(1.5625deg);
+ }
+
+ 66.6% {
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ }
+
+ 77.7% {
+ transform: skewX(0.390625deg) skewY(0.390625deg);
+ }
+
+ 88.8% {
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ }
+}
+
+.jello {
+ animation-name: jello;
+ transform-origin: center;
+}
diff --git a/source/attention_seekers/pulse.css b/source/attention_seekers/pulse.css
new file mode 100644
index 0000000..3386a7b
--- /dev/null
+++ b/source/attention_seekers/pulse.css
@@ -0,0 +1,19 @@
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+ at keyframes pulse {
+ from {
+ transform: scale3d(1, 1, 1);
+ }
+
+ 50% {
+ transform: scale3d(1.05, 1.05, 1.05);
+ }
+
+ to {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.pulse {
+ animation-name: pulse;
+}
diff --git a/source/attention_seekers/rubberBand.css b/source/attention_seekers/rubberBand.css
new file mode 100644
index 0000000..2de8461
--- /dev/null
+++ b/source/attention_seekers/rubberBand.css
@@ -0,0 +1,33 @@
+ at keyframes rubberBand {
+ from {
+ transform: scale3d(1, 1, 1);
+ }
+
+ 30% {
+ transform: scale3d(1.25, 0.75, 1);
+ }
+
+ 40% {
+ transform: scale3d(0.75, 1.25, 1);
+ }
+
+ 50% {
+ transform: scale3d(1.15, 0.85, 1);
+ }
+
+ 65% {
+ transform: scale3d(.95, 1.05, 1);
+ }
+
+ 75% {
+ transform: scale3d(1.05, .95, 1);
+ }
+
+ to {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.rubberBand {
+ animation-name: rubberBand;
+}
diff --git a/source/attention_seekers/shake.css b/source/attention_seekers/shake.css
new file mode 100644
index 0000000..76731c0
--- /dev/null
+++ b/source/attention_seekers/shake.css
@@ -0,0 +1,17 @@
+ at keyframes shake {
+ from, to {
+ transform: translate3d(0, 0, 0);
+ }
+
+ 10%, 30%, 50%, 70%, 90% {
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 20%, 40%, 60%, 80% {
+ transform: translate3d(10px, 0, 0);
+ }
+}
+
+.shake {
+ animation-name: shake;
+}
diff --git a/source/attention_seekers/swing.css b/source/attention_seekers/swing.css
new file mode 100644
index 0000000..3390c24
--- /dev/null
+++ b/source/attention_seekers/swing.css
@@ -0,0 +1,26 @@
+ at keyframes swing {
+ 20% {
+ transform: rotate3d(0, 0, 1, 15deg);
+ }
+
+ 40% {
+ transform: rotate3d(0, 0, 1, -10deg);
+ }
+
+ 60% {
+ transform: rotate3d(0, 0, 1, 5deg);
+ }
+
+ 80% {
+ transform: rotate3d(0, 0, 1, -5deg);
+ }
+
+ to {
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
+}
+
+.swing {
+ transform-origin: top center;
+ animation-name: swing;
+}
diff --git a/source/attention_seekers/tada.css b/source/attention_seekers/tada.css
new file mode 100644
index 0000000..82dd903
--- /dev/null
+++ b/source/attention_seekers/tada.css
@@ -0,0 +1,25 @@
+ at keyframes tada {
+ from {
+ transform: scale3d(1, 1, 1);
+ }
+
+ 10%, 20% {
+ transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 30%, 50%, 70%, 90% {
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 40%, 60%, 80% {
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ }
+
+ to {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.tada {
+ animation-name: tada;
+}
diff --git a/source/attention_seekers/wobble.css b/source/attention_seekers/wobble.css
new file mode 100644
index 0000000..a80fe29
--- /dev/null
+++ b/source/attention_seekers/wobble.css
@@ -0,0 +1,35 @@
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+ at keyframes wobble {
+ from {
+ transform: none;
+ }
+
+ 15% {
+ transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ }
+
+ 30% {
+ transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 45% {
+ transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 60% {
+ transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ }
+
+ 75% {
+ transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ }
+
+ to {
+ transform: none;
+ }
+}
+
+.wobble {
+ animation-name: wobble;
+}
diff --git a/source/bouncing_entrances/bounceIn.css b/source/bouncing_entrances/bounceIn.css
new file mode 100644
index 0000000..9f253a1
--- /dev/null
+++ b/source/bouncing_entrances/bounceIn.css
@@ -0,0 +1,36 @@
+ at keyframes bounceIn {
+ from, 20%, 40%, 60%, 80%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ transform: scale3d(.3, .3, .3);
+ }
+
+ 20% {
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ 40% {
+ transform: scale3d(.9, .9, .9);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+
+ 80% {
+ transform: scale3d(.97, .97, .97);
+ }
+
+ to {
+ opacity: 1;
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.bounceIn {
+ animation-name: bounceIn;
+}
diff --git a/source/bouncing_entrances/bounceInDown.css b/source/bouncing_entrances/bounceInDown.css
new file mode 100644
index 0000000..0d855a7
--- /dev/null
+++ b/source/bouncing_entrances/bounceInDown.css
@@ -0,0 +1,31 @@
+ at keyframes bounceInDown {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ transform: translate3d(0, -3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: translate3d(0, 25px, 0);
+ }
+
+ 75% {
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 90% {
+ transform: translate3d(0, 5px, 0);
+ }
+
+ to {
+ transform: none;
+ }
+}
+
+.bounceInDown {
+ animation-name: bounceInDown;
+}
diff --git a/source/bouncing_entrances/bounceInLeft.css b/source/bouncing_entrances/bounceInLeft.css
new file mode 100644
index 0000000..4f1032a
--- /dev/null
+++ b/source/bouncing_entrances/bounceInLeft.css
@@ -0,0 +1,31 @@
+ at keyframes bounceInLeft {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ transform: translate3d(-3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: translate3d(25px, 0, 0);
+ }
+
+ 75% {
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 90% {
+ transform: translate3d(5px, 0, 0);
+ }
+
+ to {
+ transform: none;
+ }
+}
+
+.bounceInLeft {
+ animation-name: bounceInLeft;
+}
diff --git a/source/bouncing_entrances/bounceInRight.css b/source/bouncing_entrances/bounceInRight.css
new file mode 100644
index 0000000..6e06e02
--- /dev/null
+++ b/source/bouncing_entrances/bounceInRight.css
@@ -0,0 +1,31 @@
+ at keyframes bounceInRight {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ from {
+ opacity: 0;
+ transform: translate3d(3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: translate3d(-25px, 0, 0);
+ }
+
+ 75% {
+ transform: translate3d(10px, 0, 0);
+ }
+
+ 90% {
+ transform: translate3d(-5px, 0, 0);
+ }
+
+ to {
+ transform: none;
+ }
+}
+
+.bounceInRight {
+ animation-name: bounceInRight;
+}
diff --git a/source/bouncing_entrances/bounceInUp.css b/source/bouncing_entrances/bounceInUp.css
new file mode 100644
index 0000000..fd0d472
--- /dev/null
+++ b/source/bouncing_entrances/bounceInUp.css
@@ -0,0 +1,31 @@
+ at keyframes bounceInUp {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ from {
+ opacity: 0;
+ transform: translate3d(0, 3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: translate3d(0, -20px, 0);
+ }
+
+ 75% {
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 90% {
+ transform: translate3d(0, -5px, 0);
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.bounceInUp {
+ animation-name: bounceInUp;
+}
diff --git a/source/bouncing_exits/bounceOut.css b/source/bouncing_exits/bounceOut.css
new file mode 100644
index 0000000..b170c28
--- /dev/null
+++ b/source/bouncing_exits/bounceOut.css
@@ -0,0 +1,19 @@
+ at keyframes bounceOut {
+ 20% {
+ transform: scale3d(.9, .9, .9);
+ }
+
+ 50%, 55% {
+ opacity: 1;
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ to {
+ opacity: 0;
+ transform: scale3d(.3, .3, .3);
+ }
+}
+
+.bounceOut {
+ animation-name: bounceOut;
+}
diff --git a/source/bouncing_exits/bounceOutDown.css b/source/bouncing_exits/bounceOutDown.css
new file mode 100644
index 0000000..462cffc
--- /dev/null
+++ b/source/bouncing_exits/bounceOutDown.css
@@ -0,0 +1,19 @@
+ at keyframes bounceOutDown {
+ 20% {
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 40%, 45% {
+ opacity: 1;
+ transform: translate3d(0, -20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+.bounceOutDown {
+ animation-name: bounceOutDown;
+}
diff --git a/source/bouncing_exits/bounceOutLeft.css b/source/bouncing_exits/bounceOutLeft.css
new file mode 100644
index 0000000..0c03a9e
--- /dev/null
+++ b/source/bouncing_exits/bounceOutLeft.css
@@ -0,0 +1,15 @@
+ at keyframes bounceOutLeft {
+ 20% {
+ opacity: 1;
+ transform: translate3d(20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+.bounceOutLeft {
+ animation-name: bounceOutLeft;
+}
diff --git a/source/bouncing_exits/bounceOutRight.css b/source/bouncing_exits/bounceOutRight.css
new file mode 100644
index 0000000..0f0bf9d
--- /dev/null
+++ b/source/bouncing_exits/bounceOutRight.css
@@ -0,0 +1,15 @@
+ at keyframes bounceOutRight {
+ 20% {
+ opacity: 1;
+ transform: translate3d(-20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+.bounceOutRight {
+ animation-name: bounceOutRight;
+}
diff --git a/source/bouncing_exits/bounceOutUp.css b/source/bouncing_exits/bounceOutUp.css
new file mode 100644
index 0000000..9b25891
--- /dev/null
+++ b/source/bouncing_exits/bounceOutUp.css
@@ -0,0 +1,19 @@
+ at keyframes bounceOutUp {
+ 20% {
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 40%, 45% {
+ opacity: 1;
+ transform: translate3d(0, 20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+.bounceOutUp {
+ animation-name: bounceOutUp;
+}
diff --git a/source/fading_entrances/fadeIn.css b/source/fading_entrances/fadeIn.css
new file mode 100644
index 0000000..2177964
--- /dev/null
+++ b/source/fading_entrances/fadeIn.css
@@ -0,0 +1,13 @@
+ at keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ animation-name: fadeIn;
+}
diff --git a/source/fading_entrances/fadeInDown.css b/source/fading_entrances/fadeInDown.css
new file mode 100644
index 0000000..0ed62a9
--- /dev/null
+++ b/source/fading_entrances/fadeInDown.css
@@ -0,0 +1,15 @@
+ at keyframes fadeInDown {
+ from {
+ opacity: 0;
+ transform: translate3d(0, -100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.fadeInDown {
+ animation-name: fadeInDown;
+}
diff --git a/source/fading_entrances/fadeInDownBig.css b/source/fading_entrances/fadeInDownBig.css
new file mode 100644
index 0000000..2fcf73a
--- /dev/null
+++ b/source/fading_entrances/fadeInDownBig.css
@@ -0,0 +1,15 @@
+ at keyframes fadeInDownBig {
+ from {
+ opacity: 0;
+ transform: translate3d(0, -2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.fadeInDownBig {
+ animation-name: fadeInDownBig;
+}
diff --git a/source/fading_entrances/fadeInLeft.css b/source/fading_entrances/fadeInLeft.css
new file mode 100644
index 0000000..3c90f0b
--- /dev/null
+++ b/source/fading_entrances/fadeInLeft.css
@@ -0,0 +1,15 @@
+ at keyframes fadeInLeft {
+ from {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.fadeInLeft {
+ animation-name: fadeInLeft;
+}
diff --git a/source/fading_entrances/fadeInLeftBig.css b/source/fading_entrances/fadeInLeftBig.css
new file mode 100644
index 0000000..2d679fc
--- /dev/null
+++ b/source/fading_entrances/fadeInLeftBig.css
@@ -0,0 +1,15 @@
+ at keyframes fadeInLeftBig {
+ from {
+ opacity: 0;
+ transform: translate3d(-2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.fadeInLeftBig {
+ animation-name: fadeInLeftBig;
+}
diff --git a/source/fading_entrances/fadeInRight.css b/source/fading_entrances/fadeInRight.css
new file mode 100644
index 0000000..ad94f25
--- /dev/null
+++ b/source/fading_entrances/fadeInRight.css
@@ -0,0 +1,15 @@
+ at keyframes fadeInRight {
+ from {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.fadeInRight {
+ animation-name: fadeInRight;
+}
diff --git a/source/fading_entrances/fadeInRightBig.css b/source/fading_entrances/fadeInRightBig.css
new file mode 100644
index 0000000..be9182f
--- /dev/null
+++ b/source/fading_entrances/fadeInRightBig.css
@@ -0,0 +1,15 @@
+ at keyframes fadeInRightBig {
+ from {
+ opacity: 0;
+ transform: translate3d(2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.fadeInRightBig {
+ animation-name: fadeInRightBig;
+}
diff --git a/source/fading_entrances/fadeInUp.css b/source/fading_entrances/fadeInUp.css
new file mode 100644
index 0000000..920a173
--- /dev/null
+++ b/source/fading_entrances/fadeInUp.css
@@ -0,0 +1,15 @@
+ at keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.fadeInUp {
+ animation-name: fadeInUp;
+}
diff --git a/source/fading_entrances/fadeInUpBig.css b/source/fading_entrances/fadeInUpBig.css
new file mode 100644
index 0000000..cf6bf7f
--- /dev/null
+++ b/source/fading_entrances/fadeInUpBig.css
@@ -0,0 +1,15 @@
+ at keyframes fadeInUpBig {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.fadeInUpBig {
+ animation-name: fadeInUpBig;
+}
diff --git a/source/fading_exits/fadeOut.css b/source/fading_exits/fadeOut.css
new file mode 100644
index 0000000..d19c396
--- /dev/null
+++ b/source/fading_exits/fadeOut.css
@@ -0,0 +1,13 @@
+ at keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.fadeOut {
+ animation-name: fadeOut;
+}
diff --git a/source/fading_exits/fadeOutDown.css b/source/fading_exits/fadeOutDown.css
new file mode 100644
index 0000000..839b990
--- /dev/null
+++ b/source/fading_exits/fadeOutDown.css
@@ -0,0 +1,14 @@
+ at keyframes fadeOutDown {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+.fadeOutDown {
+ animation-name: fadeOutDown;
+}
diff --git a/source/fading_exits/fadeOutDownBig.css b/source/fading_exits/fadeOutDownBig.css
new file mode 100644
index 0000000..5b58d1a
--- /dev/null
+++ b/source/fading_exits/fadeOutDownBig.css
@@ -0,0 +1,14 @@
+ at keyframes fadeOutDownBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+.fadeOutDownBig {
+ animation-name: fadeOutDownBig;
+}
diff --git a/source/fading_exits/fadeOutLeft.css b/source/fading_exits/fadeOutLeft.css
new file mode 100644
index 0000000..16f2fc9
--- /dev/null
+++ b/source/fading_exits/fadeOutLeft.css
@@ -0,0 +1,14 @@
+ at keyframes fadeOutLeft {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+.fadeOutLeft {
+ animation-name: fadeOutLeft;
+}
diff --git a/source/fading_exits/fadeOutLeftBig.css b/source/fading_exits/fadeOutLeftBig.css
new file mode 100644
index 0000000..e50b468
--- /dev/null
+++ b/source/fading_exits/fadeOutLeftBig.css
@@ -0,0 +1,14 @@
+ at keyframes fadeOutLeftBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+.fadeOutLeftBig {
+ animation-name: fadeOutLeftBig;
+}
diff --git a/source/fading_exits/fadeOutRight.css b/source/fading_exits/fadeOutRight.css
new file mode 100644
index 0000000..bf0cbb6
--- /dev/null
+++ b/source/fading_exits/fadeOutRight.css
@@ -0,0 +1,14 @@
+ at keyframes fadeOutRight {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.fadeOutRight {
+ animation-name: fadeOutRight;
+}
diff --git a/source/fading_exits/fadeOutRightBig.css b/source/fading_exits/fadeOutRightBig.css
new file mode 100644
index 0000000..f606170
--- /dev/null
+++ b/source/fading_exits/fadeOutRightBig.css
@@ -0,0 +1,14 @@
+ at keyframes fadeOutRightBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+.fadeOutRightBig {
+ animation-name: fadeOutRightBig;
+}
diff --git a/source/fading_exits/fadeOutUp.css b/source/fading_exits/fadeOutUp.css
new file mode 100644
index 0000000..fbafcac
--- /dev/null
+++ b/source/fading_exits/fadeOutUp.css
@@ -0,0 +1,14 @@
+ at keyframes fadeOutUp {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+.fadeOutUp {
+ animation-name: fadeOutUp;
+}
diff --git a/source/fading_exits/fadeOutUpBig.css b/source/fading_exits/fadeOutUpBig.css
new file mode 100644
index 0000000..5583bd0
--- /dev/null
+++ b/source/fading_exits/fadeOutUpBig.css
@@ -0,0 +1,14 @@
+ at keyframes fadeOutUpBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+.fadeOutUpBig {
+ animation-name: fadeOutUpBig;
+}
diff --git a/source/flippers/flip.css b/source/flippers/flip.css
new file mode 100644
index 0000000..579ddb8
--- /dev/null
+++ b/source/flippers/flip.css
@@ -0,0 +1,31 @@
+ at keyframes flip {
+ from {
+ transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+ animation-timing-function: ease-out;
+ }
+
+ 40% {
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ animation-timing-function: ease-out;
+ }
+
+ 50% {
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ animation-timing-function: ease-in;
+ }
+
+ 80% {
+ transform: perspective(400px) scale3d(.95, .95, .95);
+ animation-timing-function: ease-in;
+ }
+
+ to {
+ transform: perspective(400px);
+ animation-timing-function: ease-in;
+ }
+}
+
+.animated.flip {
+ backface-visibility: visible;
+ animation-name: flip;
+}
diff --git a/source/flippers/flipInX.css b/source/flippers/flipInX.css
new file mode 100644
index 0000000..2135029
--- /dev/null
+++ b/source/flippers/flipInX.css
@@ -0,0 +1,30 @@
+ at keyframes flipInX {
+ from {
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ }
+
+ to {
+ transform: perspective(400px);
+ }
+}
+
+.flipInX {
+ backface-visibility: visible !important;
+ animation-name: flipInX;
+}
diff --git a/source/flippers/flipInY.css b/source/flippers/flipInY.css
new file mode 100644
index 0000000..9508862
--- /dev/null
+++ b/source/flippers/flipInY.css
@@ -0,0 +1,30 @@
+ at keyframes flipInY {
+ from {
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ }
+
+ to {
+ transform: perspective(400px);
+ }
+}
+
+.flipInY {
+ backface-visibility: visible !important;
+ animation-name: flipInY;
+}
diff --git a/source/flippers/flipOutX.css b/source/flippers/flipOutX.css
new file mode 100644
index 0000000..ffa0fcf
--- /dev/null
+++ b/source/flippers/flipOutX.css
@@ -0,0 +1,20 @@
+ at keyframes flipOutX {
+ from {
+ transform: perspective(400px);
+ }
+
+ 30% {
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ opacity: 1;
+ }
+
+ to {
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+.flipOutX {
+ animation-name: flipOutX;
+ backface-visibility: visible !important;
+}
diff --git a/source/flippers/flipOutY.css b/source/flippers/flipOutY.css
new file mode 100644
index 0000000..b004cae
--- /dev/null
+++ b/source/flippers/flipOutY.css
@@ -0,0 +1,20 @@
+ at keyframes flipOutY {
+ from {
+ transform: perspective(400px);
+ }
+
+ 30% {
+ transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+ opacity: 1;
+ }
+
+ to {
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+.flipOutY {
+ backface-visibility: visible !important;
+ animation-name: flipOutY;
+}
diff --git a/source/lightspeed/lightSpeedIn.css b/source/lightspeed/lightSpeedIn.css
new file mode 100644
index 0000000..06f4d84
--- /dev/null
+++ b/source/lightspeed/lightSpeedIn.css
@@ -0,0 +1,26 @@
+ at keyframes lightSpeedIn {
+ from {
+ transform: translate3d(100%, 0, 0) skewX(-30deg);
+ opacity: 0;
+ }
+
+ 60% {
+ transform: skewX(20deg);
+ opacity: 1;
+ }
+
+ 80% {
+ transform: skewX(-5deg);
+ opacity: 1;
+ }
+
+ to {
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.lightSpeedIn {
+ animation-name: lightSpeedIn;
+ animation-timing-function: ease-out;
+}
diff --git a/source/lightspeed/lightSpeedOut.css b/source/lightspeed/lightSpeedOut.css
new file mode 100644
index 0000000..b328dcc
--- /dev/null
+++ b/source/lightspeed/lightSpeedOut.css
@@ -0,0 +1,15 @@
+ at keyframes lightSpeedOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ transform: translate3d(100%, 0, 0) skewX(30deg);
+ opacity: 0;
+ }
+}
+
+.lightSpeedOut {
+ animation-name: lightSpeedOut;
+ animation-timing-function: ease-in;
+}
diff --git a/source/rotating_entrances/rotateIn.css b/source/rotating_entrances/rotateIn.css
new file mode 100644
index 0000000..6b59187
--- /dev/null
+++ b/source/rotating_entrances/rotateIn.css
@@ -0,0 +1,17 @@
+ at keyframes rotateIn {
+ from {
+ transform-origin: center;
+ transform: rotate3d(0, 0, 1, -200deg);
+ opacity: 0;
+ }
+
+ to {
+ transform-origin: center;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateIn {
+ animation-name: rotateIn;
+}
diff --git a/source/rotating_entrances/rotateInDownLeft.css b/source/rotating_entrances/rotateInDownLeft.css
new file mode 100644
index 0000000..a5a0da5
--- /dev/null
+++ b/source/rotating_entrances/rotateInDownLeft.css
@@ -0,0 +1,17 @@
+ at keyframes rotateInDownLeft {
+ from {
+ transform-origin: left bottom;
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+
+ to {
+ transform-origin: left bottom;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateInDownLeft {
+ animation-name: rotateInDownLeft;
+}
diff --git a/source/rotating_entrances/rotateInDownRight.css b/source/rotating_entrances/rotateInDownRight.css
new file mode 100644
index 0000000..3f8d766
--- /dev/null
+++ b/source/rotating_entrances/rotateInDownRight.css
@@ -0,0 +1,17 @@
+ at keyframes rotateInDownRight {
+ from {
+ transform-origin: right bottom;
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ transform-origin: right bottom;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateInDownRight {
+ animation-name: rotateInDownRight;
+}
diff --git a/source/rotating_entrances/rotateInUpLeft.css b/source/rotating_entrances/rotateInUpLeft.css
new file mode 100644
index 0000000..7a04f75
--- /dev/null
+++ b/source/rotating_entrances/rotateInUpLeft.css
@@ -0,0 +1,17 @@
+ at keyframes rotateInUpLeft {
+ from {
+ transform-origin: left bottom;
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ transform-origin: left bottom;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateInUpLeft {
+ animation-name: rotateInUpLeft;
+}
diff --git a/source/rotating_entrances/rotateInUpRight.css b/source/rotating_entrances/rotateInUpRight.css
new file mode 100644
index 0000000..f3e4998
--- /dev/null
+++ b/source/rotating_entrances/rotateInUpRight.css
@@ -0,0 +1,17 @@
+ at keyframes rotateInUpRight {
+ from {
+ transform-origin: right bottom;
+ transform: rotate3d(0, 0, 1, -90deg);
+ opacity: 0;
+ }
+
+ to {
+ transform-origin: right bottom;
+ transform: none;
+ opacity: 1;
+ }
+}
+
+.rotateInUpRight {
+ animation-name: rotateInUpRight;
+}
diff --git a/source/rotating_exits/rotateOut.css b/source/rotating_exits/rotateOut.css
new file mode 100644
index 0000000..6325006
--- /dev/null
+++ b/source/rotating_exits/rotateOut.css
@@ -0,0 +1,16 @@
+ at keyframes rotateOut {
+ from {
+ transform-origin: center;
+ opacity: 1;
+ }
+
+ to {
+ transform-origin: center;
+ transform: rotate3d(0, 0, 1, 200deg);
+ opacity: 0;
+ }
+}
+
+.rotateOut {
+ animation-name: rotateOut;
+}
diff --git a/source/rotating_exits/rotateOutDownLeft.css b/source/rotating_exits/rotateOutDownLeft.css
new file mode 100644
index 0000000..11595b4
--- /dev/null
+++ b/source/rotating_exits/rotateOutDownLeft.css
@@ -0,0 +1,16 @@
+ at keyframes rotateOutDownLeft {
+ from {
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ transform-origin: left bottom;
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutDownLeft {
+ animation-name: rotateOutDownLeft;
+}
diff --git a/source/rotating_exits/rotateOutDownRight.css b/source/rotating_exits/rotateOutDownRight.css
new file mode 100644
index 0000000..9bf03da
--- /dev/null
+++ b/source/rotating_exits/rotateOutDownRight.css
@@ -0,0 +1,16 @@
+ at keyframes rotateOutDownRight {
+ from {
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ transform-origin: right bottom;
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutDownRight {
+ animation-name: rotateOutDownRight;
+}
diff --git a/source/rotating_exits/rotateOutUpLeft.css b/source/rotating_exits/rotateOutUpLeft.css
new file mode 100644
index 0000000..6f6815d
--- /dev/null
+++ b/source/rotating_exits/rotateOutUpLeft.css
@@ -0,0 +1,16 @@
+ at keyframes rotateOutUpLeft {
+ from {
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ transform-origin: left bottom;
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutUpLeft {
+ animation-name: rotateOutUpLeft;
+}
diff --git a/source/rotating_exits/rotateOutUpRight.css b/source/rotating_exits/rotateOutUpRight.css
new file mode 100644
index 0000000..2fdeb6b
--- /dev/null
+++ b/source/rotating_exits/rotateOutUpRight.css
@@ -0,0 +1,16 @@
+ at keyframes rotateOutUpRight {
+ from {
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ transform-origin: right bottom;
+ transform: rotate3d(0, 0, 1, 90deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutUpRight {
+ animation-name: rotateOutUpRight;
+}
diff --git a/source/sliding_entrances/slideInDown.css b/source/sliding_entrances/slideInDown.css
new file mode 100644
index 0000000..d637367
--- /dev/null
+++ b/source/sliding_entrances/slideInDown.css
@@ -0,0 +1,14 @@
+ at keyframes slideInDown {
+ from {
+ transform: translate3d(0, -100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInDown {
+ animation-name: slideInDown;
+}
diff --git a/source/sliding_entrances/slideInLeft.css b/source/sliding_entrances/slideInLeft.css
new file mode 100644
index 0000000..93370a8
--- /dev/null
+++ b/source/sliding_entrances/slideInLeft.css
@@ -0,0 +1,14 @@
+ at keyframes slideInLeft {
+ from {
+ transform: translate3d(-100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInLeft {
+ animation-name: slideInLeft;
+}
diff --git a/source/sliding_entrances/slideInRight.css b/source/sliding_entrances/slideInRight.css
new file mode 100644
index 0000000..209a99c
--- /dev/null
+++ b/source/sliding_entrances/slideInRight.css
@@ -0,0 +1,14 @@
+ at keyframes slideInRight {
+ from {
+ transform: translate3d(100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInRight {
+ animation-name: slideInRight;
+}
diff --git a/source/sliding_entrances/slideInUp.css b/source/sliding_entrances/slideInUp.css
new file mode 100644
index 0000000..37b6cde
--- /dev/null
+++ b/source/sliding_entrances/slideInUp.css
@@ -0,0 +1,14 @@
+ at keyframes slideInUp {
+ from {
+ transform: translate3d(0, 100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInUp {
+ animation-name: slideInUp;
+}
diff --git a/source/sliding_exits/slideOutDown.css b/source/sliding_exits/slideOutDown.css
new file mode 100644
index 0000000..e8e0c7d
--- /dev/null
+++ b/source/sliding_exits/slideOutDown.css
@@ -0,0 +1,14 @@
+ at keyframes slideOutDown {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+.slideOutDown {
+ animation-name: slideOutDown;
+}
diff --git a/source/sliding_exits/slideOutLeft.css b/source/sliding_exits/slideOutLeft.css
new file mode 100644
index 0000000..cf44454
--- /dev/null
+++ b/source/sliding_exits/slideOutLeft.css
@@ -0,0 +1,14 @@
+ at keyframes slideOutLeft {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+.slideOutLeft {
+ animation-name: slideOutLeft;
+}
diff --git a/source/sliding_exits/slideOutRight.css b/source/sliding_exits/slideOutRight.css
new file mode 100644
index 0000000..95f7f22
--- /dev/null
+++ b/source/sliding_exits/slideOutRight.css
@@ -0,0 +1,14 @@
+ at keyframes slideOutRight {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.slideOutRight {
+ animation-name: slideOutRight;
+}
diff --git a/source/sliding_exits/slideOutUp.css b/source/sliding_exits/slideOutUp.css
new file mode 100644
index 0000000..27541b5
--- /dev/null
+++ b/source/sliding_exits/slideOutUp.css
@@ -0,0 +1,14 @@
+ at keyframes slideOutUp {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+.slideOutUp {
+ animation-name: slideOutUp;
+}
diff --git a/source/specials/hinge.css b/source/specials/hinge.css
new file mode 100644
index 0000000..56ec58a
--- /dev/null
+++ b/source/specials/hinge.css
@@ -0,0 +1,28 @@
+ at keyframes hinge {
+ 0% {
+ transform-origin: top left;
+ animation-timing-function: ease-in-out;
+ }
+
+ 20%, 60% {
+ transform: rotate3d(0, 0, 1, 80deg);
+ transform-origin: top left;
+ animation-timing-function: ease-in-out;
+ }
+
+ 40%, 80% {
+ transform: rotate3d(0, 0, 1, 60deg);
+ transform-origin: top left;
+ animation-timing-function: ease-in-out;
+ opacity: 1;
+ }
+
+ to {
+ transform: translate3d(0, 700px, 0);
+ opacity: 0;
+ }
+}
+
+.hinge {
+ animation-name: hinge;
+}
diff --git a/source/specials/rollIn.css b/source/specials/rollIn.css
new file mode 100644
index 0000000..9cda44c
--- /dev/null
+++ b/source/specials/rollIn.css
@@ -0,0 +1,17 @@
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+ at keyframes rollIn {
+ from {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.rollIn {
+ animation-name: rollIn;
+}
diff --git a/source/specials/rollOut.css b/source/specials/rollOut.css
new file mode 100644
index 0000000..52750f7
--- /dev/null
+++ b/source/specials/rollOut.css
@@ -0,0 +1,16 @@
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+ at keyframes rollOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ }
+}
+
+.rollOut {
+ animation-name: rollOut;
+}
diff --git a/source/zooming_entrances/zoomIn.css b/source/zooming_entrances/zoomIn.css
new file mode 100644
index 0000000..fe43013
--- /dev/null
+++ b/source/zooming_entrances/zoomIn.css
@@ -0,0 +1,14 @@
+ at keyframes zoomIn {
+ from {
+ opacity: 0;
+ transform: scale3d(.3, .3, .3);
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+.zoomIn {
+ animation-name: zoomIn;
+}
diff --git a/source/zooming_entrances/zoomInDown.css b/source/zooming_entrances/zoomInDown.css
new file mode 100644
index 0000000..f5d60a4
--- /dev/null
+++ b/source/zooming_entrances/zoomInDown.css
@@ -0,0 +1,17 @@
+ at keyframes zoomInDown {
+ from {
+ opacity: 0;
+ transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomInDown {
+ animation-name: zoomInDown;
+}
diff --git a/source/zooming_entrances/zoomInLeft.css b/source/zooming_entrances/zoomInLeft.css
new file mode 100644
index 0000000..1e3ddfe
--- /dev/null
+++ b/source/zooming_entrances/zoomInLeft.css
@@ -0,0 +1,17 @@
+ at keyframes zoomInLeft {
+ from {
+ opacity: 0;
+ transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomInLeft {
+ animation-name: zoomInLeft;
+}
diff --git a/source/zooming_entrances/zoomInRight.css b/source/zooming_entrances/zoomInRight.css
new file mode 100644
index 0000000..276da66
--- /dev/null
+++ b/source/zooming_entrances/zoomInRight.css
@@ -0,0 +1,17 @@
+ at keyframes zoomInRight {
+ from {
+ opacity: 0;
+ transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomInRight {
+ animation-name: zoomInRight;
+}
diff --git a/source/zooming_entrances/zoomInUp.css b/source/zooming_entrances/zoomInUp.css
new file mode 100644
index 0000000..c3e23a4
--- /dev/null
+++ b/source/zooming_entrances/zoomInUp.css
@@ -0,0 +1,17 @@
+ at keyframes zoomInUp {
+ from {
+ opacity: 0;
+ transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomInUp {
+ animation-name: zoomInUp;
+}
diff --git a/source/zooming_exits/zoomOut.css b/source/zooming_exits/zoomOut.css
new file mode 100644
index 0000000..30fbae4
--- /dev/null
+++ b/source/zooming_exits/zoomOut.css
@@ -0,0 +1,18 @@
+ at keyframes zoomOut {
+ from {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ transform: scale3d(.3, .3, .3);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.zoomOut {
+ animation-name: zoomOut;
+}
diff --git a/source/zooming_exits/zoomOutDown.css b/source/zooming_exits/zoomOutDown.css
new file mode 100644
index 0000000..ea443b7
--- /dev/null
+++ b/source/zooming_exits/zoomOutDown.css
@@ -0,0 +1,18 @@
+ at keyframes zoomOutDown {
+ 40% {
+ opacity: 1;
+ transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ to {
+ opacity: 0;
+ transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+ transform-origin: center bottom;
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomOutDown {
+ animation-name: zoomOutDown;
+}
diff --git a/source/zooming_exits/zoomOutLeft.css b/source/zooming_exits/zoomOutLeft.css
new file mode 100644
index 0000000..79fbe9a
--- /dev/null
+++ b/source/zooming_exits/zoomOutLeft.css
@@ -0,0 +1,16 @@
+ at keyframes zoomOutLeft {
+ 40% {
+ opacity: 1;
+ transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ transform: scale(.1) translate3d(-2000px, 0, 0);
+ transform-origin: left center;
+ }
+}
+
+.zoomOutLeft {
+ animation-name: zoomOutLeft;
+}
diff --git a/source/zooming_exits/zoomOutRight.css b/source/zooming_exits/zoomOutRight.css
new file mode 100644
index 0000000..7262f89
--- /dev/null
+++ b/source/zooming_exits/zoomOutRight.css
@@ -0,0 +1,16 @@
+ at keyframes zoomOutRight {
+ 40% {
+ opacity: 1;
+ transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ transform: scale(.1) translate3d(2000px, 0, 0);
+ transform-origin: right center;
+ }
+}
+
+.zoomOutRight {
+ animation-name: zoomOutRight;
+}
diff --git a/source/zooming_exits/zoomOutUp.css b/source/zooming_exits/zoomOutUp.css
new file mode 100644
index 0000000..c06bae8
--- /dev/null
+++ b/source/zooming_exits/zoomOutUp.css
@@ -0,0 +1,18 @@
+ at keyframes zoomOutUp {
+ 40% {
+ opacity: 1;
+ transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+ animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+ }
+
+ to {
+ opacity: 0;
+ transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+ transform-origin: center bottom;
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+ }
+}
+
+.zoomOutUp {
+ animation-name: zoomOutUp;
+}
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/animate.css.git
More information about the Pkg-javascript-commits
mailing list