A Pen by Sean Dempsey.

index.html

<p>Inspired by <a href="http://junglejunglejungle.com" target="_blank">junglejunglejungle.com</a>
<h1></h1>

script.js

//NOOOOOOOPPPEEEE

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Creepster);
$grey: #2E2E2E;
$grey:#fff;
$brown:#311509;
$dg: #B2D054;
$og: #1E7C11 ;

h1 {

font-size:5em;
transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
  text-align:center;
  text-shadow: -2px -2px 0 $grey, 
    2px -2px 0 $grey, 
    -2px  2px 0 $grey, 
    2px 2px 0 $grey, 
    6px 6px 0 $og, 
    10px 10px 0 $dg, 
    14px 14px 0 $brown, 
    18px 18px 0 $og, 
    22px 22px 0 $dg;
  
  animation: tripy .33s infinite;
  -webkit-animation: tripy .33s infinite;
  &:after {
    content:"Awwww Yeaaah!";
  }

  &:hover:after {
    content:"Party's Over! Nothing to See Here.";  
  }
  
  &:hover {
    text-shadow:none;
    -webkit-animation:none;
    color:$og;
    
  }
}
@keyframes tripy {
  
  0% {
    color: $brown;
    
    text-shadow: -2px -2px 0 $grey, 
      2px -2px 0 $grey, 
      -2px  2px 0 $grey, 
      2px 2px 0 $grey, 
      6px 6px 0 $og, 
      10px 10px 0 $dg, 
      14px 14px 0 $brown, 
      18px 18px 0 $og, 
      22px 22px 0 $dg;
  }

  33% {
    color: $og;
  
    text-shadow: -2px -2px 0 $grey, 
      2px -2px 0 $grey, 
      -2px  2px 0 $grey, 
      2px 2px 0 $grey, 
      6px 6px 0 $dg, 
      10px 10px 0 $brown, 
      14px 14px 0 $og, 
      18px 18px 0 $dg, 
      22px 22px 0 $brown;
  }

  66% {
    color: $dg;
  
    text-shadow: -2px -2px 0 $grey, 
      2px -2px 0 $grey, 
      -2px  2px 0 $grey, 
      2px 2px 0 $grey, 
      6px 6px 0 $brown, 
      10px 10px 0 $og, 
      14px 14px 0 $dg, 
      18px 18px 0 $brown, 
      22px 22px 0 $og;
  }

  100% {
    color: $brown;
  
    text-shadow: -2px -2px 0 $grey, 
      2px -2px 0 $grey, 
      -2px  2px 0 $grey, 
      2px 2px 0 $grey, 
      6px 6px 0 $og, 
      10px 10px 0 $dg, 
      14px 14px 0 $brown, 
      18px 18px 0 $og, 
      22px 22px 0 $dg;
  }

}

@-webkit-keyframes tripy {
  
  0% {
    color: $brown;
    
    text-shadow: -2px -2px 0 $grey, 
      2px -2px 0 $grey, 
      -2px  2px 0 $grey, 
      2px 2px 0 $grey, 
      6px 6px 0 $og, 
      10px 10px 0 $dg, 
      14px 14px 0 $brown, 
      18px 18px 0 $og, 
      22px 22px 0 $dg;
  }

  33% {
    color: $og;
  
    text-shadow: -2px -2px 0 $grey, 
      2px -2px 0 $grey, 
      -2px  2px 0 $grey, 
      2px 2px 0 $grey, 
      6px 6px 0 $dg, 
      10px 10px 0 $brown, 
      14px 14px 0 $og, 
      18px 18px 0 $dg, 
      22px 22px 0 $brown;
  }

  66% {
    color: $dg;
  
    text-shadow: -2px -2px 0 $grey, 
      2px -2px 0 $grey, 
      -2px  2px 0 $grey, 
      2px 2px 0 $grey, 
      6px 6px 0 $brown, 
      10px 10px 0 $og, 
      14px 14px 0 $dg, 
      18px 18px 0 $brown, 
      22px 22px 0 $og;
  }

  100% {
    color: $brown;
  
    text-shadow: -2px -2px 0 $grey, 
      2px -2px 0 $grey, 
      -2px  2px 0 $grey, 
      2px 2px 0 $grey, 
      6px 6px 0 $og, 
      10px 10px 0 $dg, 
      14px 14px 0 $brown, 
      18px 18px 0 $og;

  }

}
html {
  font-family: 'Creepster', cursive;
 background:$dg; 
}

p {
   text-align:center; 
}

a {
  color:$og;
  text-shadow: -2px -2px 0 $grey, 
    2px -2px 0 $grey, 
    -2px  2px 0 $grey, 
    2px 2px 0 $grey, 
    6px 6px 0 $og, 
    10px 10px 0 $dg, 
    14px 14px 0 $brown, 
    18px 18px 0 $og, 
    22px 22px 0 $dg;
  
   animation: tripy .33s infinite;
  -webkit-animation: tripy .33s infinite;
  
  &:hover {
    -webkit-animation:none;
    text-shadow: none;
    text-decoration:none;
    
  }
}

Text-Animation.markdown

Text Animation

Hover over the text

A Pen by Sean Dempsey on CodePen.

License.