Fading in and out title in Header Slider

Hi folks, I’m trying to fade my header slider text in and out again between the animated header slides. This is the CSS code I use …

.text-slider.animated {
-webkit-animation-duration: 5s;
animation-duration: 5s;
}

@keyframes fadeInAnimation{
0% {opacity: 1;}
20% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}

.text-slider {
animation-name: fadeInAnimation;
}

But the keyframes seem to be ignored … so it’s it’s not fading out at all …
I guess me stupid … but what am I doing wrong?

Website: https://www.four-seasons-gardening.de

Cheers, Timo

Hello Timo,

First thanks for using our theme!

I did a inspection in your website and the keyframes/animation is being applied. We just need change the keyframes a bit:

@keyframes fadeInAnimation {
    0% {opacity: 0;}
    25% {opacity: 0;}
    70% {opacity: 1;}
    100% {opacity: 0;}
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Thank you Rodrigo!
Very much appreciated. Looks like I need to seriously improve my CSS capabilities … sorry for bothering you with this but your answer was a great help for me!
Cheers, Timo

1 Like

Hello Timo,

No worries! We are here to help! Feel free to ask anything when you need.

Great the issue is now resolved!

Kind Regards,

Rodrigo.

aThemes Support

1 Like