.demo{ background: #eb3b5a; }
.text-effect{
color: #fff;
font-family: "Russo One", sans-serif;
font-size: 100px;
font-weight: 400;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
animation: flipOutX 2s linear alternate infinite;
}
@keyframes flipOutX{
from{
transform: perspective(400px) rotateX(0);
}
30%{
transform: perspective(400px) rotateX(-20deg);
opacity: 1;
}
to{
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 70px; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 576px){
.text-effect{ font-size: 35px; }
}