CSS
.text{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000000;
}
.text .animation{
position: absolute;
top: 35%;
left: 45%;
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 300;
text-align: center;
letter-spacing: 4px;
color: #FFFFFF;
margin: auto;
transform: translateX(-45%) translateY(-35%);
animation: g 3s linear infinite;
}
.text .animation:after,
.text .animation:before{
content: 'HELLO!';
position: absolute;
overflow: hidden;
text-align: center;
margin: auto;
clip: rect(0, 900px, 0, 0);
}
.text .animation:after{
top: -2px;
left: 50%;
font-size: 16px;
color: green;
text-shadow: -2px 0 green;
animation: a 1s infinite linear alternate-reverse;
}
.text .animation:before{
left: 50%;
color: yellow;
text-shadow: 2px 0 yellow;
animation: b 1s infinite linear alternate-reverse;
}
@keyframes a{
0%{
clip:rect(30px,9999px,6px,0)
}
5%{
clip:rect(27px,9999px,30px,0)
}
10%{
clip:rect(6px,9999px,20px,0)
}
15%{
clip:rect(11px,9999px,8px,0)
}
20%{
clip:rect(23px,9999px,18px,0)
}
25%{
clip:rect(34px,9999px,25px,0)
}
30%{
clip:rect(19px,9999px,24px,0)
}
35%{
clip:rect(30px,9999px,20px,0)
}
40%{
clip:rect(24px,9999px,22px,0)
}
45%{
clip:rect(31px,9999px,9px,0)
}
50%{
clip:rect(47px,9999px,45px,0)
}
55%{
clip:rect(5px,9999px,6px,0)
}
60%{
clip:rect(10px,9999px,34px,0)
}
65%{
clip:rect(21px,9999px,33px,0)
}
70%{
clip:rect(19px,9999px,31px,0)
}
75%{
clip:rect(26px,9999px,44px,0)
}
80%{
clip:rect(34px,9999px,38px,0)
}
85%{
clip:rect(45px,9999px,40px,0)
}
90%{
clip:rect(6px,9999px,5px,0)
}
95%{
clip:rect(14px,9999px,87px,0)
}
to{
clip:rect(4px,9999px,58px,0)
}
}
@keyframes b{
0%{
clip:rect(80px,9999px,29px,0)
}
5%{
clip:rect(70px,9999px,93px,0)
}
10%{
clip:rect(95px,9999px,37px,0)
}
15%{
clip:rect(57px,9999px,78px,0)
}
20%{
clip:rect(8px,9999px,13px,0)
}
25%{
clip:rect(41px,9999px,35px,0)
}
30%{
clip:rect(58px,9999px,10px,0)
}
35%{
clip:rect(36px,9999px,89px,0)
}
40%{
clip:rect(91px,9999px,33px,0)
}
45%{
clip:rect(19px,9999px,48px,0)
}
50%{
clip:rect(11px,9999px,58px,0)
}
55%{
clip:rect(8px,9999px,58px,0)
}
60%{
clip:rect(26px,9999px,47px,0)
}
65%{
clip:rect(69px,9999px,73px,0)
}
70%{
clip:rect(74px,9999px,42px,0)
}
75%{
clip:rect(95px,9999px,96px,0)
}
80%{
clip:rect(51px,9999px,91px,0)
}
85%{
clip:rect(56px,9999px,17px,0)
}
90%{
clip:rect(48px,9999px,11px,0)
}
95%{
clip:rect(89px,9999px,98px,0)
}
to{
clip:rect(69px,9999px,63px,0)
}
}
@keyframes g{
0%{
transform:scale(1);
transform:skew(0,0);
}
50%{
transform:scaleY(1.2);
transform:skew(-10deg,0)
}
65%{
transform:skew(-85deg,0)
}
to{
transform:scale(1);
transform:skew(0,0)
}
}
