My animation, , appears correctly on mobile but not desktop. It is too wide on desktop and I have tried adjusting the CSS without success.
@media (max-width: 5000px) and (min-width: 768px)
{.contact::before.contact::after {content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
}}
Despite multiple divs within one query, my CSS checker does not flag any issues, so theoretically it should work.
Changing width: 100%; to width: 50% in the CSS works, but then the width is too small for mobile.
The HTML code is:
<div class="contact" data
text="CONTACT">CONTACT</div>
CSS FOR ANIMATION
page-id-1239 { background: #000; display: flex;
align-
items: center;
height: 100vh;
justify-content: center; }
.contact {
font-family: arial;
position: relative;
color: #fff;
text-align: center;
font-size: 7rem;
max-width: 1200px;
margin: 0 auto;
}
.contact::before
.contact::after {
content: attr(data-text);
position:
absolute; top: 0;
left: 0;
width: 100%; height: 100%;
}
.contact::before {
left: 2px;
clip: rect(79px, 1200px, 86px, 0);
text-shadow: -1px 0 red;
background: #000;
animation: brasil-anim-2 1s infinite linear alternate-
reverse;
}
.contact:after {
left: -2px;
clip: rect(79px, 1200px, 86px, 0);
text-shadow: -1px 0 blue
000; animation: brasil-anim-1 1s infinite linear alternate-
reverse;
Animation-delay: -1s;
}
@keyframes brasil-anim-1 {
0% {
Clip: rect(20px, 1200px, 76px, 0);
}
20% {
Clip: rect(19px, 1200px, 16px, 0);
}
40% {
Clip: rect(16px, 1200px, 3px, 0);
}
60% {
Clip: rect(62px, 1200px, 78px, 0);
}
80% {
Clip: rect(25px, 1200px, 13px, 0);
}
100% {
Clip: rect(53px, 1200px, 86px, 0);
}
}
@keyframes brasil-anim-2 {
0% {
Clip: rect(79px, 1200px, 86px, 0);
}
20% {
Clip: rect(20px, 1200px, 30px, 0)
}
40% {
Clip: rect(25px, 1200px, 5px, 0)
}
60% {
Clip: rect(65px, 1200px, 85px}
80% {
Clip: rect(120px, 1200px, 145px, 0)
}
100% {
clip: rect(95px, 1200px, 75px, 0)
}}