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.
Let's start with a simple CSS fade out transition by creating a small
And some styling to differentiate our new element from the rest of the page:
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:
-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;
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.25sis the duration of the animation effect, in this case 0.25 seconds,
allspecifics the property that will be animated (in this case, all properties of the element), and
ease-in-outspecifies 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.
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.
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.