/* Change this at will */
.bgtext span{
  -webkit-animation:fade 4000ms;
  -moz-animation:fade 4000ms;
  -ms-animation:fade 4000ms;
  animation:fade 4000ms;
}
#out{
  position:absolute;
  height:100%;
  width:100%;
  overflow:hidden;
  background-color:#000;
  font-weight:normal;
  z-index: 0;
}
.debug{
  position:absolute;
  top:0;
  right:0;
}
.trail{
  width:25px; /* Setting a width prevents letters from shifting once wider character are drawn in*/
  text-align:center;
  opacity:1;
  position:absolute;
  color:#0f0;
}
.bgtext span{
  opacity:0;
}
@-webkit-keyframes fade {
  0%{
    opacity:1;    
    -webkit-transform: rotateY( 0deg);

  }
  100%{
    opacity:0;
    -webkit-transform: rotateY( -180deg);
  }
}
@-moz-keyframes fade {
  0%{
    opacity:1;    
    -moz-transform: rotateY( 0deg);

  }
  100%{
    opacity:0;
    -moz-transform: rotateY( -180deg);
  }
}
@-ms-keyframes fade {
  0%{
    opacity:1;    
    -ms-transform: rotateY( 0deg);

  }
  100%{
    opacity:0;
    -ms-transform: rotateY( -180deg);
  }
}
@keyframes fade {
  0%{
    opacity:1;    
    transform: rotateY( 0deg);

  }
  100%{
    opacity:0;
    transform: rotateY( -180deg);
  }
}