CSS Text-Shaking Animation Effect With Code

I found a really cool CSS animation text effect that, with the right mind-set could have many use-cases. My view is it looks great as a horror-themed effect, the shaky text gives me the feeling that somethings going wrong! Believe it or not, the animation in this article is made from pure CSS3, nothing less and nothing more.

The CSS-code makes use of the transform: skewX style six times in total, rapidly transforming the text back and forth in the degrees specified. See the CodePen below for yourself.

See the Pen Shake Effect by Dronca Raul (@rauldronca) on CodePen.0

See the code below that is used to deliver this effect to your web page. Note, it uses the @keyframes rule which you may or may not want to read about.

h1 {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 10vw;
  font-weight: 900;
  text-decoration: none;
  color: white;
  display: inline-block;
  background-size: 120% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -ms-background-clip: text;
  -ms-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  background-image: linear-gradient(45deg, 
                    #7794ff, 
                    #44107A,
                    #FF1361,
                    #FFF800);
  animation: .8s shake infinite alternate;
}

@keyframes shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}

Just for the fun of it, I decided to fork this CodePen and make a horror-style theme with the effect. By changing the Google font to ‘Creepster’ that can be found on Google’s font selection and changing the colours into a Halloween theme it looks great!

See the demo below –

See the Pen Horror Shake Effect by Danny Englishby (@DanEnglishby) on CodePen.0

Another way to use this would be a great way to simulate that your computer has been taking over. Let’s see what we can do with the CodePen.

See the Pen Hacked Shake Effect by Danny Englishby (@DanEnglishby) on CodePen.0

Imagine logging on to a website and seeing this message, i’m pretty sure i’d leave immediately!

Here is the CSS to re-create the effect –

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'monoton';
  background: #000;
}

h1 {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 4vw;
  text-align: center;
  font-weight: 900;
  text-decoration: none;
  color: white;
  display: inline-block;
  background-size: 120% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -ms-background-clip: text;
  -ms-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  background-color: #47ff3a;
  animation: 0.2s shake infinite alternate;
}

@keyframes shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}
Interesting Links

Hopefully some of you imaginative developers will find some great uses for this effect. The credit for the original creator of this effect goes to Raul Dronca, check him out on twitter!

CSS Text-Shaking Animation Effect With Code
Posted in CSS

You May Also Like

Leave a Reply

Your email address will not be published.