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 where0.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), andease-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.