html{
background-color:grey;
}
div{
text-align:center;
margin-top: 20%;
}
p{
font-size:100px;
}
#shake:hover{
-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);}
}