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.
Free Intro Guide to HTML & CSS [Download Now]

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:

.fade-in {
animation: fadeIn ease 20s;
-webkit-animation: fadeIn ease 20s;
-moz-animation: fadeIn ease 20s;
-o-animation: fadeIn ease 20s;
-ms-animation: fadeIn ease 20s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

fade in image using css on your website

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.

For example:

<div class="fade-in">

<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.

Here’s the code to add to your CSS:

div p {
display: inline-block;
font-family: 'Montserrat';
font-size: 30px;
color: black;
text-transform: none;
margin: 0 20px;
opacity: 0.0;
animation: fadeIn ease 10s;
-webkit-animation: fadeIn ease 10s;
}

@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

fade-in text in css

Check it out on CodePen.

The primary difference between this code and the code used for achieving a fade-in animation effect with images is that it includes text properties, such as font-size, font-family, and text-transform.

Use the div p class to apply the fade-in animation with HTML.

<div>

<p>Fade-in Text in CSS</p>

</div>

Fade-in on Hover

A more interactive way to incorporate a fade-in animation effect involves creating hover functionality. This can be applied to text or images.

Use this CSS code:

.fade-in {
opacity: 50%;
transition:opacity 0.8s
}

.fade-in:hover {
opacity:100%;
transition:opacity 0.5s
}


As you’ll see, this code is set so that the image starts at 50% opacity, increasing to 100% opacity when a user hovers on it.

Check it out on CodePen.

Fade-in on Scroll

Using fade-in animation with scrolling is a little more complicated in that you’ll have to also use JavaScript.

The JavaScript will register the scroll, triggering the CSS to adjust the animation.

The CSS portion of your code should look something like this code shared by Staffan Adolfsson on CodePen:

body,
html,
h1 {
margin: 0;
padding: 0;
}
h1 {
color: white;
font-size: 4rem;
text-align: center;
}
section {
height: 100vh;
}
.tag {
}

.tag {
opacity: 0;
transform: translate(0, 10vh);
transition: all 1s;
}

.tag.visible {
opacity: 1;
transform: translate(0, 0);
}

.yellow {
background-color: lightyellow;
}
.red {
background-color: lightcoral;
}
.blue {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}


For the JavaScript aspect, you’ll want to plug in this code:

$(document).on("scroll", function() {
var pageTop = $(document).scrollTop();
var pageBottom = pageTop + $(window).height();
var tags = $(".tag");

for (var i = 0; i < tags.length; i++) {
var tag = tags[i];

if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible");
} else {
$(tag).removeClass("visible");
}
}
});

Finally, the corresponding HTML code:

<section class="yellow"><h1>text here</h1></section>

<section class="tag red"><h1>text here</h1></section>

<section class="tag blue"><h1>text here</h1></section>

<section class="tag green"><h1>text here</h1></section>

Create Fade-in Animation on Your Website

Fade-in animation can be a powerful tool in telling a meaningful story and improving engagement. But don’t add unnecessary animation to your website just for the sake of using animation.

Focus on using fade-in animation to highlight certain elements and to create smoother transitions, as well as improve the overall user experience of your website.

New Call-to-action

 css introduction

Originally published Feb 17, 2020 4:55:17 PM, updated February 18 2020

Topics:

CSS Animation