.delighter.right {
    -webkit-transform: translate(-100%);
    -ms-transform: translate(-100%);
    transform: translate(-100%);
    opacity: 0;
    -webkit-transition: all .75s ease-out;
    -o-transition: all .75s ease-out;
    transition: all .75s ease-out;
  }
  
  .delighter.right.started {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
  
  .delighter.left {
    -webkit-transform: translate(100%);
    -ms-transform: translate(100%);
    transform: translate(100%);
    opacity: 0;
    -webkit-transition: all .75s ease-out;
    -o-transition: all .75s ease-out;
    transition: all .75s ease-out;
  }
  
  .delighter.left.started {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
  
  .delighter.top {
    -webkit-transform: translatey(30%);
    -ms-transform: translatey(30%);
    transform: translatey(30%);
    opacity: 0;
    -webkit-transition: all .75s ease-out;
    -o-transition: all .75s ease-out;
    transition: all .75s ease-out;
  }
  
  .delighter.top.started {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
  
  .delighter.bottom {
    -webkit-transform: translatey(-30%);
    -ms-transform: translatey(-30%);
    transform: translatey(-30%);
    opacity: 0;
    -webkit-transition: all .75s ease-out;
    -o-transition: all .75s ease-out;
    transition: all .75s ease-out;
  }
  
  .delighter.bottom.started {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
  }
  
  .delighter.fadein {
    opacity: 0;
    -webkit-transition: all .75s ease-out;
    -o-transition: all .75s ease-out;
    transition: all .75s ease-out;
  }
  
  .delighter.fadein.started {
    opacity: 1;
  }