css shake animation

HTML

[code language=”html”]
<h1>shake effect!</h1>
[/code]

CSS / SCSS

[code language=”css”]
html, body {
height: 100%;
margin: 0;
}

body {
display: flex;
justify-content: center;
align-items: center;
font-family: ‘Source Code Pro’, monospace;
background: #000;
}

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); }
}

[/code]

css shake animation

The post Pure CSS Text Shake Animation appeared first on csshint - A designer hub.