How can I fade one element into another with CSS? [duplicate] - html

Question

This question already has answers here:
CSS how to make an element fade in and then fade out?
(5 answers)
How to fade out a div, then fade in another in the same location. CSS only
(1 answer)
CSS Transition - Fade Element on Hover only
(2 answers)
How to play CSS3 transitions in a loop?
(2 answers)
Closed 3 years ago.
I have two div elements that each contain text. I want to fade one div into another div such that as one disappears the other appears and the cycle repeats. Does anyone know how to do that? I don't even know where to start.
<div>
<div>Expand your knowledge</div>
<div>Blah Blah Blah</div>
</div>
Those are the two div elements that should transition from one to another in a cycle.

Answer 1

First things first, I am going to add classes to your HTML elements to use as styling hooks that will make working with them easier. It is also just the best practice to use classes for the majority of styling in CSS. The wrapping class, or "stage" for the animation, will get the class fader-stage. Every "slide" (what I am going to be calling each div element that will fade out and into another) gets the same general class applied to it, fader-slide, and I also apply a unique class for each individual slide that denotes its number in the presentation order (fader-slide--1, fader-slide--2, and so on if you were to add more elements).
<div class="fader-stage">
<div class="fader-slide fader-slide--1">Expand your knowledge</div>
<div class="fader-slide fader-slide--2">Blah Blah Blah</div>
</div>
Now for the CSS! 🎉🎈 ...I am going to start with styling the wrapping div element by using the class hook, fader-stage, we added to the HTML in the above step.
.fader-stage {
border: 2px solid #000;
height: 12rem;
margin: 2rem auto;
position: relative;
width: 50%;
}
The only part of this style that you absolutely have to keep "as is" here is position: relative. We use this on a containing element so that when we use position: absolute on the child elements in the next step, it doesn't make them position themselves according to the root element of the document, they will instead position themselves according to closest relatively positioned ancestor element (this one). Everything else in this wrapper class can be changed according to your taste, or the particular specifications of the project.
Now we create a simple animation using #keyframes that will take the opacity level from 1 to 0. Seems like we can keep it simple and just call the effect fade-out. We will use this identifier with the animation property in the next step. You can read more about keyframes here if you'd like to know more about this CSS at-rule.
#keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Now we need to style the "slide" elements that you want to fade into one another. We will be using the general class that we have applied to all the slides, fader-slide.
I set some pretty general styles on fader-slide. I wanted to make each slide take up the maximum amount of space in the wrapping div, and to center all of each slide's content.
I use position: absolute as a way to take each slide out of the normal flow of the document, which will effectively allow them to sit on top of one another. I then set the top and left properties to 0 in order to position the element start at the top left corner of the stage. Had we not set the position property to relative on the fader-stage element in the previous step, doing this would instead position the slides in the top left corner of the document.
I used flexbox properties to easily ensure that everything that is inside the slides gets centered horizontally and vertically.
Most importantly though, I also applied the fade-out animation we made in the keyframes step above. I tell the animation to go through the keyframes animation named fade-out, for that animation to have a duration of 2.5s, to use the ease-out animation-timing-function when animating, to run an infinite amount of times, and to alternate back and forth when it gets to the end of the animation. I do all of that in one line of CSS by using the animation shorthand property.
.fader-slide {
align-items: center;
animation: fade-out 2.5s ease-out infinite alternate;
background: #015e89;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
For each individual slide, I then apply an increase of the animation-delay property of 2.5s for each subsequent slide. You can obviously change the animation duration, delay, and timing function to anything you'd like. If you want each slide to begin to fade out as soon as it fully appears then it would be best if the animation duration and each delay increment were equal to one another. For any additional slide you wanted to add, you would just add the delay amount you've chosen to the previous delay amount and then just keep increasing it. This is the way I have done it. I add the z-index property with a value of 1 to the first slide so that it sits on top of the others at the start of the animation after the page loads. Otherwise, the last slide in the DOM order will be on top at the beginning. To make the fading effect more obvious, I would also change the background-color on each subsequent slide.
.fader-slide--1 {
animation-delay: 2.5s;
z-index: 1;
}
.fader-slide--2 {
animation-delay: 5s;
background-color: #018970;
}
Here is a codepen so you can see it all working together. 🚨
🚨 STROBE WARNING: If you have epilepsy, or suffer from seizures or headaches caused by pulsing light, you may want to avoid viewing this example. The effect is mild in my estimation, but it will automatically play when you follow the above link so I believe it fair to give warning to anyone sensitive to such things.
And here is all the CSS from above in one, easy to copy/paste snippet:
.fader-stage {
border: 2px solid #000;
height: 12rem;
margin: 20px auto;
position: relative;
width: 50%;
}
#keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fader-slide {
align-items: center;
animation: fade-out 2.5s ease-out infinite alternate;
background: #015e89;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.fader-slide--1 {
animation-delay: 2.5s;
z-index: 1;
}
.fader-slide--2 {
animation-delay: 5s;
background-color: #018970;
}
There is a lot more we could do with it if we kept going, but I believe this achieves the specifications laid out in your question as I understand them.
If you are not using something like Autoprefixr or Prefixfree to apply vendor prefixes to your CSS then you may want to add the -webkit (and possibly -moz and -ms) prefix to the animation property, as well as animation-delay, the #keyframes, and potentially also the flexbox properties (display: flex, align-items: center, and justify-content: center), but only if you want to cast a wide net for backwards browser compatibility. If you don't know how to do this or what I'm talking about let me know and I'll edit to include the browser prefixes.
Autoprefixer also has an online tool for adding vendor prefixes, if you don't want to set it up with PostCSS as package dependency for your project. To use the online tool you just give the app a string describing the browsers you want to target, paste in your CSS, and it will return your CSS with the vendor prefixes necessary to (mostly) ensure compliance with your target browsers added.
If you have any other questions about this method just let me know and I would be happy to help. 🤓👨🏼‍💻

Answer 2

The #keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
#keyframes animate {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#keyframes animation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.div1{
animation: animation 1s infinite;
}
.div2 {
animation: animate 1s infinite;
}
<div class="div1">Expand your knowledge</div>
<div class="div2">Blah Blah Blah</div>