CSS Animations

index.jade

main.col
  .row.row-top
    h1.animated HELLO
  .row.row-bottom
    .row.toolbar
      .row.select-bar
        select.animation-selector
          option zoomInFlip
          option springOutEntrance
          option springInExit          
      .btn
        p animate

script.js

(function($){
  $(function(){

    var textAnimator = {
      animatable: $('h1'),
      animationSelector: $('select.animation-selector'),
      play: function(){
        this.animatable.css({animationName: this.animationSelector.val()});
      }
    };

    textAnimator.animationSelector.on('change', function(){
      textAnimator.play();
    });

    $('.btn').on('click', function(){
      textAnimator.play();
    });
  
    textAnimator.animatable.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      textAnimator.animatable.css({animationName: 'none'});
    });
    
  });

})(jQuery);

style.scss

// $dark: rgba(0, 25, 43, 0.8);
$dark: rgba(50, 70, 84, 1);
$light: rgba(160, 200, 162, 0.6);
$white30: rgba(255, 255, 255, 0.3);
$white60: rgba(255, 255, 255, 0.6);

* {
 margin: 0;
}
main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 10vw;
  background: $dark;
  font-family: helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  overflow: hidden;
}
.col {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100%;
  &-top {
    align-self: flex-end;
    align-items: flex-end;
    height: 50%;
    border-bottom: 1px solid $white30;
  }
  &-bottom {
    align-items: flex-start;
    height: 50%;
    background: $dark;
    z-index: 999;
  }
}
h1 {
  margin: 0;
  font-size: 14vw;
  font-weight: 300;
  color: $light;
  text-shadow: 0 0 2px $dark;
  letter-spacing: 5vw;
}
.toolbar {
  align-items: stretch;
  margin-top: 40px;
  .select-bar {
    justify-content: flex-end;
    align-items: stretch;
    flex-basis: 300px;
    padding: 10px 0 10px 40px;
    background: $white30;
    border-radius: 4px 0 0 4px;
    color: $white60;
  }
}
select {
  width: 100%;
  font-size: 1.5rem;
  outline: 0;
  border: 0;
  border-radius: 0;
  -webkit-appearance: textfield;
  -moz-appearance: window;
  appearance: none;
  background: url(http://nathanj.me/images/downarrow.svg) no-repeat right center transparent;
  background-size: 30% 30%;
}
.btn {
  min-width: 120px;
  padding: 20px;
  background: $light;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  &:hover {
    p {
      letter-spacing: 5px;
    }
  }
}
p {
  color: $white30;
  text-decoration: none;
  text-align: center;
  transition: all 200ms ease-out;
}
@keyframes zoomInFlip{
  from {
    opacity: 0;
    transform: perspective(300px) translateY(40px) rotateX(-70deg) scale(.2, .2);
  }
  40% {
    opacity: 0.8;
    transform: perspective(300px) translateY(10px) rotateX(-60deg);
  }
  60% {
    transform: scale(.6, .6);
    transform: perspective(300px);
  }
  80% {
    transform: scale(1.2, 1.2);
    transform: perspective(300px) rotateX(10deg);
  }
  to {
  }
}

@keyframes springInExit{
  from {
    opacity: 1;
    letter-spacing: 5vw;
  }
  50% {
    opacity: 1;
    letter-spacing: 7vw;
  }
  to {
    opacity: 0;
    letter-spacing: -10vw;
  }
}

@keyframes springOutEntrance{
  from {
    opacity: 0;
    letter-spacing: -10vw;
  }
  50% {
    opacity: 1;
    letter-spacing: 7vw;
  }
  to {
    opacity: 1;
    letter-spacing: 5vw;
  }
}
.animated {
  animation-duration: 700ms;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.97, .41, .68, 1);
}