Did you notice the fadeIn animation in this website when you came in? It’s the same one you can find in the Infinity Pro theme by StudioPress. You can easily see what I mean if you navigate from page to page in this website or if you reload this page.
Today I’ll show you how you can add this fadeIn (or anything else) animation to any Genesis website.
Here are the steps we will follow to achieve this:
1. Add some extra CSS classes to the “.site-container”.
2. Create some basic CSS3 animations using Keyframes.
Add the extra classes to the “.site-container”
In this example we will be adding the classes “animate-site-container” and “fadeIn”.
In the CSS below you will find an animation called “fadeInUp” too. Try replacing “fadeIn” with “fadeInUp” in the code above to change the effect.
Create the CSS animations
You can use any other animation you want, but I suggest you go with the fadeIn one for this kind of effect. I think it’s the only one that won’t look wierd on page load.
Attributes like animation-delay and animation-duration are there for you to edit them. Change the number in seconds (ex. 1.4s) to see how these will affect the whole animation.
Feel free to share the link of the website you’ve implemented this effect in the comments below!
Leave a Reply