Difference between revisions of "Template:UIUC Illinois STYLE"

Line 1: Line 1:
−
 
 
<html>
 
<html>
 +
<style>
  
−
  <style>
+
/*
−
/*!
+
==============================================
−
* animate.css -http://daneden.me/animate
+
CSS3 ANIMATION CHEAT SHEET
−
* Version - 3.5.2
+
==============================================
−
* Licensed under the MIT license - http://opensource.org/licenses/MIT
+
−
*
+
−
* Copyright (c) 2017 Daniel Eden
+
−
*/
+
  
−
.animated {
+
Made by Justin Aguilar
−
  animation-duration: 1s;
+
−
  animation-fill-mode: both;
+
−
}
+
  
−
.animated.infinite {
+
www.justinaguilar.com/animations/
−
  animation-iteration-count: infinite;
+
−
}
+
  
−
.animated.hinge {
+
Questions, comments, concerns, love letters:
−
  animation-duration: 2s;
+
justin@justinaguilar.com
−
}
+
==============================================
 +
*/
  
−
.animated.flipOutX,
+
/*
−
.animated.flipOutY,
+
==============================================
−
.animated.bounceIn,
+
slideDown
−
.animated.bounceOut {
+
==============================================
−
  animation-duration: .75s;
+
*/
−
}
+
  
−
@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% {
+
.slideDown{
−
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
animation-name: slideDown;
−
    transform: translate3d(0, -30px, 0);
+
-webkit-animation-name: slideDown;
−
  }
+
  
−
  70% {
+
animation-duration: 1s;
−
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
-webkit-animation-duration: 1s;
−
    transform: translate3d(0, -15px, 0);
+
−
  }
+
  
−
  90% {
+
animation-timing-function: ease;
−
    transform: translate3d(0,-4px,0);
+
-webkit-animation-timing-function: ease;
−
  }
+
−
}
+
  
−
.bounce {
+
visibility: visible !important;
−
  animation-name: bounce;
+
−
  transform-origin: center bottom;
+
 
}
 
}
  
−
@keyframes flash {
+
@keyframes slideDown {
−
  from, 50%, to {
+
0% {
−
    opacity: 1;
+
transform: translateY(-100%);
−
  }
+
}
−
 
+
50%{
−
  25%, 75% {
+
transform: translateY(8%);
−
    opacity: 0;
+
}
−
  }
+
65%{
 +
transform: translateY(-4%);
 +
}
 +
80%{
 +
transform: translateY(4%);
 +
}
 +
95%{
 +
transform: translateY(-2%);
 +
}
 +
100% {
 +
transform: translateY(0%);
 +
}
 
}
 
}
  
−
.flash {
+
@-webkit-keyframes slideDown {
−
  animation-name: flash;
+
0% {
 +
-webkit-transform: translateY(-100%);
 +
}
 +
50%{
 +
-webkit-transform: translateY(8%);
 +
}
 +
65%{
 +
-webkit-transform: translateY(-4%);
 +
}
 +
80%{
 +
-webkit-transform: translateY(4%);
 +
}
 +
95%{
 +
-webkit-transform: translateY(-2%);
 +
}
 +
100% {
 +
-webkit-transform: translateY(0%);
 +
}
 
}
 
}
  
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
/*
 +
==============================================
 +
slideUp
 +
==============================================
 +
*/
  
  
−
@keyframes pulse {
+
.slideUp{
−
  from {
+
animation-name: slideUp;
−
    transform: scale3d(1, 1, 1);
+
-webkit-animation-name: slideUp;
−
  }
+
  
−
  50% {
+
animation-duration: 1s;
−
    transform: scale3d(1.05, 1.05, 1.05);
+
-webkit-animation-duration: 1s;
−
  }
+
  
−
  to {
+
animation-timing-function: ease;
−
    transform: scale3d(1, 1, 1);
+
-webkit-animation-timing-function: ease;
−
  }
+
−
}
+
  
−
.pulse {
+
visibility: visible !important;
−
  animation-name: pulse;
+
 
}
 
}
  
−
@keyframes rubberBand {
+
@keyframes slideUp {
−
  from {
+
0% {
−
    transform: scale3d(1, 1, 1);
+
transform: translateY(100%);
−
  }
+
}
−
 
+
50%{
−
  30% {
+
transform: translateY(-8%);
−
    transform: scale3d(1.25, 0.75, 1);
+
}
−
  }
+
65%{
−
 
+
transform: translateY(4%);
−
  40% {
+
}
−
    transform: scale3d(0.75, 1.25, 1);
+
80%{
−
  }
+
transform: translateY(-4%);
−
 
+
}
−
  50% {
+
95%{
−
    transform: scale3d(1.15, 0.85, 1);
+
transform: translateY(2%);
−
  }
+
}
−
 
+
100% {
−
  65% {
+
transform: translateY(0%);
−
    transform: scale3d(.95, 1.05, 1);
+
}
−
  }
+
−
 
+
−
  75% {
+
−
    transform: scale3d(1.05, .95, 1);
+
−
  }
+
−
 
+
−
  to {
+
−
    transform: scale3d(1, 1, 1);
+
−
  }
+
 
}
 
}
  
−
.rubberBand {
+
@-webkit-keyframes slideUp {
−
  animation-name: rubberBand;
+
0% {
 +
-webkit-transform: translateY(100%);
 +
}
 +
50%{
 +
-webkit-transform: translateY(-8%);
 +
}
 +
65%{
 +
-webkit-transform: translateY(4%);
 +
}
 +
80%{
 +
-webkit-transform: translateY(-4%);
 +
}
 +
95%{
 +
-webkit-transform: translateY(2%);
 +
}
 +
100% {
 +
-webkit-transform: translateY(0%);
 +
}
 
}
 
}
  
−
@keyframes shake {
+
/*
−
  from, to {
+
==============================================
−
    transform: translate3d(0, 0, 0);
+
slideLeft
−
  }
+
==============================================
 +
*/
  
−
  10%, 30%, 50%, 70%, 90% {
 
−
    transform: translate3d(-10px, 0, 0);
 
−
  }
 
  
−
  20%, 40%, 60%, 80% {
+
.slideLeft{
−
    transform: translate3d(10px, 0, 0);
+
animation-name: slideLeft;
−
  }
+
-webkit-animation-name: slideLeft;
−
}
+
  
−
.shake {
+
animation-duration: 1s;
−
  animation-name: shake;
+
-webkit-animation-duration: 1s;
−
}
+
  
−
@keyframes headShake {
+
animation-timing-function: ease-in-out;
−
  0% {
+
-webkit-animation-timing-function: ease-in-out;
−
    transform: translateX(0);
+
−
  }
+
  
−
  6.5% {
+
visibility: visible !important;
−
    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 {
+
@keyframes slideLeft {
−
  animation-timing-function: ease-in-out;
+
0% {
−
  animation-name: headShake;
+
transform: translateX(150%);
 +
}
 +
50%{
 +
transform: translateX(-8%);
 +
}
 +
65%{
 +
transform: translateX(4%);
 +
}
 +
80%{
 +
transform: translateX(-4%);
 +
}
 +
95%{
 +
transform: translateX(2%);
 +
}
 +
100% {
 +
transform: translateX(0%);
 +
}
 
}
 
}
  
−
@keyframes swing {
+
@-webkit-keyframes slideLeft {
−
  20% {
+
0% {
−
    transform: rotate3d(0, 0, 1, 15deg);
+
-webkit-transform: translateX(150%);
−
  }
+
}
−
 
+
50%{
−
  40% {
+
-webkit-transform: translateX(-8%);
−
    transform: rotate3d(0, 0, 1, -10deg);
+
}
−
  }
+
65%{
−
 
+
-webkit-transform: translateX(4%);
−
  60% {
+
}
−
    transform: rotate3d(0, 0, 1, 5deg);
+
80%{
−
  }
+
-webkit-transform: translateX(-4%);
−
 
+
}
−
  80% {
+
95%{
−
    transform: rotate3d(0, 0, 1, -5deg);
+
-webkit-transform: translateX(2%);
−
  }
+
}
−
 
+
100% {
−
  to {
+
-webkit-transform: translateX(0%);
−
    transform: rotate3d(0, 0, 1, 0deg);
+
}
−
  }
+
 
}
 
}
  
−
.swing {
+
/*
−
  transform-origin: top center;
+
==============================================
−
  animation-name: swing;
+
slideRight
−
}
+
==============================================
 +
*/
  
−
@keyframes tada {
 
−
  from {
 
−
    transform: scale3d(1, 1, 1);
 
−
  }
 
  
−
  10%, 20% {
+
.slideRight{
−
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+
animation-name: slideRight;
−
  }
+
-webkit-animation-name: slideRight;
  
−
  30%, 50%, 70%, 90% {
+
animation-duration: 1s;
−
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+
-webkit-animation-duration: 1s;
−
  }
+
  
−
  40%, 60%, 80% {
+
animation-timing-function: ease-in-out;
−
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+
-webkit-animation-timing-function: ease-in-out;
−
  }
+
  
−
  to {
+
visibility: visible !important;
−
    transform: scale3d(1, 1, 1);
+
−
  }
+
 
}
 
}
  
−
.tada {
+
@keyframes slideRight {
−
  animation-name: tada;
+
0% {
 +
transform: translateX(-150%);
 +
}
 +
50%{
 +
transform: translateX(8%);
 +
}
 +
65%{
 +
transform: translateX(-4%);
 +
}
 +
80%{
 +
transform: translateX(4%);
 +
}
 +
95%{
 +
transform: translateX(-2%);
 +
}
 +
100% {
 +
transform: translateX(0%);
 +
}
 
}
 
}
  
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
@-webkit-keyframes slideRight {
−
 
+
0% {
−
@keyframes wobble {
+
-webkit-transform: translateX(-150%);
−
  from {
+
}
−
    transform: none;
+
50%{
−
  }
+
-webkit-transform: translateX(8%);
−
 
+
}
−
  15% {
+
65%{
−
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+
-webkit-transform: translateX(-4%);
−
  }
+
}
−
 
+
80%{
−
  30% {
+
-webkit-transform: translateX(4%);
−
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+
}
−
  }
+
95%{
−
 
+
-webkit-transform: translateX(-2%);
−
  45% {
+
}
−
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+
100% {
−
  }
+
-webkit-transform: translateX(0%);
−
 
+
}
−
  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;
+
==============================================
−
}
+
slideExpandUp
 +
==============================================
 +
*/
  
−
@keyframes jello {
 
−
  from, 11.1%, to {
 
−
    transform: none;
 
−
  }
 
  
−
  22.2% {
+
.slideExpandUp{
−
    transform: skewX(-12.5deg) skewY(-12.5deg);
+
animation-name: slideExpandUp;
−
  }
+
-webkit-animation-name: slideExpandUp;
  
−
  33.3% {
+
animation-duration: 1.6s;
−
    transform: skewX(6.25deg) skewY(6.25deg);
+
-webkit-animation-duration: 1.6s;
−
  }
+
  
−
  44.4% {
+
animation-timing-function: ease-out;
−
    transform: skewX(-3.125deg) skewY(-3.125deg);
+
-webkit-animation-timing-function: ease -out;
−
  }
+
  
−
  55.5% {
+
visibility: visible !important;
−
    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 {
+
@keyframes slideExpandUp {
−
  animation-name: jello;
+
0% {
−
  transform-origin: center;
+
transform: translateY(100%) scaleX(0.5);
 +
}
 +
30%{
 +
transform: translateY(-8%) scaleX(0.5);
 +
}
 +
40%{
 +
transform: translateY(2%) scaleX(0.5);
 +
}
 +
50%{
 +
transform: translateY(0%) scaleX(1.1);
 +
}
 +
60%{
 +
transform: translateY(0%) scaleX(0.9);
 +
}
 +
70% {
 +
transform: translateY(0%) scaleX(1.05);
 +
}
 +
80%{
 +
transform: translateY(0%) scaleX(0.95);
 +
}
 +
90% {
 +
transform: translateY(0%) scaleX(1.02);
 +
}
 +
100%{
 +
transform: translateY(0%) scaleX(1);
 +
}
 
}
 
}
  
−
@keyframes bounceIn {
+
@-webkit-keyframes slideExpandUp {
−
  from, 20%, 40%, 60%, 80%, to {
+
0% {
−
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
-webkit-transform: translateY(100%) scaleX(0.5);
−
  }
+
}
−
 
+
30%{
−
  0% {
+
-webkit-transform: translateY(-8%) scaleX(0.5);
−
    opacity: 0;
+
}
−
    transform: scale3d(.3, .3, .3);
+
40%{
−
  }
+
-webkit-transform: translateY(2%) scaleX(0.5);
−
 
+
}
−
  20% {
+
50%{
−
    transform: scale3d(1.1, 1.1, 1.1);
+
-webkit-transform: translateY(0%) scaleX(1.1);
−
  }
+
}
−
 
+
60%{
−
  40% {
+
-webkit-transform: translateY(0%) scaleX(0.9);
−
    transform: scale3d(.9, .9, .9);
+
}
−
  }
+
70% {
−
 
+
-webkit-transform: translateY(0%) scaleX(1.05);
−
  60% {
+
}
−
    opacity: 1;
+
80%{
−
    transform: scale3d(1.03, 1.03, 1.03);
+
-webkit-transform: translateY(0%) scaleX(0.95);
−
  }
+
}
−
 
+
90% {
−
  80% {
+
-webkit-transform: translateY(0%) scaleX(1.02);
−
    transform: scale3d(.97, .97, .97);
+
}
−
  }
+
100%{
−
 
+
-webkit-transform: translateY(0%) scaleX(1);
−
  to {
+
}
−
    opacity: 1;
+
−
    transform: scale3d(1, 1, 1);
+
−
  }
+
 
}
 
}
  
−
.bounceIn {
+
/*
−
  animation-name: bounceIn;
+
==============================================
−
}
+
expandUp
 +
==============================================
 +
*/
  
−
@keyframes bounceInDown {
 
−
  from, 60%, 75%, 90%, to {
 
−
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
−
  }
 
  
−
  0% {
+
.expandUp{
−
    opacity: 0;
+
animation-name: expandUp;
−
    transform: translate3d(0, -3000px, 0);
+
-webkit-animation-name: expandUp;
−
  }
+
  
−
  60% {
+
animation-duration: 0.7s;
−
    opacity: 1;
+
-webkit-animation-duration: 0.7s;
−
    transform: translate3d(0, 25px, 0);
+
−
  }
+
  
−
  75% {
+
animation-timing-function: ease;
−
    transform: translate3d(0, -10px, 0);
+
-webkit-animation-timing-function: ease;
−
  }
+
  
−
  90% {
+
visibility: visible !important;
−
    transform: translate3d(0, 5px, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    transform: none;
+
−
  }
+
 
}
 
}
  
−
.bounceInDown {
+
@keyframes expandUp {
−
  animation-name: bounceInDown;
+
0% {
 +
transform: translateY(100%) scale(0.6) scaleY(0.5);
 +
}
 +
60%{
 +
transform: translateY(-7%) scaleY(1.12);
 +
}
 +
75%{
 +
transform: translateY(3%);
 +
}
 +
100% {
 +
transform: translateY(0%) scale(1) scaleY(1);
 +
}
 
}
 
}
  
−
@keyframes bounceInLeft {
+
@-webkit-keyframes expandUp {
−
  from, 60%, 75%, 90%, to {
+
0% {
−
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
−
  }
+
}
−
 
+
60%{
−
  0% {
+
-webkit-transform: translateY(-7%) scaleY(1.12);
−
    opacity: 0;
+
}
−
    transform: translate3d(-3000px, 0, 0);
+
75%{
−
  }
+
-webkit-transform: translateY(3%);
−
 
+
}
−
  60% {
+
100% {
−
    opacity: 1;
+
-webkit-transform: translateY(0%) scale(1) scaleY(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;
+
==============================================
−
}
+
fadeIn
 +
==============================================
 +
*/
  
−
@keyframes bounceInRight {
+
.fadeIn{
−
  from, 60%, 75%, 90%, to {
+
animation-name: fadeIn;
−
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
-webkit-animation-name: fadeIn;
−
  }
+
  
−
  from {
+
animation-duration: 1.5s;
−
    opacity: 0;
+
-webkit-animation-duration: 1.5s;
−
    transform: translate3d(3000px, 0, 0);
+
−
  }
+
  
−
  60% {
+
animation-timing-function: ease-in-out;
−
    opacity: 1;
+
-webkit-animation-timing-function: ease-in-out;
−
    transform: translate3d(-25px, 0, 0);
+
−
  }
+
  
−
  75% {
+
visibility: visible !important;
−
    transform: translate3d(10px, 0, 0);
+
−
  }
+
−
 
+
−
  90% {
+
−
    transform: translate3d(-5px, 0, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    transform: none;
+
−
  }
+
−
}
+
−
 
+
−
.bounceInRight {
+
−
  animation-name: bounceInRight;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@keyframes bounceOut {
+
−
  20% {
+
−
    transform: scale3d(.9, .9, .9);
+
−
  }
+
−
 
+
−
  50%, 55% {
+
−
    opacity: 1;
+
−
    transform: scale3d(1.1, 1.1, 1.1);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 0;
+
−
    transform: scale3d(.3, .3, .3);
+
−
  }
+
−
}
+
−
 
+
−
.bounceOut {
+
−
  animation-name: bounceOut;
+
−
}
+
−
 
+
−
@keyframes bounceOutDown {
+
−
  20% {
+
−
    transform: translate3d(0, 10px, 0);
+
−
  }
+
−
 
+
−
  40%, 45% {
+
−
    opacity: 1;
+
−
    transform: translate3d(0, -20px, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 0;
+
−
    transform: translate3d(0, 2000px, 0);
+
−
  }
+
−
}
+
−
 
+
−
.bounceOutDown {
+
−
  animation-name: bounceOutDown;
+
−
}
+
−
 
+
−
@keyframes bounceOutLeft {
+
−
  20% {
+
−
    opacity: 1;
+
−
    transform: translate3d(20px, 0, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 0;
+
−
    transform: translate3d(-2000px, 0, 0);
+
−
  }
+
−
}
+
−
 
+
−
.bounceOutLeft {
+
−
  animation-name: bounceOutLeft;
+
−
}
+
−
 
+
−
@keyframes bounceOutRight {
+
−
  20% {
+
−
    opacity: 1;
+
−
    transform: translate3d(-20px, 0, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 0;
+
−
    transform: translate3d(2000px, 0, 0);
+
−
  }
+
−
}
+
−
 
+
−
.bounceOutRight {
+
−
  animation-name: bounceOutRight;
+
−
}
+
−
 
+
−
@keyframes bounceOutUp {
+
−
  20% {
+
−
    transform: translate3d(0, -10px, 0);
+
−
  }
+
−
 
+
−
  40%, 45% {
+
−
    opacity: 1;
+
−
    transform: translate3d(0, 20px, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 0;
+
−
    transform: translate3d(0, -2000px, 0);
+
−
  }
+
−
}
+
−
 
+
−
.bounceOutUp {
+
−
  animation-name: bounceOutUp;
+
 
}
 
}
  
 
@keyframes fadeIn {
 
@keyframes fadeIn {
−
  from {
+
0% {
−
    opacity: 0;
+
transform: scale(0);
−
  }
+
opacity: 0.0;
−
 
+
}
−
  to {
+
60% {
−
    opacity: 1;
+
transform: scale(1.1);
−
  }
+
}
 +
80% {
 +
transform: scale(0.9);
 +
opacity: 1;
 +
}
 +
100% {
 +
transform: scale(1);
 +
opacity: 1;
 +
}
 
}
 
}
  
−
.fadeIn {
+
@-webkit-keyframes fadeIn {
−
  animation-name: fadeIn;
+
0% {
 +
-webkit-transform: scale(0);
 +
opacity: 0.0;
 +
}
 +
60% {
 +
-webkit-transform: scale(1.1);
 +
}
 +
80% {
 +
-webkit-transform: scale(0.9);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: scale(1);
 +
opacity: 1;
 +
}
 
}
 
}
  
−
@keyframes fadeInDown {
+
/*
−
  from {
+
==============================================
−
    opacity: 0;
+
expandOpen
−
    transform: translate3d(0, -100%, 0);
+
==============================================
−
  }
+
*/
  
−
  to {
 
−
    opacity: 1;
 
−
    transform: none;
 
−
  }
 
−
}
 
  
−
.fadeInDown {
+
.expandOpen{
−
  animation-name: fadeInDown;
+
animation-name: expandOpen;
−
}
+
-webkit-animation-name: expandOpen;
  
−
@keyframes fadeInDownBig {
+
animation-duration: 1.2s;
−
  from {
+
-webkit-animation-duration: 1.2s;
−
    opacity: 0;
+
−
    transform: translate3d(0, -2000px, 0);
+
−
  }
+
  
−
  to {
+
animation-timing-function: ease-out;
−
    opacity: 1;
+
-webkit-animation-timing-function: ease-out;
−
    transform: none;
+
−
  }
+
−
}
+
  
−
.fadeInDownBig {
+
visibility: visible !important;
−
  animation-name: fadeInDownBig;
+
 
}
 
}
  
−
@keyframes fadeInLeft {
+
@keyframes expandOpen {
−
  from {
+
0% {
−
    opacity: 0;
+
transform: scale(1.8);
−
    transform: translate3d(-100%, 0, 0);
+
}
−
  }
+
50% {
−
 
+
transform: scale(0.95);
−
  to {
+
}
−
    opacity: 1;
+
80% {
−
    transform: none;
+
transform: scale(1.05);
−
  }
+
}
 +
90% {
 +
transform: scale(0.98);
 +
}
 +
100% {
 +
transform: scale(1);
 +
}
 
}
 
}
  
−
.fadeInLeft {
+
@-webkit-keyframes expandOpen {
−
  animation-name: fadeInLeft;
+
0% {
 +
-webkit-transform: scale(1.8);
 +
}
 +
50% {
 +
-webkit-transform: scale(0.95);
 +
}
 +
80% {
 +
-webkit-transform: scale(1.05);
 +
}
 +
90% {
 +
-webkit-transform: scale(0.98);
 +
}
 +
100% {
 +
-webkit-transform: scale(1);
 +
}
 
}
 
}
  
−
@keyframes fadeInLeftBig {
+
/*
−
  from {
+
==============================================
−
    opacity: 0;
+
bigEntrance
−
    transform: translate3d(-2000px, 0, 0);
+
==============================================
−
  }
+
*/
  
−
  to {
 
−
    opacity: 1;
 
−
    transform: none;
 
−
  }
 
−
}
 
  
−
.fadeInLeftBig {
+
.bigEntrance{
−
  animation-name: fadeInLeftBig;
+
animation-name: bigEntrance;
−
}
+
-webkit-animation-name: bigEntrance;
  
−
@keyframes fadeInRight {
+
animation-duration: 1.6s;
−
  from {
+
-webkit-animation-duration: 1.6s;
−
    opacity: 0;
+
−
    transform: translate3d(100%, 0, 0);
+
−
  }
+
  
−
  to {
+
animation-timing-function: ease-out;
−
    opacity: 1;
+
-webkit-animation-timing-function: ease-out;
−
    transform: none;
+
−
  }
+
−
}
+
  
−
.fadeInRight {
+
visibility: visible !important;
−
  animation-name: fadeInRight;
+
 
}
 
}
  
−
@keyframes fadeInRightBig {
+
@keyframes bigEntrance {
−
  from {
+
0% {
−
    opacity: 0;
+
transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
−
    transform: translate3d(2000px, 0, 0);
+
opacity: 0.2;
−
  }
+
}
−
 
+
30% {
−
  to {
+
transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
−
    opacity: 1;
+
opacity: 1;
−
    transform: none;
+
}
−
  }
+
45% {
 +
transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 +
60% {
 +
transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 +
75% {
 +
transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 +
90% {
 +
transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 +
100% {
 +
transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 
}
 
}
  
−
.fadeInRightBig {
+
@-webkit-keyframes bigEntrance {
−
  animation-name: fadeInRightBig;
+
0% {
 +
-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
 +
opacity: 0.2;
 +
}
 +
30% {
 +
-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
 +
opacity: 1;
 +
}
 +
45% {
 +
-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 +
60% {
 +
-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 +
75% {
 +
-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 +
90% {
 +
-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 +
100% {
 +
-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
 +
opacity: 1;
 +
}
 
}
 
}
  
−
@keyframes fadeInUp {
+
/*
−
  from {
+
==============================================
−
    opacity: 0;
+
hatch
−
    transform: translate3d(0, 100%, 0);
+
==============================================
−
  }
+
*/
  
−
  to {
+
.hatch{
−
    opacity: 1;
+
animation-name: hatch;
−
    transform: none;
+
-webkit-animation-name: hatch;
−
  }
+
−
}
+
  
−
.fadeInUp {
+
animation-duration: 2s;
−
  animation-name: fadeInUp;
+
-webkit-animation-duration: 2s;
−
}
+
  
−
@keyframes fadeInUpBig {
+
animation-timing-function: ease-in-out;
−
  from {
+
-webkit-animation-timing-function: ease-in-out;
−
    opacity: 0;
+
−
    transform: translate3d(0, 2000px, 0);
+
−
  }
+
  
−
  to {
+
transform-origin: 50% 100%;
−
    opacity: 1;
+
-ms-transform-origin: 50% 100%;
−
    transform: none;
+
-webkit-transform-origin: 50% 100%;
−
  }
+
−
}
+
  
−
.fadeInUpBig {
+
visibility: visible !important;
−
  animation-name: fadeInUpBig;
+
 
}
 
}
  
−
@keyframes fadeOut {
+
@keyframes hatch {
−
  from {
+
0% {
−
    opacity: 1;
+
transform: rotate(0deg) scaleY(0.6);
−
  }
+
}
−
 
+
20% {
−
  to {
+
transform: rotate(-2deg) scaleY(1.05);
−
    opacity: 0;
+
}
−
  }
+
35% {
 +
transform: rotate(2deg) scaleY(1);
 +
}
 +
50% {
 +
transform: rotate(-2deg);
 +
}
 +
65% {
 +
transform: rotate(1deg);
 +
}
 +
80% {
 +
transform: rotate(-1deg);
 +
}
 +
100% {
 +
transform: rotate(0deg);
 +
}
 
}
 
}
  
−
.fadeOut {
+
@-webkit-keyframes hatch {
−
  animation-name: fadeOut;
+
0% {
 +
-webkit-transform: rotate(0deg) scaleY(0.6);
 +
}
 +
20% {
 +
-webkit-transform: rotate(-2deg) scaleY(1.05);
 +
}
 +
35% {
 +
-webkit-transform: rotate(2deg) scaleY(1);
 +
}
 +
50% {
 +
-webkit-transform: rotate(-2deg);
 +
}
 +
65% {
 +
-webkit-transform: rotate(1deg);
 +
}
 +
80% {
 +
-webkit-transform: rotate(-1deg);
 +
}
 +
100% {
 +
-webkit-transform: rotate(0deg);
 +
}
 
}
 
}
  
−
@keyframes fadeOutDown {
 
−
  from {
 
−
    opacity: 1;
 
−
  }
 
  
−
  to {
+
/*
−
    opacity: 0;
+
==============================================
−
    transform: translate3d(0, 100%, 0);
+
bounce
−
  }
+
==============================================
−
}
+
*/
  
−
.fadeOutDown {
 
−
  animation-name: fadeOutDown;
 
−
}
 
  
−
@keyframes fadeOutDownBig {
+
.bounce{
−
  from {
+
animation-name: bounce;
−
    opacity: 1;
+
-webkit-animation-name: bounce;
−
  }
+
  
−
  to {
+
animation-duration: 1.6s;
−
    opacity: 0;
+
-webkit-animation-duration: 1.6s;
−
    transform: translate3d(0, 2000px, 0);
+
−
  }
+
−
}
+
  
−
.fadeOutDownBig {
+
animation-timing-function: ease;
−
  animation-name: fadeOutDownBig;
+
-webkit-animation-timing-function: ease;
 +
 +
transform-origin: 50% 100%;
 +
-ms-transform-origin: 50% 100%;
 +
-webkit-transform-origin: 50% 100%;
 
}
 
}
  
−
@keyframes fadeOutLeft {
+
@keyframes bounce {
−
  from {
+
0% {
−
    opacity: 1;
+
transform: translateY(0%) scaleY(0.6);
−
  }
+
}
−
 
+
60%{
−
  to {
+
transform: translateY(-100%) scaleY(1.1);
−
    opacity: 0;
+
}
−
    transform: translate3d(-100%, 0, 0);
+
70%{
−
  }
+
transform: translateY(0%) scaleY(0.95) scaleX(1.05);
 +
}
 +
80%{
 +
transform: translateY(0%) scaleY(1.05) scaleX(1);
 +
}
 +
90%{
 +
transform: translateY(0%) scaleY(0.95) scaleX(1);
 +
}
 +
100%{
 +
transform: translateY(0%) scaleY(1) scaleX(1);
 +
}
 
}
 
}
  
−
.fadeOutLeft {
+
@-webkit-keyframes bounce {
−
  animation-name: fadeOutLeft;
+
0% {
 +
-webkit-transform: translateY(0%) scaleY(0.6);
 +
}
 +
60%{
 +
-webkit-transform: translateY(-100%) scaleY(1.1);
 +
}
 +
70%{
 +
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
 +
}
 +
80%{
 +
-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
 +
}
 +
90%{
 +
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
 +
}
 +
100%{
 +
-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
 +
}
 
}
 
}
  
−
@keyframes fadeOutLeftBig {
 
−
  from {
 
−
    opacity: 1;
 
−
  }
 
  
−
  to {
+
/*
−
    opacity: 0;
+
==============================================
−
    transform: translate3d(-2000px, 0, 0);
+
pulse
−
  }
+
==============================================
−
}
+
*/
  
−
.fadeOutLeftBig {
+
.pulse{
−
  animation-name: fadeOutLeftBig;
+
animation-name: pulse;
−
}
+
-webkit-animation-name: pulse;
  
−
@keyframes fadeOutRight {
+
animation-duration: 1.5s;
−
  from {
+
-webkit-animation-duration: 1.5s;
−
    opacity: 1;
+
−
  }
+
  
−
  to {
+
animation-iteration-count: infinite;
−
    opacity: 0;
+
-webkit-animation-iteration-count: infinite;
−
    transform: translate3d(100%, 0, 0);
+
−
  }
+
 
}
 
}
  
−
.fadeOutRight {
+
@keyframes pulse {
−
  animation-name: fadeOutRight;
+
0% {
 +
transform: scale(0.9);
 +
opacity: 0.7;
 +
}
 +
50% {
 +
transform: scale(1);
 +
opacity: 1;
 +
}
 +
100% {
 +
transform: scale(0.9);
 +
opacity: 0.7;
 +
}
 
}
 
}
  
−
@keyframes fadeOutRightBig {
+
@-webkit-keyframes pulse {
−
  from {
+
0% {
−
    opacity: 1;
+
-webkit-transform: scale(0.95);
−
  }
+
opacity: 0.7;
−
 
+
}
−
  to {
+
50% {
−
    opacity: 0;
+
-webkit-transform: scale(1);
−
    transform: translate3d(2000px, 0, 0);
+
opacity: 1;
−
  }
+
}
 +
100% {
 +
-webkit-transform: scale(0.95);
 +
opacity: 0.7;
 +
}
 
}
 
}
  
−
.fadeOutRightBig {
+
/*
−
  animation-name: fadeOutRightBig;
+
==============================================
−
}
+
floating
 +
==============================================
 +
*/
  
−
@keyframes fadeOutUp {
+
.floating{
−
  from {
+
animation-name: floating;
−
    opacity: 1;
+
-webkit-animation-name: floating;
−
  }
+
  
−
  to {
+
animation-duration: 1.5s;
−
    opacity: 0;
+
-webkit-animation-duration: 1.5s;
−
    transform: translate3d(0, -100%, 0);
+
−
  }
+
−
}
+
  
−
.fadeOutUp {
+
animation-iteration-count: infinite;
−
  animation-name: fadeOutUp;
+
-webkit-animation-iteration-count: infinite;
 
}
 
}
  
−
@keyframes fadeOutUpBig {
+
@keyframes floating {
−
  from {
+
0% {
−
    opacity: 1;
+
transform: translateY(0%);
−
  }
+
}
−
 
+
50% {
−
  to {
+
transform: translateY(8%);
−
    opacity: 0;
+
}
−
    transform: translate3d(0, -2000px, 0);
+
100% {
−
  }
+
transform: translateY(0%);
 +
}
 
}
 
}
  
−
.fadeOutUpBig {
+
@-webkit-keyframes floating {
−
  animation-name: fadeOutUpBig;
+
0% {
 +
-webkit-transform: translateY(0%);
 +
}
 +
50% {
 +
-webkit-transform: translateY(8%);
 +
}
 +
100% {
 +
-webkit-transform: translateY(0%);
 +
}
 
}
 
}
  
−
@keyframes flip {
+
/*
−
  from {
+
==============================================
−
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+
tossing
−
    animation-timing-function: ease-out;
+
==============================================
−
  }
+
*/
  
−
  40% {
+
.tossing{
−
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+
animation-name: tossing;
−
    animation-timing-function: ease-out;
+
-webkit-animation-name: tossing;
−
  }
+
  
−
  50% {
+
animation-duration: 2.5s;
−
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+
-webkit-animation-duration: 2.5s;
−
    animation-timing-function: ease-in;
+
−
  }
+
  
−
  80% {
+
animation-iteration-count: infinite;
−
    transform: perspective(400px) scale3d(.95, .95, .95);
+
-webkit-animation-iteration-count: infinite;
−
    animation-timing-function: ease-in;
+
−
  }
+
−
 
+
−
  to {
+
−
    transform: perspective(400px);
+
−
    animation-timing-function: ease-in;
+
−
  }
+
 
}
 
}
  
−
.animated.flip {
+
@keyframes tossing {
−
  -webkit-backface-visibility: visible;
+
0% {
−
  backface-visibility: visible;
+
transform: rotate(-4deg);
−
  animation-name: flip;
+
}
 +
50% {
 +
transform: rotate(4deg);
 +
}
 +
100% {
 +
transform: rotate(-4deg);
 +
}
 
}
 
}
  
−
@keyframes flipInX {
+
@-webkit-keyframes tossing {
−
  from {
+
0% {
−
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+
-webkit-transform: rotate(-4deg);
−
    animation-timing-function: ease-in;
+
}
−
    opacity: 0;
+
50% {
−
  }
+
-webkit-transform: rotate(4deg);
−
 
+
}
−
  40% {
+
100% {
−
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+
-webkit-transform: rotate(-4deg);
−
    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 {
+
/*
−
  -webkit-backface-visibility: visible !important;
+
==============================================
−
  backface-visibility: visible !important;
+
pullUp
−
  animation-name: flipInX;
+
==============================================
−
}
+
*/
  
−
@keyframes flipInY {
+
.pullUp{
−
  from {
+
animation-name: pullUp;
−
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+
-webkit-animation-name: pullUp;
−
    animation-timing-function: ease-in;
+
−
    opacity: 0;
+
−
  }
+
  
−
  40% {
+
animation-duration: 1.1s;
−
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+
-webkit-animation-duration: 1.1s;
−
    animation-timing-function: ease-in;
+
−
  }
+
  
−
  60% {
+
animation-timing-function: ease-out;
−
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+
-webkit-animation-timing-function: ease-out;
−
    opacity: 1;
+
−
  }
+
  
−
  80% {
+
transform-origin: 50% 100%;
−
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+
-ms-transform-origin: 50% 100%;
−
  }
+
-webkit-transform-origin: 50% 100%;
−
 
+
−
  to {
+
−
    transform: perspective(400px);
+
−
  }
+
 
}
 
}
  
−
.flipInY {
+
@keyframes pullUp {
−
  -webkit-backface-visibility: visible !important;
+
0% {
−
  backface-visibility: visible !important;
+
transform: scaleY(0.1);
−
  animation-name: flipInY;
+
}
 +
40% {
 +
transform: scaleY(1.02);
 +
}
 +
60% {
 +
transform: scaleY(0.98);
 +
}
 +
80% {
 +
transform: scaleY(1.01);
 +
}
 +
100% {
 +
transform: scaleY(0.98);
 +
}
 +
80% {
 +
transform: scaleY(1.01);
 +
}
 +
100% {
 +
transform: scaleY(1);
 +
}
 
}
 
}
  
−
@keyframes flipOutX {
+
@-webkit-keyframes pullUp {
−
  from {
+
0% {
−
    transform: perspective(400px);
+
-webkit-transform: scaleY(0.1);
−
  }
+
}
−
 
+
40% {
−
  30% {
+
-webkit-transform: scaleY(1.02);
−
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+
}
−
    opacity: 1;
+
60% {
−
  }
+
-webkit-transform: scaleY(0.98);
−
 
+
}
−
  to {
+
80% {
−
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+
-webkit-transform: scaleY(1.01);
−
    opacity: 0;
+
}
−
  }
+
100% {
 +
-webkit-transform: scaleY(0.98);
 +
}
 +
80% {
 +
-webkit-transform: scaleY(1.01);
 +
}
 +
100% {
 +
-webkit-transform: scaleY(1);
 +
}
 
}
 
}
  
−
.flipOutX {
+
/*
−
  animation-name: flipOutX;
+
==============================================
−
  -webkit-backface-visibility: visible !important;
+
pullDown
−
  backface-visibility: visible !important;
+
==============================================
−
}
+
*/
  
−
@keyframes flipOutY {
+
.pullDown{
−
  from {
+
animation-name: pullDown;
−
    transform: perspective(400px);
+
-webkit-animation-name: pullDown;
−
  }
+
  
−
  30% {
+
animation-duration: 1.1s;
−
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+
-webkit-animation-duration: 1.1s;
−
    opacity: 1;
+
−
  }
+
  
−
  to {
+
animation-timing-function: ease-out;
−
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+
-webkit-animation-timing-function: ease-out;
−
    opacity: 0;
+
−
  }
+
−
}
+
  
−
.flipOutY {
+
transform-origin: 50% 0%;
−
  -webkit-backface-visibility: visible !important;
+
-ms-transform-origin: 50% 0%;
−
  backface-visibility: visible !important;
+
-webkit-transform-origin: 50% 0%;
−
  animation-name: flipOutY;
+
 
}
 
}
  
−
@keyframes lightSpeedIn {
+
@keyframes pullDown {
−
  from {
+
0% {
−
    transform: translate3d(100%, 0, 0) skewX(-30deg);
+
transform: scaleY(0.1);
−
    opacity: 0;
+
}
−
  }
+
40% {
−
 
+
transform: scaleY(1.02);
−
  60% {
+
}
−
    transform: skewX(20deg);
+
60% {
−
    opacity: 1;
+
transform: scaleY(0.98);
−
  }
+
}
−
 
+
80% {
−
  80% {
+
transform: scaleY(1.01);
−
    transform: skewX(-5deg);
+
}
−
    opacity: 1;
+
100% {
−
  }
+
transform: scaleY(0.98);
−
 
+
}
−
  to {
+
80% {
−
    transform: none;
+
transform: scaleY(1.01);
−
    opacity: 1;
+
}
−
  }
+
100% {
 +
transform: scaleY(1);
 +
}
 
}
 
}
  
−
.lightSpeedIn {
+
@-webkit-keyframes pullDown {
−
  animation-name: lightSpeedIn;
+
0% {
−
  animation-timing-function: ease-out;
+
-webkit-transform: scaleY(0.1);
 +
}
 +
40% {
 +
-webkit-transform: scaleY(1.02);
 +
}
 +
60% {
 +
-webkit-transform: scaleY(0.98);
 +
}
 +
80% {
 +
-webkit-transform: scaleY(1.01);
 +
}
 +
100% {
 +
-webkit-transform: scaleY(0.98);
 +
}
 +
80% {
 +
-webkit-transform: scaleY(1.01);
 +
}
 +
100% {
 +
-webkit-transform: scaleY(1);
 +
}
 
}
 
}
  
−
@keyframes lightSpeedOut {
+
/*
−
  from {
+
==============================================
−
    opacity: 1;
+
stretchLeft
−
  }
+
==============================================
 +
*/
  
−
  to {
+
.stretchLeft{
−
    transform: translate3d(100%, 0, 0) skewX(30deg);
+
animation-name: stretchLeft;
−
    opacity: 0;
+
-webkit-animation-name: stretchLeft;
−
  }
+
−
}
+
  
−
.lightSpeedOut {
+
animation-duration: 1.5s;
−
  animation-name: lightSpeedOut;
+
-webkit-animation-duration: 1.5s;
−
  animation-timing-function: ease-in;
+
−
}
+
  
−
@keyframes rotateIn {
+
animation-timing-function: ease-out;
−
  from {
+
-webkit-animation-timing-function: ease-out;
−
    transform-origin: center;
+
−
    transform: rotate3d(0, 0, 1, -200deg);
+
−
    opacity: 0;
+
−
  }
+
  
−
  to {
+
transform-origin: 100% 0%;
−
    transform-origin: center;
+
-ms-transform-origin: 100% 0%;
−
    transform: none;
+
-webkit-transform-origin: 100% 0%;  
−
    opacity: 1;
+
−
  }
+
 
}
 
}
  
−
.rotateIn {
+
@keyframes stretchLeft {
−
  animation-name: rotateIn;
+
0% {
 +
transform: scaleX(0.3);
 +
}
 +
40% {
 +
transform: scaleX(1.02);
 +
}
 +
60% {
 +
transform: scaleX(0.98);
 +
}
 +
80% {
 +
transform: scaleX(1.01);
 +
}
 +
100% {
 +
transform: scaleX(0.98);
 +
}
 +
80% {
 +
transform: scaleX(1.01);
 +
}
 +
100% {
 +
transform: scaleX(1);
 +
}
 
}
 
}
  
−
@keyframes rotateInDownLeft {
+
@-webkit-keyframes stretchLeft {
−
  from {
+
0% {
−
    transform-origin: left bottom;
+
-webkit-transform: scaleX(0.3);
−
    transform: rotate3d(0, 0, 1, -45deg);
+
}
−
    opacity: 0;
+
40% {
−
  }
+
-webkit-transform: scaleX(1.02);
−
 
+
}
−
  to {
+
60% {
−
    transform-origin: left bottom;
+
-webkit-transform: scaleX(0.98);
−
    transform: none;
+
}
−
    opacity: 1;
+
80% {
−
  }
+
-webkit-transform: scaleX(1.01);
 +
}
 +
100% {
 +
-webkit-transform: scaleX(0.98);
 +
}
 +
80% {
 +
-webkit-transform: scaleX(1.01);
 +
}
 +
100% {
 +
-webkit-transform: scaleX(1);
 +
}
 
}
 
}
  
−
.rotateInDownLeft {
+
/*
−
  animation-name: rotateInDownLeft;
+
==============================================
−
}
+
stretchRight
 +
==============================================
 +
*/
  
−
@keyframes rotateInDownRight {
+
.stretchRight{
−
  from {
+
animation-name: stretchRight;
−
    transform-origin: right bottom;
+
-webkit-animation-name: stretchRight;
−
    transform: rotate3d(0, 0, 1, 45deg);
+
−
    opacity: 0;
+
−
  }
+
  
−
  to {
+
animation-duration: 1.5s;
−
    transform-origin: right bottom;
+
-webkit-animation-duration: 1.5s;
−
    transform: none;
+
−
    opacity: 1;
+
−
  }
+
−
}
+
  
−
.rotateInDownRight {
+
animation-timing-function: ease-out;
−
  animation-name: rotateInDownRight;
+
-webkit-animation-timing-function: ease-out;
−
}
+
  
−
@keyframes rotateInUpLeft {
+
transform-origin: 0% 0%;
−
  from {
+
-ms-transform-origin: 0% 0%;
−
    transform-origin: left bottom;
+
-webkit-transform-origin: 0% 0%;
−
    transform: rotate3d(0, 0, 1, 45deg);
+
−
    opacity: 0;
+
−
  }
+
−
 
+
−
  to {
+
−
    transform-origin: left bottom;
+
−
    transform: none;
+
−
    opacity: 1;
+
−
  }
+
 
}
 
}
  
−
.rotateInUpLeft {
+
@keyframes stretchRight {
−
  animation-name: rotateInUpLeft;
+
0% {
 +
transform: scaleX(0.3);
 +
}
 +
40% {
 +
transform: scaleX(1.02);
 +
}
 +
60% {
 +
transform: scaleX(0.98);
 +
}
 +
80% {
 +
transform: scaleX(1.01);
 +
}
 +
100% {
 +
transform: scaleX(0.98);
 +
}
 +
80% {
 +
transform: scaleX(1.01);
 +
}
 +
100% {
 +
transform: scaleX(1);
 +
}
 
}
 
}
  
−
@keyframes rotateInUpRight {
+
@-webkit-keyframes stretchRight {
−
  from {
+
0% {
−
    transform-origin: right bottom;
+
-webkit-transform: scaleX(0.3);
−
    transform: rotate3d(0, 0, 1, -90deg);
+
}
−
    opacity: 0;
+
40% {
−
  }
+
-webkit-transform: scaleX(1.02);
−
 
+
}
−
  to {
+
60% {
−
    transform-origin: right bottom;
+
-webkit-transform: scaleX(0.98);
−
    transform: none;
+
}
−
    opacity: 1;
+
80% {
−
  }
+
-webkit-transform: scaleX(1.01);
 +
}
 +
100% {
 +
-webkit-transform: scaleX(0.98);
 +
}
 +
80% {
 +
-webkit-transform: scaleX(1.01);
 +
}
 +
100% {
 +
-webkit-transform: scaleX(1);
 +
}
 
}
 
}
  
−
.rotateInUpRight {
 
−
  animation-name: rotateInUpRight;
 
−
}
 
  
−
@keyframes rotateOut {
+
</style>
−
  from {
+
−
    transform-origin: center;
+
−
    opacity: 1;
+
−
  }
+
−
 
+
−
  to {
+
−
    transform-origin: center;
+
−
    transform: rotate3d(0, 0, 1, 200deg);
+
−
    opacity: 0;
+
−
  }
+
−
}
+
−
 
+
−
.rotateOut {
+
−
  animation-name: rotateOut;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@keyframes jackInTheBox {
+
−
  from {
+
−
    opacity: 0;
+
−
    transform: scale(0.1) rotate(30deg);
+
−
    transform-origin: center bottom;
+
−
  }
+
−
 
+
−
  50% {
+
−
    transform: rotate(-10deg);
+
−
  }
+
−
 
+
−
  70% {
+
−
    transform: rotate(3deg);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 1;
+
−
    transform: scale(1);
+
−
  }
+
−
}
+
−
 
+
−
.jackInTheBox {
+
−
  animation-name: jackInTheBox;
+
−
}
+
−
 
+
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
−
 
+
−
@keyframes rollIn {
+
−
  from {
+
−
    opacity: 0;
+
−
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 1;
+
−
    transform: none;
+
−
  }
+
−
}
+
−
 
+
−
.rollIn {
+
−
  animation-name: rollIn;
+
−
}
+
−
 
+
−
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
−
 
+
−
@keyframes rollOut {
+
−
  from {
+
−
    opacity: 1;
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 0;
+
−
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+
−
  }
+
−
}
+
−
 
+
−
.rollOut {
+
−
  animation-name: rollOut;
+
−
}
+
−
 
+
−
@keyframes zoomIn {
+
−
  from {
+
−
    opacity: 0;
+
−
    transform: scale3d(.3, .3, .3);
+
−
  }
+
−
 
+
−
  50% {
+
−
    opacity: 1;
+
−
  }
+
−
}
+
−
 
+
−
.zoomIn {
+
−
  animation-name: zoomIn;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@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;
+
−
}
+
−
 
+
−
@keyframes zoomOut {
+
−
  from {
+
−
    opacity: 1;
+
−
  }
+
−
 
+
−
  50% {
+
−
    opacity: 0;
+
−
    transform: scale3d(.3, .3, .3);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 0;
+
−
  }
+
−
}
+
−
 
+
−
.zoomOut {
+
−
  animation-name: zoomOut;
+
−
}
+
−
 
+
−
@keyframes zoomOutDown {
+
−
  40% {
+
−
    opacity: 1;
+
−
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+
−
    animation-timing-function: cubic-bezier(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;
+
−
}
+
−
 
+
−
@keyframes zoomOutLeft {
+
−
  40% {
+
−
    opacity: 1;
+
−
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 0;
+
−
    transform: scale(.1) translate3d(-2000px, 0, 0);
+
−
    transform-origin: left center;
+
−
  }
+
−
}
+
−
 
+
−
.zoomOutLeft {
+
−
  animation-name: zoomOutLeft;
+
−
}
+
−
 
+
−
@keyframes zoomOutRight {
+
−
  40% {
+
−
    opacity: 1;
+
−
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    opacity: 0;
+
−
    transform: scale(.1) translate3d(2000px, 0, 0);
+
−
    transform-origin: right center;
+
−
  }
+
−
}
+
−
 
+
−
.zoomOutRight {
+
−
  animation-name: zoomOutRight;
+
−
}
+
−
 
+
−
@keyframes zoomOutUp {
+
−
  40% {
+
−
    opacity: 1;
+
−
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+
−
    animation-timing-function: cubic-bezier(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;
+
−
}
+
−
 
+
−
@keyframes slideInDown {
+
−
  from {
+
−
    transform: translate3d(0, -100%, 0);
+
−
    visibility: visible;
+
−
  }
+
−
 
+
−
  to {
+
−
    transform: translate3d(0, 0, 0);
+
−
  }
+
−
}
+
−
 
+
−
.slideInDown {
+
−
  animation-name: slideInDown;
+
−
}
+
−
 
+
−
@keyframes slideInLeft {
+
−
  from {
+
−
    transform: translate3d(-100%, 0, 0);
+
−
    visibility: visible;
+
−
  }
+
−
 
+
−
  to {
+
−
    transform: translate3d(0, 0, 0);
+
−
  }
+
−
}
+
−
 
+
−
.slideInLeft {
+
−
  animation-name: slideInLeft;
+
−
}
+
−
 
+
−
@keyframes slideInRight {
+
−
  from {
+
−
    transform: translate3d(100%, 0, 0);
+
−
    visibility: visible;
+
−
  }
+
−
 
+
−
  to {
+
−
    transform: translate3d(0, 0, 0);
+
−
  }
+
−
}
+
−
 
+
−
.slideInRight {
+
−
  animation-name: slideInRight;
+
−
}
+
−
 
+
−
@keyframes slideInUp {
+
−
  from {
+
−
    transform: translate3d(0, 100%, 0);
+
−
    visibility: visible;
+
−
  }
+
−
 
+
−
  to {
+
−
    transform: translate3d(0, 0, 0);
+
−
  }
+
−
}
+
−
 
+
−
.slideInUp {
+
−
  animation-name: slideInUp;
+
−
}
+
−
 
+
−
@keyframes slideOutDown {
+
−
  from {
+
−
    transform: translate3d(0, 0, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    visibility: hidden;
+
−
    transform: translate3d(0, 100%, 0);
+
−
  }
+
−
}
+
−
 
+
−
.slideOutDown {
+
−
  animation-name: slideOutDown;
+
−
}
+
−
 
+
−
@keyframes slideOutLeft {
+
−
  from {
+
−
    transform: translate3d(0, 0, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    visibility: hidden;
+
−
    transform: translate3d(-100%, 0, 0);
+
−
  }
+
−
}
+
−
 
+
−
.slideOutLeft {
+
−
  animation-name: slideOutLeft;
+
−
}
+
−
 
+
−
@keyframes slideOutRight {
+
−
  from {
+
−
    transform: translate3d(0, 0, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    visibility: hidden;
+
−
    transform: translate3d(100%, 0, 0);
+
−
  }
+
−
}
+
−
 
+
−
.slideOutRight {
+
−
  animation-name: slideOutRight;
+
−
}
+
−
 
+
−
@keyframes slideOutUp {
+
−
  from {
+
−
    transform: translate3d(0, 0, 0);
+
−
  }
+
−
 
+
−
  to {
+
−
    visibility: hidden;
+
−
    transform: translate3d(0, -100%, 0);
+
−
  }
+
−
}
+
−
 
+
−
.slideOutUp {
+
−
  animation-name: slideOutUp;
+
−
}
+
−
  </style>
+
 
</html>
 
</html>

Revision as of 04:13, 28 June 2017