JSFiddle - React, Tailwind, and code Playground
by Fansublogger
HTML
<div class="textanimasi2">
Hilman F</div>
CSS
.textanimasi2{
text-align:center;
letter-spacing:-.08em;
background: -webkit-gradient(linear,left top,right bottom,from(#E51D66),to(#705170));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation:slide1 5s linear infinite;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-moz-animation:slide1 5s linear infinite;
background: -moz-gradient(linear,left top,right bottom,from(#E51D66),to(#705170));
font:700 5.4em helvetica, sans-serif;
text-shadow: 0 1px 1px transparent;}
@-webkit-keyframes slide1 {
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes slide1 {
0% { -moz-transform: rotate(0); }
1% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
9% { -moz-transform: rotate(30deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% {...