<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;}
}
This Pen doesn't use any external JavaScript resources.