CSS Transitions: CSS Fade In and Out Animations

CSS transitions allow HTML elements within a web page to gradually change from one state to another.  A popular scenario is defining a quick set of properties that provides clean animations to the visual elements of your web page.

With CSS transitions, you can easily adjust an element's transparency by utilizing smooth animation techniques and very little code.  In this case, we'll be using transitions to change the opacity opacity rule within a set timeframe.

How CSS Transitions Work

There are a few CSS rules we'll be utilizing to accomplish our fade in and out animations:

• opacity: Sets the visual transparency 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.

These are the only two rules we'll be using to accomplish our animations and each are very similar.

CSS Fade Out Transition

For the fade out transition, let's start with a basic 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;
}

This CSS snippet utilizes the transition and opacity properties that we covered above, allowing for the box element to fade out after a 1/4 second.

CSS Fade In Transition

You could achieve the opposite by swapping the opacity levels between the box element and its associated :active selector, resulting in a fade in transition with CSS:

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 impressive things that are both effective and visually stunning.

For more advanced animation features, check out the next post on creating a CSS keyframe animation.