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.
CSS Fade Transition
A CSS fade transition is a stylistic effect in which an element — like an image, text, or background — gradually appears or disappears on the page.
To create these effects, you'll use either the transition or animation property in CSS. When using the transition property, you'll only be able to specify an initial state and a final state — not any intermediate points. For example, you can set a div element to transition from red to purple. But to specify the div to change from red to blue to purple to pink, you'll need to use the animation property.
CSS transitions also require a trigger — like a visitor hovering over on an element — and animations do not. By default, an animation will automatically begin its sequence when the page loads. Although, you can delay its start time using the animation-delay property.
You can see how both the transition and animation properties are used in the examples below.
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. There's hover animations, loading animations, and dozens of other animation examples. But fade-in animation, in particular, offers plenty of flexibility: you can create image fades, text fades, hovering fades, scrolling fades, and background fades.
Below we'll walk through an example of each.
Fade-in Image Transition 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. Let's take a quick look at the CSS opacity property before diving into the example.
CSS Transition Opacity
The CSS opacity property is used to specify how opaque or transparent an element is. Values for this property range from 0 to 1, with 0 being completely transparent and 1 being completely opaque.
When combined with the animation or transition property, you can use the opacity property to make an element change from completely transparent to completely opaque (or vice versa) over a period of time.
When transitioning from completely transparent to completely opaque, the element will gradually appear on the page. That's called a fade-in animation.
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 5 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-image CSS class within an element containing an image.
Fade-in Text Transition Using CSS
You can use the same CSS properties shared above with just a slight change to create a text fade-in effect.
For example, you could set the background to transition from a light yellow color to a darker green over the duration of six seconds — and then have it start over and repeat.