How can I make this class change its background-image after 2 seconds of the div being in viewport? It's not changing for me:
.cover-gradient {
background-image: none;
}
.cover-gradient:after {
opacity: 1;
transition: 0.3s;
animation: fadeMe 2s linear;
}
@keyframes fadeMe {
0% {
background-image: none;
}
100% {
background-image: linear-gradient(to right, rgba(179, 49, 95, 0.5), rgba(58, 0, 117, 0.5));
}
}
Thanks.
When animating in CSS, you need to animate between two similar values.
For example, this will work:
max-height: 0px;
and
max-height: 100px;
and this will not:
max-height: none; and max-height: 100px;
However, for performance reasons, it's advisable to use opacity and transform properties when animating in CSS
.cover-gradient {
height: 100vh;
width: 100vw;
opacity: 0;
animation: fadeMe 0.3s linear;
animation-delay: 2s;
animation-fill-mode: forwards;
background-image: linear-gradient(to right, rgba(179, 49, 95, 0.5), rgba(58, 0, 117, 0.5));
}
@keyframes fadeMe {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}