CSS Fade In Transition: Text, Images, Scroll & Hover
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.
You can easily adjust an element's transparency with a fade in transition using CSS by utilizing smooth animation techniques and very little code. In this case, we'll be using CSS transitions to change the opacity
rule within a set timeframe.
How CSS Transitions Work
There are a few rules we'll be following:
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 transition 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 transition, which in this case means the animation will speed up midway through and slow down before the animation completes.
Note that certain CSS rules, including the transition
rule, come with a set of vendor-specific prefixes we can use for a variety of browsers, including -webkit
for Chrome and Safari browsers and -moz
for Firefox browsers. You could also include -ms
for Microsoft browsers like Internet Explorer, even though Microsoft no longer supports this browser, or -o
for the Opera browser.
The Fade In 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 when we've hovered over our box element on the page.
Now let's update that styling a bit to include some transition rules and a fade in effect on mouse hover:
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;
transition: 0.25s all ease-in-out;
}
div.box:hover {
opacity: 1.00;
}
This CSS snippet utilizes the transition
and opacity
properties that we covered above, allowing for the box
element to fade in after a quarter of a second on mouse hover by defining a rule with the :hover
pseudo-class. When moving the mouse pointer away from the boundaries of the box element, the element will fade out.
You could apply these same rules to any type of HTML element, including text elements, images, backgrounds, and so forth.
Fade In On Scroll
To create a fade in animation when scrolling an element into the viewport, we can create a similar set of CSS rules that we did above. The only exception here is we'll swap the :hover
pseudo-class with an .active
class:
div.box {
width: 100px;
height: 100px;
background-color: red;
opacity: 0.00;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
div.box.active {
opacity: 1.00;
}
Then, we'll create a quick jQuery function that determines our current scroll position and adds the .active
class to the .box
element once it has entered the viewport:
$(document).ready(function() {
$(window).on("scroll", function() {
var scroll_pos = $(window).scrollTop();
var element_pos = $("div.box").offset().top;
if (scroll_pos >= element_pos) {
$("div.box").addClass("active");
}
});
});
The scroll_pos
variable contains the value of the top scroll position in the viewport and the element_pos
variable contains the value of our HTML element. Once the scroll position is greater than or equal to the HTML element's top edge position, the element will fade in.
Conclusion
Now, you should be a master with CSS fade in transitions, right? Play around with the code and get creative with it. That's the true way to learn!
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 successful CSS keyframe animation.
Created: March 10, 2020
Comments
Henry J.
Reply
Josh
Reply