CSS Fade In and Out Transitions

CSS transitions work wonders in cases where you'd like to include clean animations to the visual elements of your website.  With CSS fade transitions, you can easily adjust an element's opacity with smooth animations and very little code.

CSS Fade Out Transition

Let's start with a simple CSS fade out transition by creating a small div element:

<div class="box"></div>

And some styling to differentiate our new element from the rest of the page:

div.box {
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}

The above CSS code styles our new element with class box by making it 100x100 pixels in size with a red background. cursor: pointer sets the mouse cursor to the pointer graphic so we know that our new container is a clickable element within the page.

Now let's update that styling a bit to include a fade transition on click:

div.box {
width: 100px;
height: 100px;
background-color: red;
opacity: 1.00;
cursor: pointer;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;<br>
transition: 0.25s all ease-in-out;
}

div.box:active {
opacity: 0.00;
}

Many of our box class properties remain the same while new ones are added to create the animation effect:

  • opacity: Sets the visual opacity of the element, with accepted values ranging from 0.0 (fully transparent) to 1.0 (fully opaque).
  • transition: This is the shortened version of many different transition properties where 0.25s is the duration of the animation effect, in this case 0.25 seconds, all specifics the property that will be animated (in this case, all properties of the element), and ease-in-out specifies the speed curve for the animation, which in this case means the animation will speed up mid-animation and slow down before the animation completes.

There is also the addition of the :active pseudo-class on the new element, which changes the opacity of the element to 0, or fully transparent, when clicked, meaning the element is no longer visible to the user.

Let's Test with an Example

Now let's put our example to the test. Clicking and holding the box will initiate the fade out transition by changing the element's opacity to 0. Releasing the mouse button will take the element out of its active state and return the element's visual state to normal.

CSS Fade In Transition

You could achieve the opposite by swapping the opacity levels between the box element and its associated :active selector:

div.box {
width: 100px;
height: 100px;
background-color: red;
opacity: 0.00;
cursor: pointer;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;<br>
transition: 0.25s all ease-in-out;
}

div.box:active {
opacity: 1.00;
}

So now, rather than the element fading out on click, it will fade in on click.

Conclusion

Not much to it, right? The great thing about (most) CSS transitions is that very little code is required to do simple yet incredible things that are both effective and visually stunning.

For more advanced animation features, check out the next post involving CSS keyframe animation.