<div>
 <p id = "shake">Glitchy</p>
</div>
html{
/* background: url("http://www.hdwallpapersfan.com/wp-content/uploads/2013/03/Dark-Forest-Wallpapers20.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow:hidden; */
  background-color:grey;
}
div{
text-align:center;
margin-top: 20%;
}
p{
    font-size:100px;
   
}
#shake:hover{
/*animation*/
-webkit-animation:shake 0.2s infinite;
   -moz-animation:shake 0.2s infinite;
    -ms-animation:shake 0.2s infinite;
     -o-animation:shake 0.2s infinite;
        animation:shake 0.2s infinite;
}
@-webkit-keyframes shake {
    0% { -webkit-transform: skewX(1deg);} 
    10% { -webkit-transform: skewX(-8deg);}
    20% { -webkit-transform: skewX(23deg);  text-shadow:17px 8px rgba(0, 0, 0, 0.65);}
    30% { -webkit-transform: skewX(-70deg); }
    40% { -webkit-transform: skewX(30deg); }
    50% { -webkit-transform: skewX(-20deg);}
    60% { -webkit-transform: skewX(3deg); text-shadow:-10px -18px rgba(0, 0, 0, 0.65);}
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(30deg); }
    90% { -webkit-transform: skewX(0deg); text-shadow:20px 18px rgba(0, 0, 0, 0.65); }
    100% { -webkit-transform: skewX(0deg);}
}


@keyframes shake {
    0% { transform: skewX(1deg); } 
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(23deg); }
    30% { transform: skewX(-70deg); text-shadow:17px 8px rgba(0, 0, 0, 0.65); }
    40% { transform: skewX(30deg); }
    50% { transform: skewX(-20deg); }
    60% { transform: skewX(3deg); text-shadow:-10px 8px rgba(0, 0, 0, 0.65); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); text-shadow:30px 18px rgba(0, 0, 0, 0.65); }
    100% { transform: skewX(0deg);}
}
/* HOVER OVER THE WORDS

I WANTED TO TRY MAKING SOME NEW EFFECTS AND THOUGHT THAT THE GLITCHY EFFECT OF THE ENEMIES IN THE GAME ALAN WAKE WOULD BE COOL TO TRY AND RECREATE.

I PLAN ON LATER ADDING A PARTICLES AND EXPLOSION EFFECT 
*/ 


External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js