Animation — when done right — brings a website to life and increases engagement.
When done wrong, it’s nauseating.
An engaging website helps accomplish business goals. With so much competing for the average consumer’s attention, you need to find ways to stand out.
Subtle animation effects can be just the way to make an impression on a website visitor.
One popular type of animation that can be effectively used by nearly any brand with any voice is fade-in animation. This stylistic effect allows for images or text on your website to gradually appear or disappear.
The impact of fade-in animation can be powerful. Thankfully, it’s fairly easy to implement with Cascading Style Sheets (CSS) — a coding language used to enhance the appearance of your website.
Why Add Fade-in Animation to Your Website?
Adding animation to your website shouldn’t be an afterthought. You don’t want it to be something you throw into the mix just to add some flash to your website.
Instead, every design choice must be justified in terms of what it contributes to (or detracts from) the user experience (UX).
So consider this:
Since animation involves movement, it’s nearly impossible to ignore this type of design. Because of its visual prominence, you need to be thinking about how to implement it while you’re in the early stages of designing a website.
The purpose of website animation goes beyond aesthetics. Animation can be used to improve the flow of your website and create a more engaging user interface (UI).
Fade-in animation is just one of many types of animation you can implement on your website. But fade-in animation, in particular, offers plenty of flexibility: you can create image fades, text fades, hovering fades, and scrolling fades.
Fade-in Image Using CSS
One of the most popular uses of fade-in animation is in conjunction with images. In these instances, an image will go from transparent to full opacity.
Software engineer Tremaine Eto shares this code example for making it happen:
You can play with this code — which was used to create the above cat GIF — on CodePen.
Within this code, there are several variables you can adjust to create the desired outcome.
One of the first you might adjust is the animation property (currently set at 20 seconds) to any amount of time you desire.
You’ll also notice "-webkit", "-moz", "-o", and "-ms" — they’re vendor-prefix properties. These properties make it so that your fade-in animation code works across various browsers and rendering engines.
For example, "-webkit" is for Chrome, Safari, and almost all iOS browsers.
You can keep reusing this CSS code with other images by using the fade-in CSS class within an element containing an image.
<img src="image link here">
</div> Thus, everything using the <div class="fade-in"> tag will display fade-in CSS property result.
Fade-in Text Using CSS
You can use the same CSS properties shared above with just a slight change to create a text fade-in effect.