<div class="center-outer">
<div class="center-inner">
  
<h1 class="shake" data-shaking-text="Example Text">Example Text</h1>
  
</div>
</div>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}

.center-outer {
display: table;
width: 100%;
height: 100%;
}

.center-inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}

body {
font-family: 'Montserrat', sans-serif;
}

.shake {
display: inline-block;
position: relative;
padding: 0 1px;
}

.shake::after {
content: attr(data-shaking-text);
position: absolute;
left: 1px;
top: 0;
-webkit-animation: vibrateAnim 0.1s linear infinite;
animation: vibrateAnim 0.1s linear infinite;
}

@-webkit-keyframes vibrateAnim {
0% {left: 1px;}
25% {left: 0;}
50% {left: 1px;}
75% {left: 0;}
100% {left: 2px;}
}

@keyframes vibrateAnim {
0% {left: 1px;}
25% {left: 0;}
50% {left: 1px;}
75% {left: 0;}
100% {left: 2px;}
}

External CSS

  1. //fonts.googleapis.com/css?family=Montserrat

External JavaScript

This Pen doesn't use any external JavaScript resources.