I am facing an issue with CSS while designing my website. I reached out to the plugin developer for help through a ticket submission, but unfortunately, I have not received a response yet.
On my homepage at , I have utilized CSS keyframes to create a text effect for the slider section.
Below is the CSS code for the keyframes:
@keyframes color-text {
0% {
background-position: 0 0;
}
100% {
background-position: 1000px 0;
}
}
.canthoweb {
background: linear-gradient(to right, #048A81 0%, #048A81 15%, #048A81 35%, #048A81 50%, #048A81 85%, #ffdd00 90%, #048A81 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: color-text 5s infinite;
}
However, the issue arises when this keyframe affects the modal popup, even though I have not used the .canthoweb class in the modal popup section.
To see the modal popup, click on the three boxes below the slider. The modal popup will appear with all text content displaying the CSS keyframe effect.
Why is the CSS keyframe being applied to the modal popup when I did not specify the keyframe class for that section?