How to Add CSS Fade Effect on Page Load in Blogger
Hi to all, in this article I am going to tell you all about how to add CSS fade effect on page load in your blogger website easily in just few minutes.
A CSS animation is defined with the two keyframes, one with opacity set to 0 and other with opacity set to 1.
When the animation type is set to ease, then the animation smoothly fades in the webpages.
SO, Read the below steps carefully to get clear understanding about adding CSS fade effect on page load in blogger easily without any error.
Steps to Add CSS Fade Effect on Page Load in Blogger
Step-1: Sign-in to Blogger
First of all you need to visit official website of blogger.
And now you need to sign-in to your blogger website dashboard by using your login credentials.
Step-2: Backup Blogger Theme
After successful login to your blogger dashboard you need to backup your blogger website theme code for future use.
You need to follow the below provided steps to backup your blogger theme
Blogger dashboard -> Theme section -> Arrow icon -> Backup theme -> Download Theme.
After successful backup of your blogger theme, you need to open your blogger theme editor to add the code.
To open blogger theme editor you need to follow the below path.
Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.
Step-4: Adding Code in Body CSS
First of all after opening the theme editor click on the screen and press CTRL + F and then a search bar will open an in that search bar enter "body {" and then click enter.
Now copy below provided code and add it in CSS body as follow
Demo: Add the animation CSS code as shown in below code format
body {
animation: fade1n 3s;
}
Copy below code
animation: fade1n 3s;
Step-5: Add Keyframes Code
After adding the animation code inside the CSS body, now you need to add keyframes just below the CSS body.
@keyframes fade1n{from{opacity:0}to{opacity:1}}
Step-6: Saving the Theme
After adding the above two codes, then you need to click on save icon to save your complete theme.
And after saving the code, visit your website and check once the code is working properly or not, if not pleased below note points.
Note:
If you get any error while saving the code then you need to restore your backup theme code and need to repeat the same process as given in above steps carefully.
Add the two codes carefully, if you in any other place instead of CSS body then this code will not work in your website, so be careful before adding the code in your theme editor.
Conclusion
I hope that you have understood about adding CSS fade effect on page load in your blogger website easily in just few minutes by using CSS.
