SCSS
@import "compass/css3";
html {
background: black;
}
.main {
width: 650px;
height: 350px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -325px;
overflow: hidden;
text-align: center;
}
.head h1 {
font-family: "Oswald";
text-align: center;
font-size: 10vw;
width: 100%;
position: absolute;
overflow: hidden;
margin-left: -15px;
color: transparent;
text-shadow: 0px 0px 3px #eee, 5px 5px 2px teal, -5px -2px 2px mix(black,red,50);
font-weight: 400;
@include transform(skewX(0deg));
@include animation(shift 4s ease-in-out infinite alternate);
}
@include keyframes(shift){
0%,40%, 44%, 58%, 61%, 65%,69%,73%,100%{
@include transform(skewX(0deg))
}
41%{
@include transform(skewX(10deg));
}
42%{
@include transform(skewX(-10deg));
}
59%{
@include transform(skewX(40deg) skewY(10deg));
}
60%{
@include transform(skewX(-40deg) skewY(-10deg));
}
63%{
@include transform(skewX(10deg) skewY(-5deg));
}
70%{
@include transform(skewX(-50deg) skewY(-20deg));
}
71%{
@include transform(skewX(10deg) skewY(-10deg));
}
}
