magic-sass-rails 0.0.2

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    OGY3MjgzYzA4YTE4YjA3YWEwMWQ2OGM0N2FhMmQxNzY3YzZiOWE3Nw==
+  data.tar.gz: !binary |-
+    ODU0NmY1Y2I2YzFlYjA4ZmIxZGQ2MjI2ZDViMWZmMzg2ZGIyYTgyMw==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    NWExYzFiODNlYzhkNjlkYjE1ZjhjOTllNGRmMTllOWZiM2ZjNWVjYjQ3NGQ5
+    NzYzYTEwOTUxZThlMDgzNmRjZTdjYzJmMmY1ZWUyYzQ0YjZlZTUxNGVhY2E2
+    OWE5NWZlZjVjZTc2M2I2NTIxYzk0YWVhZWFmYTU0ODE4YmE0NjE=
+  data.tar.gz: !binary |-
+    YjZmOThlZjUxM2QxNmVmNTJhZjhjM2U3MzYwOTFlOGM5YWQzMTJmMmNmYzRi
+    ZTdhMmEzZTAwNDQ1YTg1NDRmY2M2M2Q5ZjMyZTkxODFiNjYwMWVjY2I4M2Q3
+    Yzk0ZjE2NWU3ZDY4NGEwMDFjM2VhZWRjNjE0ZGYzODNiZDYxYjg=

data/MIT-LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2012 mahm
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,77 @@
+magic-sass-rails
+=====
+
+##magic-sass-rails
+
+magic for rails.
+
+##Magic
+
+CSS3 Animations with special effects. Now on beta, more effects coming soon. Many thanks to [daneden](http://daneden.me/animate/) for inspiration!
+My next step is to minifing the code.
+Take a look at the demo [link to demo page](http://www.minimamente.com/magic-css3-animations)
+
+##Installation
+
+
+Include the application.css.sass
+or
+application.css.scss
+include magic
+
+Example(application.css.sass):
+```html
+@import magic
+```
+
+Example(application.css.scss):
+```html
+@import "magic";
+```
+
+##Usage
+
+This is a sample code on hover with jQuery, first you include the class "magictime" and after your desired animation.
+```js
+$('.yourdiv').hover(function () {
+  $(this).addClass('magictime puffIn');
+});
+```
+
+If you want to load the animation after certain time, you can use this example:
+```js
+//set timer to 5 seconds, after that, load the magic animation
+setTimeout(function(){
+  	$('.yourdiv').addClass('magictime puffIn');
+}, 5000);
+```
+
+You can change the time of the animation by set the class "magictime" for example:
+```css
+.magictime {
+-webkit-animation-duration: 3s;
+-moz-animation-duration: 3s;
+-o-animation-duration: 3s;
+animation-duration: 3s;
+}
+```
+
+Default CSS timing is:
+```css
+.magictime {
+-webkit-animation-duration: 1s;
+-moz-animation-duration: 1s;
+-o-animation-duration: 1s;
+animation-duration: 1s;
+}
+```
+
+If you want to assign the timing to a specific animation, you can use that code (use 2 class):
+```css
+.magictime.magic {
+-webkit-animation-duration: 10s;
+-moz-animation-duration: 10s;
+-o-animation-duration: 10s;
+animation-duration: 10s;
+}
+```

data/lib/magic-sass-rails.rb

@@ -0,0 +1,6 @@
+require "magic-sass-rails/version"
+
+module MagicSassRails
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/magic-sass-rails/version.rb

@@ -0,0 +1,3 @@
+module MagicSassRails
+  VERSION = "0.0.2"
+end

data/vendor/assets/stylesheets/_magic.scss

@@ -0,0 +1,2029 @@
+@import "components/_animations";
+
+$experimental-support-for-khtml: false;
+$default-duration: 1s;
+
+body {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+/*
+This is a sample code on hover with jQuery, first you include the class "magictime" and after your desired animation.
+```js
+$('.yourdiv').hover(function () {
+  $(this).addClass('magictime puffIn');
+});
+```
+*/
+.magictime {
+  @include animation-duration($default-duration);
+  @include animation-fill-mode(both);
+}
+
+/*
+## magic: Provides a magic effect
+```js
+$('.yourdiv').hover(function () {
+  $(this).addClass('magictime magic');
+});
+```
+*/
+@include keyframes(magic) {
+  from {
+    opacity: 1;
+    @include transform-origin(100% 200%);
+    @include transform( scale(1, 1), rotate(0deg) );
+  }
+  to {
+    opacity: 0;
+    @include transform-origin(200% 500%);
+    @include scale(0, 0); @include rotate(270deg);
+  }
+}
+.magic { @include experimental(animation-name, magic); }
+
+@include keyframes(openDownLeft) {
+  from {
+    @include transform-origin(bottom left);
+    @include rotate(0deg);
+    @include experimental(animation-timing-function, ease-out);
+  }
+  to {
+    @include transform-origin(bottom left);
+    @include rotate(-110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+}
+.openDownLeft { @include experimental(animation-name, openDownLeft); }
+
+@include keyframes(openDownRight) {
+  from {
+    @include transform-origin(bottom right);
+    @include rotate(0deg);
+    @include animation-timing-function(ease-out);
+  }
+  to {
+    @include transform-origin(bottom right);
+    @include rotate(110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+}
+.openDownRight { @include experimental(animation-name, openDownRight); }
+
+@include keyframes(openUpLeft) {
+  from {
+    @include transform-origin(top left);
+    @include rotate(0deg);
+    @include animation-timing-function(ease-out);
+  }
+  to {
+    @include transform-origin(top left);
+    @include rotate(110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+}
+.openUpLeft { @include experimental(animation-name, openUpLeft); }
+
+@include keyframes(openUpRight) {
+  from {
+    @include transform-origin(top right);
+    @include rotate(0deg);
+    @include animation-timing-function(ease-out);
+  }
+  to {
+    @include transform-origin(top right);
+    @include rotate(-110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+}
+.openUpRight { @include experimental(animation-name, openUpRight); }
+
+@include keyframes(openDownLeftRetourn) {
+  from {
+    @include transform-origin(bottom left);
+    @include rotate(-110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+  to {
+    @include transform-origin(bottom left);
+    @include rotate(0deg);
+    @include experimental(animation-timing-function, ease-out);
+  }
+}
+.openDownLeftRetourn { @include experimental(animation-name, openDownLeftRetourn); }
+
+@include keyframes(openDownRightRetourn) {
+  from {
+    @include transform-origin(bottom right);
+    @include rotate(110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+  to {
+    @include transform-origin(bottom right);
+    @include rotate(0deg);
+    @include experimental(animation-timing-function, ease-out);
+  }
+}
+.openDownRightRetourn { @include experimental(animation-name, openDownRightRetourn); }
+
+@include keyframes(openUpLeftRetourn) {
+  from {
+    @include transform-origin(top left);
+    @include rotate(110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+  to {
+    @include transform-origin(top left);
+    @include rotate(0deg);
+    @include experimental(animation-timing-function, ease-out);
+  }
+}
+.openUpLeftRetourn { @include experimental(animation-name, openUpLeftRetourn); }
+
+@include keyframes(openUpRightRetourn) {
+  from {
+    @include transform-origin(top right);
+    @include rotate(-110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+  to {
+    @include transform-origin(top right);
+    @include rotate(0deg);
+    @include experimental(animation-timing-function, ease-out);
+  }
+}
+.openUpRightRetourn { @include experimental(animation-name, openUpRightRetourn); }
+
+@include keyframes(openDownLeftOut) {
+  from {
+    opacity: 1;
+    @include transform-origin(bottom left);
+    @include rotate(0deg);
+    @include experimental(animation-timing-function, ease-out);
+  }
+  to {
+    opacity: 0;
+    @include transform-origin(bottom left);
+    @include rotate(-110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+}
+.openDownLeftOut { @include experimental(animation-name, openDownLeftOut); }
+
+@include keyframes(openUpRightOut) {
+  from {
+    opacity: 1;
+    @include transform-origin(bottom right);
+    @include rotate(0deg);
+    @include experimental(animation-timing-function, ease-out);
+  }
+  to {
+    opacity: 0;
+    @include transform-origin(bottom right);
+    @include rotate(110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+}
+.openUpRightOut { @include experimental(animation-name, openUpRightOut); }
+
+@include keyframes(openUpLeftOut) {
+  from {
+    opacity: 1;
+    @include transform-origin(top left);
+    @include rotate(0deg);
+    @include experimental(animation-timing-function, ease-out);
+  }
+  to {
+    opacity: 0;
+    @include transform-origin(top left);
+    @include rotate(110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+}
+.openUpLeftOut { @include experimental(animation-name, openUpLeftOut); }
+
+@include keyframes(openUpRightOut) {
+  from {
+    opacity: 1;
+    @include transform-origin(top right);
+    @include rotate(0deg);
+    @include experimental(animation-timing-function, ease-out);
+  }
+  to {
+    opacity: 0;
+    @include transform-origin(top right);
+    @include rotate(-110deg);
+    @include experimental(animation-timing-function, ease-in-out);
+  }
+}
+.openUpRightOut { @include experimental(animation-name, openUpRightOut); }
+
+@include keyframes(perspectiveDown) {
+  from {
+    @include transform-origin(0 100%);
+    @include perspective(800px);
+    @include rotateX(0deg);
+  }
+  to {
+    @include transform-origin(0 100%);
+    @include perspective(800px);
+    @include rotateX(-180deg);
+  }
+}
+.perspectiveDown { @include experimental(animation-name, perspectiveDown); }
+
+@include keyframes(perspectiveLeft) {
+  from {
+    @include transform-origin(0 0);
+    @include perspective(800px);
+    @include rotateY(0deg);
+  }
+  to {
+    @include transform-origin(0 0);
+    @include perspective(800px);
+    @include rotateY(-180deg);
+  }
+}
+.perspectiveLeft { @include experimental(animation-name, perspectiveLeft); }
+
+@include keyframes(perspectiveRight) {
+  from {
+    @include transform-origin(0 100%);
+    @include perspective(800px);
+    @include rotateY(0deg);
+  }
+  to {
+    @include transform-origin(0 100%);
+    @include perspective(800px);
+    @include rotateY(-180deg);
+  }
+}
+.perspectiveRight { @include experimental(animation-name, perspectiveRight); }
+
+@include keyframes(perspectiveUp) {
+  from {
+    @include transform-origin(0 0);
+    @include perspective(800px);
+    @include rotateX(0deg);
+  }
+  to {
+    @include transform-origin(0 0);
+    @include perspective(800px);
+    @include rotateX(180deg);
+  }
+}
+.perspectiveUp { @include experimental(animation-name, perspectiveUp); }
+
+@include keyframes(perspectiveDownRetourn) {
+  from {
+    @include transform-origin(0 100%);
+    @include perspective(800px);
+    @include rotateX(-180deg);
+  }
+  to {
+    @include transform-origin(0 100%);
+    @include perspective(800px);
+    @include rotateX(0deg);
+  }
+}
+.perspectiveDownRetourn { @include experimental(animation-name, perspectiveDownRetourn); }
+
+@include keyframes(perspectiveLeftRetourn) {
+  from {
+    @include transform-origin(0 0);
+    @include perspective(800px);
+    @include rotateY(-180deg);
+  }
+  to {
+    @include transform-origin(0 0);
+    @include perspective(800px);
+    @include rotateY(0deg);
+  }
+}
+.perspectiveLeftRetourn { @include experimental(animation-name, perspectiveLeftRetourn); }
+
+@include keyframes(perspectiveRightRetourn) {
+  from {
+    @include transform-origin(100% 0);
+    @include perspective(800px);
+    @include rotateY(180deg);
+  }
+  to {
+    @include transform-origin(100% 0);
+    @include perspective(800px);
+    @include rotateY(0deg);
+  }
+}
+.perspectiveRightRetourn { @include experimental(animation-name, perspectiveRightRetourn); }
+
+@include keyframes(perspectiveUpRetourn) {
+  from {
+    @include transform-origin(0 0);
+    @include perspective(800px);
+    @include rotateX(180deg);
+  }
+  to {
+    @include transform-origin(0 0);
+    @include perspective(800px);
+    @include rotateX(0deg);
+  }
+}
+.perspectiveUpRetourn { @include experimental(animation-name, perspectiveUpRetourn); }
+
+@include keyframes(puffIn) {
+  from {
+    opacity: 0;
+    @include transform-origin(50% 50%);
+    @include scale(2, 2);
+    @include filter(blur(2px));
+  }
+  to {
+    opacity: 1;
+    @include transform-origin(50% 50%);
+    @include scale(1, 1);
+  }
+}
+.puffIn { @include experimental(animation-name, puffIn); }
+
+@include keyframes(puffOut) {
+  from {
+    @include transform-origin(50% 50%);
+    @include scale(1, 1);
+  }
+  to {
+    @include transform-origin(50% 50%);
+    @include scale(2, 2);
+    @include filter(blur(2px));
+  }
+}
+.puffOut { @include experimental(animation-name, puffOut); }
+
+@include keyframes(rotateDown) {
+  from {
+    @include transform-origin(0 0);
+    @include perspective(800px);
+    @include rotateX(0deg);
+    @include translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 0;
+    @include transform-origin(50% 100%);
+
+  }
+}
+.rotateDown { @include experimental(animation-name, rotateDown); }
+
+@-webkit-keyframes rotateDown {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: perspective(800px) rotateX(0deg) translate3d(0, 0, 0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 100%;
+    -webkit-transform: perspective(800px) rotateX(-180deg) translate3d(0, 0, 300px);
+  }
+}
+
+
+@-moz-keyframes rotateDown {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform-origin: 50% 100%;
+    -moz-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
+  }
+}
+
+
+@-o-keyframes rotateDown {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: perspective(800px) rotateX(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    -o-transform-origin: 50% 100%;
+    -o-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
+  }
+}
+
+
+@keyframes rotateDown {
+  0% {
+    transform-origin: 0 0;
+    transform: perspective(800px) rotateX(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: perspective(800px) rotateX(-180deg) translateZ(300px);
+  }
+}
+
+
+.rotateDown {
+  -webkit-backface-visibility: visible !important;
+  -moz-backface-visibility: visible !important;
+  -o-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: rotateDown;
+  -moz-animation-name: rotateDown;
+  -o-animation-name: rotateDown;
+  animation-name: rotateDown;
+}
+
+@-webkit-keyframes rotateLeft {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0, 0, 0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 0;
+    -webkit-transform: perspective(800px) rotateY(180deg) translate3d(0, 0, 300px);
+  }
+}
+
+
+@-moz-keyframes rotateLeft {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: perspective(800px) rotateY(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform-origin: 50% 0;
+    -moz-transform: perspective(800px) rotateY(180deg) translateZ(300px);
+  }
+}
+
+
+@-o-keyframes rotateLeft {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: perspective(800px) rotateY(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    -o-transform-origin: 50% 0;
+    -o-transform: perspective(800px) rotateY(180deg) translateZ(300px);
+  }
+}
+
+
+@keyframes rotateLeft {
+  0% {
+    transform-origin: 0 0;
+    transform: perspective(800px) rotateY(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 0;
+    transform: perspective(800px) rotateY(180deg) translateZ(300px);
+  }
+}
+
+
+.rotateLeft {
+  -webkit-backface-visibility: visible !important;
+  -moz-backface-visibility: visible !important;
+  -o-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: rotateLeft;
+  -moz-animation-name: rotateLeft;
+  -o-animation-name: rotateLeft;
+  animation-name: rotateLeft;
+}
+
+@-webkit-keyframes rotateRight {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0, 0, 0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 0;
+    -webkit-transform: perspective(800px) rotateY(-180deg) translate3d(0, 0, 150px);
+  }
+}
+
+
+@-moz-keyframes rotateRight {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: perspective(800px) rotateY(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform-origin: 50% 0;
+    -moz-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
+  }
+}
+
+
+@-o-keyframes rotateRight {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: perspective(800px) rotateY(0deg) translate3d(0px);
+  }
+  100% {
+    opacity: 0;
+    -o-transform-origin: 50% 0;
+    -o-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
+  }
+}
+
+
+@keyframes rotateRight {
+  0% {
+    transform-origin: 0 0;
+    transform: perspective(800px) rotateY(0deg) translate3d(0px);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 0;
+    transform: perspective(800px) rotateY(-180deg) translateZ(150px);
+  }
+}
+
+
+.rotateRight {
+  -webkit-backface-visibility: visible !important;
+  -moz-backface-visibility: visible !important;
+  -o-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: rotateRight;
+  -moz-animation-name: rotateRight;
+  -o-animation-name: rotateRight;
+  animation-name: rotateRight;
+}
+
+@-webkit-keyframes rotateUp {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: perspective(800px) rotateX(0deg) translate3d(0, 0, 0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 0;
+    -webkit-transform: perspective(800px) rotateX(180deg) translate3d(0, 0, 100px);
+  }
+}
+
+
+@-moz-keyframes rotateUp {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform-origin: 50% 0;
+    -moz-transform: perspective(800px) rotateX(180deg) translateZ(100px);
+  }
+}
+
+
+@-o-keyframes rotateUp {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: perspective(800px) rotateX(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    -o-transform-origin: 50% 0;
+    -o-transform: perspective(800px) rotateX(180deg) translateZ(100px);
+  }
+}
+
+
+@keyframes rotateUp {
+  0% {
+    transform-origin: 0 0;
+    transform: perspective(800px) rotateX(0deg) translateZ(0px);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 0;
+    transform: perspective(800px) rotateX(180deg) translateZ(100px);
+  }
+}
+
+
+.rotateUp {
+  -webkit-backface-visibility: visible !important;
+  -moz-backface-visibility: visible !important;
+  -o-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: rotateUp;
+  -moz-animation-name: rotateUp;
+  -o-animation-name: rotateUp;
+  animation-name: rotateUp;
+}
+
+@-webkit-keyframes slideDown {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateY(0%);
+  }
+  100% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateY(100%);
+  }
+}
+
+
+@-moz-keyframes slideDown {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateY(0%);
+  }
+  100% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateY(100%);
+  }
+}
+
+
+@-o-keyframes slideDown {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateY(0%);
+  }
+  100% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateY(100%);
+  }
+}
+
+
+@-ms-keyframes slideDown {
+  0% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateY(0%);
+  }
+  100% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateY(100%);
+  }
+}
+
+
+@keyframes slideDown {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+  }
+}
+
+
+.slideDown {
+  -webkit-animation-name: slideDown;
+  -moz-animation-name: slideDown;
+  -o-animation-name: slideDown;
+  animation-name: slideDown;
+}
+
+@-webkit-keyframes slideLeft {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateX(0%);
+  }
+  100% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateX(-100%);
+  }
+}
+
+
+@-moz-keyframes slideLeft {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateX(0%);
+  }
+  100% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateX(-100%);
+  }
+}
+
+
+@-o-keyframes slideLeft {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateX(0%);
+  }
+  100% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateX(-100%);
+  }
+}
+
+
+@-ms-keyframes slideLeft {
+  0% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateX(0%);
+  }
+  100% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateX(-100%);
+  }
+}
+
+
+@keyframes slideLeft {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+  }
+}
+
+
+.slideLeft {
+  -webkit-animation-name: slideLeft;
+  -moz-animation-name: slideLeft;
+  -o-animation-name: slideLeft;
+  animation-name: slideLeft;
+}
+
+@-webkit-keyframes slideRight {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateX(0%);
+  }
+  100% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateX(100%);
+  }
+}
+
+
+@-moz-keyframes slideRight {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateX(0%);
+  }
+  100% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateX(100%);
+  }
+}
+
+
+@-o-keyframes slideRight {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateX(0%);
+  }
+  100% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateX(100%);
+  }
+}
+
+
+@-ms-keyframes slideRight {
+  0% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateX(0%);
+  }
+  100% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateX(100%);
+  }
+}
+
+
+@keyframes slideRight {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(100%);
+  }
+}
+
+
+.slideRight {
+  -webkit-animation-name: slideRight;
+  -moz-animation-name: slideRight;
+  -o-animation-name: slideRight;
+  animation-name: slideRight;
+}
+
+@-webkit-keyframes slideUp {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateY(0%);
+  }
+  100% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateY(-100%);
+  }
+}
+
+
+@-moz-keyframes slideUp {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateY(0%);
+  }
+  100% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateY(-100%);
+  }
+}
+
+
+@-o-keyframes slideUp {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateY(0%);
+  }
+  100% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateY(-100%);
+  }
+}
+
+
+@-ms-keyframes slideUp {
+  0% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateY(0%);
+  }
+  100% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateY(-100%);
+  }
+}
+
+
+@keyframes slideUp {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+  }
+}
+
+
+.slideUp {
+  -webkit-animation-name: slideUp;
+  -moz-animation-name: slideUp;
+  -o-animation-name: slideUp;
+  animation-name: slideUp;
+}
+
+@-webkit-keyframes slideDownRetourn {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateY(100%);
+  }
+  100% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateY(0%);
+  }
+}
+
+
+@-moz-keyframes slideDownRetourn {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateY(100%);
+  }
+  100% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateY(0%);
+  }
+}
+
+
+@-o-keyframes slideDownRetourn {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateY(100%);
+  }
+  100% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateY(0%);
+  }
+}
+
+
+@-ms-keyframes slideDownRetourn {
+  0% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateY(100%);
+  }
+  100% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateY(0%);
+  }
+}
+
+
+@keyframes slideDownRetourn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+  }
+}
+
+
+.slideDownRetourn {
+  -webkit-animation-name: slideDownRetourn;
+  -moz-animation-name: slideDownRetourn;
+  -o-animation-name: slideDownRetourn;
+  animation-name: slideDownRetourn;
+}
+
+@-webkit-keyframes slideLeftRetourn {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateX(-100%);
+  }
+  100% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateX(0%);
+  }
+}
+
+
+@-moz-keyframes slideLeftRetourn {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateX(-100%);
+  }
+  100% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateX(0%);
+  }
+}
+
+
+@-o-keyframes slideLeftRetourn {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateX(-100%);
+  }
+  100% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateX(0%);
+  }
+}
+
+
+@-ms-keyframes slideLeftRetourn {
+  0% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateX(-100%);
+  }
+  100% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateX(0%);
+  }
+}
+
+
+@keyframes slideLeftRetourn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+  }
+}
+
+
+.slideLeftRetourn {
+  -webkit-animation-name: slideLeftRetourn;
+  -moz-animation-name: slideLeftRetourn;
+  -o-animation-name: slideLeftRetourn;
+  animation-name: slideLeftRetourn;
+}
+
+@-webkit-keyframes slideRightRetourn {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateX(100%);
+  }
+  100% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateX(0%);
+  }
+}
+
+
+@-moz-keyframes slideRightRetourn {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateX(100%);
+  }
+  100% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateX(0%);
+  }
+}
+
+
+@-o-keyframes slideRightRetourn {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateX(100%);
+  }
+  100% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateX(0%);
+  }
+}
+
+
+@-ms-keyframes slideRightRetourn {
+  0% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateX(100%);
+  }
+  100% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateX(0%);
+  }
+}
+
+
+@keyframes slideRightRetourn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(100%);
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+  }
+}
+
+
+.slideRightRetourn {
+  -webkit-animation-name: slideRightRetourn;
+  -moz-animation-name: slideRightRetourn;
+  -o-animation-name: slideRightRetourn;
+  animation-name: slideRightRetourn;
+}
+
+@-webkit-keyframes slideUpRetourn {
+  0% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateY(-100%);
+  }
+  100% {
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: translateY(0%);
+  }
+}
+
+
+@-moz-keyframes slideUpRetourn {
+  0% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateY(-100%);
+  }
+  100% {
+    -moz-transform-origin: 0 0;
+    -moz-transform: translateY(0%);
+  }
+}
+
+
+@-o-keyframes slideUpRetourn {
+  0% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateY(-100%);
+  }
+  100% {
+    -o-transform-origin: 0 0;
+    -o-transform: translateY(0%);
+  }
+}
+
+
+@-ms-keyframes slideUpRetourn {
+  0% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateY(-100%);
+  }
+  100% {
+    -ms-transform-origin: 0 0;
+    -ms-transform: translateY(0%);
+  }
+}
+
+
+@keyframes slideUpRetourn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+  }
+}
+
+
+.slideUpRetourn {
+  -webkit-animation-name: slideUpRetourn;
+  -moz-animation-name: slideUpRetourn;
+  -o-animation-name: slideUpRetourn;
+  animation-name: slideUpRetourn;
+}
+
+@-webkit-keyframes swap {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0 100%;
+    -webkit-transform: scale(0, 0) translate(-700px, 0px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 100% 100%;
+    -webkit-transform: scale(1, 1) translate(0px, 0px);
+  }
+}
+
+
+@-moz-keyframes swap {
+  0% {
+    opacity: 0;
+    -moz-transform-origin: 0 100%;
+    -moz-transform: scale(0, 0) translate(-700px, 0px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform-origin: 100% 100%;
+    -moz-transform: scale(1, 1) translate(0px, 0px);
+  }
+}
+
+
+@-o-keyframes swap {
+  0% {
+    opacity: 0;
+    -o-transform-origin: 0 100%;
+    -o-transform: scale(0, 0) translate(-700px, 0px);
+  }
+  100% {
+    opacity: 1;
+    -o-transform-origin: 100% 100%;
+    -o-transform: scale(1, 1) translate(0px, 0px);
+  }
+}
+
+
+@keyframes swap {
+  0% {
+    opacity: 0;
+    transform-origin: 0 100%;
+    transform: scale(0, 0) translate(-700px, 0px);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scale(1, 1) translate(0px, 0px);
+  }
+}
+
+
+.swap {
+  -webkit-animation-name: swap;
+  -moz-animation-name: swap;
+  -o-animation-name: swap;
+  animation-name: swap;
+}
+
+@-webkit-keyframes twisterInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0 100%;
+    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
+  }
+  30% {
+    -webkit-transform-origin: 0 100%;
+    -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 100% 100%;
+    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
+  }
+}
+
+
+@-moz-keyframes twisterInDown {
+  0% {
+    opacity: 0;
+    -moz-transform-origin: 0 100%;
+    -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%);
+  }
+  30% {
+    -moz-transform-origin: 0 100%;
+    -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform-origin: 100% 100%;
+    -moz-transform: scale(1, 1) rotate(0deg) translateY(0%);
+  }
+}
+
+
+@-o-keyframes twisterInDown {
+  0% {
+    opacity: 0;
+    -o-transform-origin: 0 100%;
+    -o-transform: scale(0, 0) rotate(360deg) translateY(-100%);
+  }
+  30% {
+    -o-transform-origin: 0 100%;
+    -o-transform: scale(0, 0) rotate(360deg) translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    -o-transform-origin: 100% 100%;
+    -o-transform: scale(1, 1) rotate(0deg) translateY(0%);
+  }
+}
+
+
+@keyframes twisterInDown {
+  0% {
+    opacity: 0;
+    transform-origin: 0 100%;
+    transform: scale(0, 0) rotate(360deg) translateY(-100%);
+  }
+  30% {
+    transform-origin: 0 100%;
+    transform: scale(0, 0) rotate(360deg) translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scale(1, 1) rotate(0deg) translateY(0%);
+  }
+}
+
+
+.twisterInDown {
+  -webkit-animation-name: twisterInDown;
+  -moz-animation-name: twisterInDown;
+  -o-animation-name: twisterInDown;
+  animation-name: twisterInDown;
+}
+
+@-webkit-keyframes twisterInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 100% 0;
+    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
+  }
+  30% {
+    -webkit-transform-origin: 100% 0;
+    -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 0 0;
+    -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
+  }
+}
+
+
+@-moz-keyframes twisterInUp {
+  0% {
+    opacity: 0;
+    -moz-transform-origin: 100% 0;
+    -moz-transform: scale(0, 0) rotate(360deg) translateY(100%);
+  }
+  30% {
+    -moz-transform-origin: 100% 0;
+    -moz-transform: scale(0, 0) rotate(360deg) translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform-origin: 0 0;
+    -moz-transform: scale(1, 1) rotate(0deg) translateY(0);
+  }
+}
+
+
+@-o-keyframes twisterInUp {
+  0% {
+    opacity: 0;
+    -o-transform-origin: 100% 0;
+    -o-transform: scale(0, 0) rotate(360deg) translateY(100%);
+  }
+  30% {
+    -o-transform-origin: 100% 0;
+    -o-transform: scale(0, 0) rotate(360deg) translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    -o-transform-origin: 0 0;
+    -o-transform: scale(1, 1) rotate(0deg) translateY(0);
+  }
+}
+
+
+@keyframes twisterInUp {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 0;
+    transform: scale(0, 0) rotate(360deg) translateY(100%);
+  }
+  30% {
+    transform-origin: 100% 0;
+    transform: scale(0, 0) rotate(360deg) translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0 0;
+    transform: scale(1, 1) rotate(0deg) translateY(0);
+  }
+}
+
+
+.twisterInUp {
+  -webkit-animation-name: twisterInUp;
+  -moz-animation-name: twisterInUp;
+  -o-animation-name: twisterInUp;
+  animation-name: twisterInUp;
+}
+
+@-webkit-keyframes vanishIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(2, 2);
+    -webkit-filter: blur(90px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+  }
+}
+
+
+@-moz-keyframes vanishIn {
+  0% {
+    opacity: 0;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(2, 2);
+    filter: blur(90px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(1, 1);
+  }
+}
+
+
+@-o-keyframes vanishIn {
+  0% {
+    opacity: 0;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(2, 2);
+    -o-filter: blur(90px);
+  }
+  100% {
+    opacity: 1;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(1, 1);
+  }
+}
+
+
+@keyframes vanishIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(2, 2);
+    filter: blur(90px);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+
+.vanishIn {
+  -webkit-animation-name: vanishIn;
+  -moz-animation-name: vanishIn;
+  -o-animation-name: vanishIn;
+  animation-name: vanishIn;
+}
+
+@-webkit-keyframes vanishOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(2, 2);
+    -webkit-filter: blur(20px);
+  }
+}
+
+
+@-moz-keyframes vanishOut {
+  0% {
+    opacity: 1;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(2, 2);
+    filter: blur(20px);
+  }
+}
+
+
+@-o-keyframes vanishOut {
+  0% {
+    opacity: 1;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(2, 2);
+    -o-filter: blur(20px);
+  }
+}
+
+
+@keyframes vanishOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(2, 2);
+    filter: blur(20px);
+  }
+}
+
+
+.vanishOut {
+  -webkit-animation-name: vanishOut;
+  -moz-animation-name: vanishOut;
+  -o-animation-name: vanishOut;
+  animation-name: vanishOut;
+}
+
+@-webkit-keyframes swashOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+  }
+  80% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(0.9, 0.9);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+  }
+}
+
+
+@-moz-keyframes swashOut {
+  0% {
+    opacity: 1;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(1, 1);
+  }
+  80% {
+    opacity: 1;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(0.9, 0.9);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(0, 0);
+  }
+}
+
+
+@-o-keyframes swashOut {
+  0% {
+    opacity: 1;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(1, 1);
+  }
+  80% {
+    opacity: 1;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(0.9, 0.9);
+  }
+  100% {
+    opacity: 0;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(0, 0);
+  }
+}
+
+
+@keyframes swashOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+  80% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(0.9, 0.9);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+}
+
+
+.swashOut {
+  -webkit-animation-name: swashOut;
+  -moz-animation-name: swashOut;
+  -o-animation-name: swashOut;
+  animation-name: swashOut;
+}
+
+@-webkit-keyframes swashIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+  }
+  90% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(0.9, 0.9);
+  }
+  100% {
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+  }
+}
+
+
+@-moz-keyframes swashIn {
+  0% {
+    opacity: 0;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(0, 0);
+  }
+  90% {
+    opacity: 1;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(0.9, 0.9);
+  }
+  100% {
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(1, 1);
+  }
+}
+
+
+@-o-keyframes swashIn {
+  0% {
+    opacity: 0;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(0, 0);
+  }
+  90% {
+    opacity: 1;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(0.9, 0.9);
+  }
+  100% {
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(1, 1);
+  }
+}
+
+
+@keyframes swashIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+  90% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(0.9, 0.9);
+  }
+  100% {
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+
+.swashIn {
+  -webkit-animation-name: swashIn;
+  -moz-animation-name: swashIn;
+  -o-animation-name: swashIn;
+  animation-name: swashIn;
+}
+
+@-webkit-keyframes foolishOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1) rotate(360deg);
+  }
+  20% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  40% {
+    opacity: 1;
+    -webkit-transform-origin: 100% 0%;
+    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  60% {
+    opacity: 1;
+    -webkit-transform-origin: 100%% 100%;
+    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  80% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 100%;
+    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0) rotate(0deg);
+  }
+}
+
+
+@-moz-keyframes foolishOut {
+  0% {
+    opacity: 1;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(1, 1) rotate(360deg);
+  }
+  20% {
+    opacity: 1;
+    -moz-transform-origin: 0% 0%;
+    -moz-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  40% {
+    opacity: 1;
+    -moz-transform-origin: 100% 0%;
+    -moz-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  60% {
+    opacity: 1;
+    -moz-transform-origin: 100%% 100%;
+    -moz-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  80% {
+    opacity: 1;
+    -moz-transform-origin: 0% 100%;
+    -moz-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(0, 0) rotate(0deg);
+  }
+}
+
+
+@-o-keyframes foolishOut {
+  0% {
+    opacity: 1;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(1, 1) rotate(360deg);
+  }
+  20% {
+    opacity: 1;
+    -o-transform-origin: 0% 0%;
+    -o-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  40% {
+    opacity: 1;
+    -o-transform-origin: 100% 0%;
+    -o-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  60% {
+    opacity: 1;
+    -o-transform-origin: 100%% 100%;
+    -o-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  80% {
+    opacity: 1;
+    -o-transform-origin: 0% 100%;
+    -o-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(0, 0) rotate(0deg);
+  }
+}
+
+
+@keyframes foolishOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1) rotate(360deg);
+  }
+  20% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  40% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  60% {
+    opacity: 1;
+    transform-origin: 100%% 100%;
+    transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  80% {
+    opacity: 1;
+    transform-origin: 0% 100%;
+    transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0) rotate(0deg);
+  }
+}
+
+
+.foolishOut {
+  -webkit-animation-name: foolishOut;
+  -moz-animation-name: foolishOut;
+  -o-animation-name: foolishOut;
+  animation-name: foolishOut;
+}
+
+@-webkit-keyframes foolishIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0) rotate(360deg);
+  }
+  20% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 100%;
+    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  40% {
+    opacity: 1;
+    -webkit-transform-origin: 100% 100%;
+    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  60% {
+    opacity: 1;
+    -webkit-transform-origin: 100%% 0%;
+    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  80% {
+    opacity: 1;
+    -webkit-transform-origin: 0% 0%;
+    -webkit-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1) rotate(0deg);
+  }
+}
+
+
+@-moz-keyframes foolishIn {
+  0% {
+    opacity: 0;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(0, 0) rotate(360deg);
+  }
+  20% {
+    opacity: 1;
+    -moz-transform-origin: 0% 100%;
+    -moz-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  40% {
+    opacity: 1;
+    -moz-transform-origin: 100% 100%;
+    -moz-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  60% {
+    opacity: 1;
+    -moz-transform-origin: 100%% 0%;
+    -moz-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  80% {
+    opacity: 1;
+    -moz-transform-origin: 0% 0%;
+    -moz-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(1, 1) rotate(0deg);
+  }
+}
+
+
+@-o-keyframes foolishIn {
+  0% {
+    opacity: 0;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(0, 0) rotate(360deg);
+  }
+  20% {
+    opacity: 1;
+    -o-transform-origin: 0% 100%;
+    -o-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  40% {
+    opacity: 1;
+    -o-transform-origin: 100% 100%;
+    -o-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  60% {
+    opacity: 1;
+    -o-transform-origin: 100%% 0%;
+    -o-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  80% {
+    opacity: 1;
+    -o-transform-origin: 0% 0%;
+    -o-transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  100% {
+    opacity: 1;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(1, 1) rotate(0deg);
+  }
+}
+
+
+@keyframes foolishIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0) rotate(360deg);
+  }
+  20% {
+    opacity: 1;
+    transform-origin: 0% 100%;
+    transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  40% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  60% {
+    opacity: 1;
+    transform-origin: 100%% 0%;
+    transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  80% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scale(0.5, 0.5) rotate(0deg);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1) rotate(0deg);
+  }
+}
+
+
+.foolishIn {
+  -webkit-animation-name: foolishIn;
+  -moz-animation-name: foolishIn;
+  -o-animation-name: foolishIn;
+  animation-name: foolishIn;
+}
+
+@-webkit-keyframes holeOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1) rotateY(0deg);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0) rotateY(180deg);
+  }
+}
+
+
+@-moz-keyframes holeOut {
+  0% {
+    opacity: 1;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(1, 1) rotateY(0deg);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform-origin: 50% 50%;
+    -moz-transform: scale(0, 0) rotateY(180deg);
+  }
+}
+
+
+@-o-keyframes holeOut {
+  0% {
+    opacity: 1;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(1, 1) rotateY(0deg);
+  }
+  100% {
+    opacity: 0;
+    -o-transform-origin: 50% 50%;
+    -o-transform: scale(0, 0) rotateY(180deg);
+  }
+}
+
+
+@keyframes holeOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1) rotateY(0deg);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0) rotateY(180deg);
+  }
+}
+
+
+.holeOut {
+  -webkit-animation-name: holeOut;
+  -moz-animation-name: holeOut;
+  -o-animation-name: holeOut;
+  animation-name: holeOut;
+}