Page fade-in animation with CSS 🎨
#1 CSS Tips and Tricks
Hi folks! I am a 👨💻 Full-Stack Developer, occasional Designer, and Blogger facilitating the world with User Experience 🧐 as a Design Thinker 💭 and User-Centric Developer 💯 and while also exploring ☁️ Cloud
Working 💼 @HackerRank as a Software Development Engineer 2
🤓 I have a keen interest in 🤝 collaborating with others and empowering others to build digital solutions that solve real-world 🌍 problems. I'm a Creative Technologist who believes that the merger between Design Thinking and Digital Technologies will lead to the building of user-centric solutions that are impactful toward the betterment of business & society.
Simple animations can bring a huge difference to your websites.
Let us create a page fade-in animation with CSS.
The above Codepen shows animation with
opacity:from0to1. Because ofinfinite, it is animating continuously.
Check the whole code in Codepen or, Check the code below for the animation
HTML snippet.
<body>
<h1>
This is the fade-in animation moving in the y-axis
</h1>
<!-- Your code -->
</body>
Now, add the below code to your 🎨 CSS.
body{
animation: fadeIn 2s infinite;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
If you remove the infinite from the CSS you will get the animation effect on the first render only. With infinite it is animating continuously.
There can be many more possibilities.
Check this out,
The above codepen shows animation with
transform:fromtranslateY(50px)totranslateY(0)andopacity:from0to1. Because ofinfiniteit is animating continuously.
Link for Codepen
The HTML code snippet will be the same as for the 🎨 CSS. check the code below 👇
body{
animation: fadeIn 2s infinite;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Just remove the infinite from the CSS code for getting the animation once on the load of the page only.
Now, put on your creative hats and make an animation effect for your whole website on the initial load.
You can check something similar I did for my portfolio website. Souravdey.Space ✌
Drop the website link in the comments for which you would be doing it or have done it.
Show your love by Sharing the blog. 🤗
