woah.css

/*!
 * Woah.css - http://joerezendes.com/woah.css
 * Version - 1.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Github - https://github.com/joerez/Woah.css
 *
 * Copyright (c) 2018 Joe Rezendes
 */





/**
 * Animations
 */
.woah {
  animation-fill-mode: both;
}

.woah.infinite {
  animation-iteration-count: infinite;
}


/**
 * Wowzors
 * - Spiral flips and rotates
 */
@keyframes wowzors {

  1% {
    opacity: 0%;
  }

  10% {
    opacity: 100%;
    transform: rotate(360deg) translateX(150px) translateY(400px) rotate(-360deg) rotateY(360deg);
  }

  20% {
    transform: rotate(720deg) translateX(150px) translateY(350px) rotate(-720deg) rotateY(720deg) ;
  }

  30% {
    transform: rotate(1080deg) translateX(150px) translateY(300px) rotate(-1080deg) rotateY(1080deg) ;
  }

  40% {
    transform: rotate(1440deg) translateX(150px) translateY(250px) rotate(-1440deg) rotateY(1440deg) ;
  }

  50% {
    transform: rotate(1800deg) translateX(150px) translateY(200px) rotate(-1800deg) rotateY(1800deg) ;
  }

  60% {
    transform: rotate(1440deg) translateX(150px) translateY(150px) rotate(-1440deg) rotateY(1440deg) ;
  }

  70% {
    transform: rotate(1080deg) translateX(150px) translateY(0px) rotate(1080deg) rotateX(180deg);
  }


}

.wowzors {
  animation-timing-function: linear;
  transform-origin: bottom center;
  animation-name: wowzors;
  animation-duration: 5s;
}

/**
 * comeInStyle
 * - Comes in style, this isn't your oridinary entrance
 */
@keyframes comeInStyle {
  0% {
    opacity: 100%;
    transform: translate3d(0px, -3000px, -2000px);
  }

  1% {
    opacity: 0%;
    transform: translate3d(0px, -3000px, -2000px);
  }

  25% {
    transform: translate3d(0px, -200px, -200px) scale(3) rotateX(0) rotateY(0);
  }

  50% {
    transform: translate3d(200px, -0px, -0px) scale(6) rotateX(180deg) rotateY(90deg);

  }


  90% {
    opacity: 0%;
    transform: translate3d(-200px, 200px, 200px) scale(3) rotateX(360deg) rotateY(180deg);
  }

  100% {
    opacity: 100%;
    transform: none;
  }

}

.comeInStyle {
  animation-timing-function: ease-out;
  transform-origin: bottom center;
  animation-name: comeInStyle;
  animation-duration: 5s;
}

/**
 * leaveInStyle
 * - Leaves in style, this isn't your oridinary entrance
 */
@keyframes leaveInStyle {

  10% {
    transform: translate3d(0px, -100px, 0px) scale(1);
  }

  12% {
    transform: translate3d(0px, 5px, 0px) scale(1);
  }

  14% {
    transform: translate3d(0px, -10px, 0px) scale(1);
  }

  16% {
    transform: translate3d(0px, 0px, 0px) scale(1);
  }

  18% {
    transform: translate3d(0px, 10px, 0px) scale(1);
  }

  25% {
    transform: translate3d(0px, 0px, 0px) skewY(10deg) scale(2);
  }

  27% {
    transform: translate3d(0px, -5px, 0px) skewY(7deg) scale(1.8);
  }

  29% {
    transform: translate3d(0px, 5px, 0px) skewY(10deg) scale(2);
  }

  60% {
    transform: translate3d(-400px, 5px, 0px) rotate(360deg) rotateY(-760deg) skewY(-10deg) scale(2);
  }

  70% {
    transform: translate3d(400px, 5px, 0px) rotate(0deg) rotateY(-360deg) skewY(10deg) scale(2);
  }

  80% {
    transform: translate3d(0px, 0px, 0px) rotateY(0deg) skewY(0deg) scale(1);
  }

  90% {
    transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(720deg) scale(1.5);
  }

  99% {
    transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(0deg) skewY(0deg) scale(.01);
  }

  100% {
    transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(0deg) skewY(0deg) scale(.001);
    visibility: hidden;
  }

}

.leaveInStyle {
  animation-timing-function: ease-out;
  transform-origin: bottom center;
  animation-name: leaveInStyle;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}


/**
 * rotateComplex
 * - Comes in style, this isn't your oridinary entrance
 */
@keyframes rotateComplex {
  1% {
    opacity: 90%;
    transform: translate3d(0,0,0) rotate(0deg);
  }
  10% {
    transform: translate3d(200px, -140px, 0) rotate(1080deg);
  }
  20% {
    transform: translate3d(-200px, 140px, 0) rotate(-160deg);
  }
  30% {
    transform: translate3d(-200px, -140px, 0) rotate(340deg);
  }
  40% {
    transform: translate3d(-200px, 140px, 0) rotate(-720deg);
  }
  50% {
    transform: translate3d(200px, 140px, 0) rotate(120deg) scale(1.2);
  }
  60% {
    transform: translate3d(0px, 0px, 100px) rotate(1080deg) scale(1.5);
  }
  65% {
    transform: translate3d(0px, 0px, 200px) rotate(-1080deg) scale(2.0);
  }
  90% {
    transform: translate3d(0px, 0px, 600px) rotate(6080deg) scale(5.0);
  }
  100% {
    transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1.0);
  }
}

 .rotateComplex {
   animation-timing-function: linear;
   transform-origin: bottom center;
   animation-name: rotateComplex;
   animation-duration: 5s;
 }
 /**
  * rotateComplexOut
  * - Comes in style, this isn't your oridinary entrance
  */
 @keyframes rotateComplexOut {
   1% {
     opacity: 90%;
     transform: translate3d(0,0,0) rotate(0deg);
   }
   10% {
     transform: translate3d(200px, -140px, 0) rotate(1080deg);
   }
   20% {
     transform: translate3d(-200px, 140px, 0) rotate(-160deg);
   }
   30% {
     transform: translate3d(-200px, -140px, 0) rotate(340deg);
   }
   40% {
     transform: translate3d(-200px, 140px, 0) rotate(-720deg);
   }
   50% {
     transform: translate3d(200px, 140px, 0) rotate(120deg) scale(1.2);
   }
   60% {
     transform: translate3d(0px, 0px, 100px) rotate(1080deg) scale(1.5);
   }
   65% {
     transform: translate3d(0px, 0px, 200px) rotate(-1080deg) scale(2.0);
   }
   90% {
     transform: translate3d(0px, 0px, 600px) rotate(6080deg) scale(5.0);
   }
   99% {
     transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(.01);
     opacity: 100%
   }
   100% {
     display: none;
     transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(0);
     opacity: 0%;
   }

 }

  .rotateComplexOut {
    animation-timing-function: linear;
    transform-origin: bottom center;
    animation-name: rotateComplexOut;
    animation-duration: 5s;
  }

 /**
  * flyOut
  * - Flies out
  */
  @keyframes flyOut {

    1% {
      transform: translate3d(0,0,0) scale(1);
    }


    20% {
      transform: translate3d(0,100px,400px) rotateX(90deg);
    }
    30% {
      transform: translate3d(300px,0px,100px) rotateX(95deg);
    }
    40% {
      transform: translate3d(-600px,-200px,0px) rotateX(80deg);
    }
    60% {
      transform: translate3d(2000px,-2000px,0px) rotateX(0deg);
    }
    70% {
      transform: translate3d(-2000px, 2000px, 0px) rotateX(60deg) scale(5);
    }
    80% {
      transform: translate3d(0,4000px,0px);
    }
    85% {
      transform: translate3d(-0px,-0px,0px) scale(.07);
    }
    100% {
      transform: translate3d(2000px,-2000px,0px);
      display: none;
    }
}

.flyOut {
  animation-timing-function: ease-out;
  transform-origin: bottom center;
  animation-name: flyOut;
  animation-duration: 5s;
}


/**
 * flyIn
 * - Flies In
 */
 @keyframes flyIn {

   0% {
     transform: translate3d(2000px,-2000px,0px);
     display: none;
   }

   10%, 15% {
     transform: translate3d(-0px,-0px,0px) scale(.07);
   }

   20% {
     transform: translate3d(0,1000px,0px);
   }
   30% {
     transform: translate3d(-2000px, 2000px, 0px) rotateX(60deg) scale(5);
   }
   40% {
     transform: translate3d(2000px,-2000px,0px) rotateX(0deg) scale(2);
   }
   60% {
     transform: translate3d(-600px,-200px,0px) rotateX(0deg) scale(.3);
   }

   80% {
     transform: translate3d(0,0,0) scale(.01);
   }

   100% {
     transform: translate3d(0,0,0);
   }
}

.flyIn {
 animation-timing-function: ease-out;
 transform-origin: bottom center;
 animation-name: flyIn;
 animation-duration: 5s;
}


/**
 * blackMirror
 * - Woah
 */
@keyframes blackMirror {

  0% {
    transition: none;
  }

  1% {
    transform: translate3d(0,0,0);
  }

  50% {
    transform: translate3d(200px,0,0);
    background: rgba(0,0,0,1);
  }

  99% {
    transform: translate3d(-200px,0,0);
    background: rgba(0,0,0,1);
  }

  100% {
    transform: translate3d(0,0,0);
  }

}



 .blackMirror {
   animation-timing-function: ease-out;
   transform-origin: bottom center;
   animation-name: blackMirror;
   animation-duration: .01s;
   animation-iteration-count: 1200;
 }
 /**
  * blackMirrorTextVersion
  * - Woah (Black Text)
  */
 @keyframes blackMirrorTextVersion {
   1% {
     transform: translate3d(0,0,0);
   }

   50% {
     transform: translate3d(200px,0,0);
     color: black;
   }

   99% {
     transform: translate3d(-200px,0,0);
     color: black;
   }

   100% {
     transform: translate3d(0,0,0);
   }

 }



  .blackMirrorTextVersion {
    animation-timing-function: ease-out;
    transform-origin: bottom center;
    animation-name: blackMirrorTextVersion;
    animation-duration: .01s;
    animation-iteration-count: 600;
  }


  /**
   * spin3D
   * - Spins in 3D
   */
  @keyframes spin3D {

    15% {
      transform: rotateY(180deg) scale(2);
    }

    30% {
      transform: rotateX(360deg) rotateY(180deg) skewX(50deg) scale(2);
    }

    45% {
      transform: rotateX(480deg) rotateY(360deg) skewX(-50deg) skewY(0deg)  scale(1.5);
    }

    60% {
      transform: rotateX(0deg) rotateY(0deg) skewX(0deg) skewY(0deg)  scale(2);
    }

    70% {
      transform: rotateX(0deg) rotateY(0deg) skewX(0deg) skewY(0deg)  scale(3);
    }

    80% {
      transform: rotateX(0deg) rotateY(540deg) skewX(0deg) skewY(0deg)  scale(3);
    }

    90% {
      transform: rotateX(180deg) rotateY(1080deg) skewX(0deg) skewY(0deg)  scale(.3);
    }

    97% {
      transform: rotateX(40deg) rotateY(80deg) skewX(0deg) skewY(0deg)  scale(2);
    }


  }



   .spin3D {
     animation-timing-function: linear;
     transform-origin: bottom center;
     animation-name: spin3D;
     animation-duration: 5s;
   }

   /**
    * simpleEntrance
    * - enter in simply
    */
   @keyframes simpleEntrance {

     0% {
       opacity: 0%;
       transform: translate3d(-2000px,500px,0) scale(10);
     }

     1% {
       opacity: 100%
     }

     40% {
       transform: translate3d(2000px,0px,0) scale(5);
     }
     50% {
       transform: translate3d(-2000px,-100px,0) scale(3);
     }
     60% {
       transform: translate3d(2000px,100px,0) scale(2);
     }
     70% {
       transform: translate3d(-2000px,400px,0) scale(.1);
     }

     75% {
       transform: translate3d(0px,0px,0) scale(.1);
     }

     80% {
       transform:  rotate(360deg) translateX(150px) rotate(-360deg)
     }

   }

    .simpleEntrance {
      animation-timing-function: linear;
      transform-origin: bottom center;
      animation-name: simpleEntrance;
      animation-duration: 10s;
    }


    /**
     * scaleOut
     * - Big Scale Out
     */
    @keyframes scaleOut {

    from {
        transform: scale(.1) translate3d(0,0px,0);
      }

      80% {
        transform: scale(4) translate3d(0, 70px, 0);
        box-shadow: 0px 200px 200px 200px rgba(0,0,0,1);
      }



      100% {
        transform: scale(0) translate3d(0,0px,0);
        visibility: hidden;
      }

    }





     .scaleOut {
       animation-timing-function: linear;
       transform-origin: bottom center;
       animation-name: scaleOut;
       animation-duration: 3s;
       background: url('https://i.imgur.com/XB0kRsy.gif');
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
     }


     /**
      * dealWithIt
      * - Sunglasses and coolness.
      */
     @keyframes dealWithIt {

       1% {
         transform: translate3d(0,0,0) scale(1);
         opacity: 1;
       }


       30% {
         transform: translate3d(0,160px,0) scale(1);
         opacity: 1;
       }

       70% {
         transform: translate3d(0,160px,0) scale(1);
         opacity: 1;
       }

       85% {
         transform: translate3d(0,160px,0) scale(1);
         opacity: 1;
       }

       99% {
         transform: translate3d(0,-2000px,0) scale(1);
       }

       to {
         visibility: hidden;
         opacity: 0;
       }

     }

     @keyframes dealWithItNorm {

       1% {

       }

       30% {
         transform: translate3d(0,0px,0) scale(1);
         opacity: 1;
       }

       40% {
         transform: rotate(10deg);
         opacity: 1;
       }

       50% {
         transform: rotate(-10deg);
       }

       60% {
         transform: rotate(10deg);
       }

       70% {
         transform: rotate(-10deg);
       }

       80% {
         transform: rotate(0deg);
       }


     }


     .dealWithIt::after {
       height: 300px;
       width: 300px;
       z-index: 5;
       background-repeat: no-repeat;
       content: '';
       background: url('http://www.stickpng.com/assets/thumbs/584999a27b7d4d76317f5ffe.png');
       animation-timing-function: ease-in-out;
       transform-origin: bottom center;
       animation-name: dealWithIt;
       animation-duration: 5s;
       animation-fill-mode: forwards;
       vertical-align: baseline;
       position: absolute;
       top: -200%;
       right: -50%;
       bottom: -50%;
       left: -50%;

     }

      .dealWithIt {
        /*position: absolute;*/
        animation-timing-function: ease-in-out;
        transform-origin: bottom center;
        animation-name: dealWithItNorm;
        animation-duration: 5s;
      }


      /**
       * fedoraTip
       * - Tip your fedora.
       */
      @keyframes fedoraTip {

        5% {
          transform: translate3d(-80px,60px,0) scale(.8);
          opacity: 1;
        }


        40% {
          transform: translate3d(-80px,60px,0) rotate(-30deg) scale(.8);
          opacity: 1;
        }

        60% {
          transform: translate3d(-80px,60px,0) rotate(0deg) scale(.8);
          opacity: 1;
        }


        to {
          transform: translate3d(-80px,-2000px,0) rotate(180deg) scale(.8);
          visibility: hidden;
          opacity: 1;
        }

      }

      @keyframes fedoraTipNorm {

        1% {

        }

        10% {
          transform: translate3d(0,0px,0) rotate(0deg) scale(1);
        }

        30% {
          transform: translate3d(0,0px,0) rotate(-5deg) scale(1);
          opacity: 1;
          box-shadow: 0px 5px 10px rgba(0,0,0,1);
        }

        70% {
          transform: translate3d(0,0px,0) rotate(0deg) scale(1);
          opacity: 1;
        }



      }


      .fedoraTip::after {
        z-index: 5;
        width: 450px;
        content: '';
        background: url('https://vignette.wikia.nocookie.net/roblox/images/3/39/ROBLOX_Black_Pinstripe_Fedora.png/revision/latest?cb=20170213154343');
        background-repeat: no-repeat;
        animation-timing-function: ease-in-out;
        transform-origin: bottom center;
        animation-name: fedoraTip;
        animation-duration: 5s;
        animation-fill-mode: forwards;
        vertical-align: baseline;
        position: absolute;
        top: -200%;
        right: -50%;
        bottom: -50%;
        left: -50%;

      }

       .fedoraTip {
         /*position: absolute;*/
         animation-timing-function: ease-in-out;
         transform-origin: bottom center;
         animation-name: fedoraTipNorm;
         animation-duration: 5s;
       }




/****************WOW***************/

/**
 * blazingStar
 * - Radiate shiny things
 */
 @keyframes blazingStar {
   1% {
     border-radius: none;
     box-shadow: 0px 0px 40px rgba(255, 255, 0,.6);
     transform: scale(1);
   }
   10% {
     box-shadow: 0px 0px 0px;
     /*border-radius: 50%;*/
     transform: scale(1);
   }
   20% {
     box-shadow: 0px 0px 120px rgba(255, 255, 0,.6);
     /*border-radius: 50%;*/
     transform: scale(1);
   }
   30% {
     box-shadow: 0px 0px 0px;
     /*border-radius: 50%;*/
     transform: scale(1);
   }
   40% {
     box-shadow: 0px 0px 120px rgba(255, 255, 0,.6);
     /*border-radius: 50%;*/
     transform: scale(1);
   }
   50% {
     box-shadow: 0px 0px 0px;
     /*border-radius: 50%;*/
     transform: scale(1);
   }
   60% {
     box-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
     /*border-radius: 50%;*/
     transform: scale(1);
   }

   70% {
     box-shadow: 0px 0px 0px;
     /*border-radius: 50%;*/
     transform: scale(1);
   }
   80% {
     box-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
     /*border-radius: 50%;*/
     transform: scale(1);
   }

   90% {
     box-shadow: 0px 0px 0px;
     /*border-radius: 50%;*/
     transform: scale(1);
   }
   99% {
     box-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
     /*border-radius: 50%;*/
     transform: scale(1.1);
   }
 }

.blazingStar {
  animation-timing-function: ease-out;
  transform-origin: bottom center;
  animation-name: blazingStar;
  animation-duration: 5s;
}

/**
 * blazingStarText
 * - Radiate shiny text
 */
@keyframes blazingStarText {
  1% {
    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
    transform: scale(1);
  }
  10% {
    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
    transform: scale(1);
  }
  20% {
    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
    transform: scale(1);
  }
  30% {
    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
    transform: scale(1);
  }
  40% {
    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
    transform: scale(1);
  }
  50% {
    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
    transform: scale(1);
  }
  60% {
    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
    transform: scale(1);
  }

  70% {
    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
    transform: scale(1);
  }
  80% {
    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
    transform: scale(1);
  }

  90% {
    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
    transform: scale(1);
  }
  99% {
    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
    transform: scale(1);
  }
}

.blazingStarText {
  animation-timing-function: ease-out;
  transform-origin: bottom center;
  animation-name: blazingStarText;
  animation-duration: 5s;
}


/**
 * starWars
 * - Starwars sequence
 */
@keyframes starWars {
  0% {
    transform: translate3d(0,500px,0) rotateX(-60deg) scale(2);
  }
  99.9% {
    transform: translate3d(0, -1000px, 0) rotateX(60deg) scale(.19);
  }
  100% {
    display: none;
  }
}

.starWars {
  animation-timing-function: ease-out;
  transform-origin: bottom center;
  animation-name: starWars;
  animation-duration: 10s;
}


/**************** NORMIE *************/

/**
 * fadeIn
 * - fades in
 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

.fadeIn {
  animation-timing-function: linear;
  transform-origin: bottom center;
  animation-name: fadeIn;
  animation-duration: .3s;
}


/**
 * Pulse
 * - Increases and decreases in size
 */
@keyframes pulse {
  from {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  to {
    transform: scale(1);
  }

}

.pulse {
  animation-timing-function: linear;
  transform-origin: bottom center;
  animation-name: pulse;
  animation-duration: .75s;
  animation-iteration-count: 3;
}

/**
 * shaker
 * - Increases and decreases in size
 */
@keyframes shaker {
  from {
    transform: translate3d(0,0,0);
  }

  33% {
    transform: translate3d(-20px,10px,0);
  }

  66% {
    transform: translate3d(20px,0px,0);
  }


  to {
    transform: translate3d(0,0,0);
  }

}

.shaker {
  animation-timing-function: linear;
  transform-origin: bottom center;
  animation-name: shaker;
  animation-duration: .1s;
  animation-iteration-count: 10;
}