An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Spice up your page loads with subtle animations!
In today's article I wanted to share a little twist that I like to include on some of my websites to enhance the overall user experience - adding subtle animations on page load.
I think this really adds to the website, and in some way, makes it feel a little snappier than it actually is.
HTML
You'll want to pick a portion of your site (usually the main content) to apply the animation to, for example:
<div class="container"> <!-- body content here --></div>
CSS
For the CSS, we need to apply an animation to the .container
class, and then specify the keyframes for it. Let's identify the keyframes with fadeIn
:
.container { animation: fadeIn 0.5s;}@keyframes fadeIn { from { opacity: 0.25; transform: rotateY(-10deg); } to { opacity: 1; transform: rotateY(0deg); }}
As we can see with this simple @keyframes
rule, we only slightly adjust the initial rotation and opacity for the element - you can choose whichever properties you like here but make sure it's not too much. Also, a snappy duration of 0.5s
tends to work quite nicely.
That's it! Load up the page and see what it looks like
Video Tutorial
If you prefer this tutorial in the form of video, check it out below on my YouTube channel, dcode.
Original Link: https://dev.to/dcodeyt/spice-up-your-page-loads-with-subtle-animations-4ek7
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To