Archived topic
Animate Header in Homepage
3 replies · Started by Sharon on March 30, 2022
Hi, sorry I have scanned the forums and checked out quite a few discussions and some of the plug-ins mentioned but they are either quite old threads or are looking for something far more complicated than I want. I literally want to animate some header blocks in the homepage - a simple fade-in would work fine. Grateful for advice.
Hi there,
a real simply fade-in can be done with this CSS:
.fade-me {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
100% {
opacity: 1;
}
}That will do slow fade in over 3 seconds on any Block that has the fade-me class added to it.
Note the steps in the animation - by making the 25% = 0 it means theres a slight delay before it starts fading in.
For it to work the Element needs to be on screen when it first loads.
You little beaut! Thanks so much - just what I wanted.
I assume that worked :) Thats awesome - glad to be of help!
