[SOLVED] Simple Custom CSS Help

How To
1

Hello,

I am trying to add a simple fadeIn animation in the Custom CSS area of an element using the following code:

%root% {
animation: fadeIn 5s;
}

It appears to function correctly in the builder but when I try and view it on the frontend it never animates. I am sure this is something simple I am missing but could someone point me in the right direction please?

Thanks

2

use something like:

%root% {
  opacity: 0;
  animation: fadeIn 5s ease-in; 
  animation-iteration-count: 1;
  opacity: 1;
}

@keyframes fadeIn {  
  0% {  
       opacity:0;  
   }  

100% {  
       opacity:1;  
   }  
}
3

Perfect, that fixed it. Thank you! Is it the lack of keyframes/opacity that caused this? Or the lack of iterations and telling it to ease in? If so do you have a resource you could point me to so that I may read up on it?

4

Glad it helped. You have used the animation called “fadeIn” but it didn’t exist so that is where you create your animation using keyframes and give it a name.

Here is a good article on it: animation | CSS-Tricks - CSS-Tricks
A video: https://youtu.be/SgmNxE9lWcY?t=271

Hope that helps.

1 Like
5

Beautiful, appreciate the help and resources.