CSS how to make an element fade in and then fade out?

Question

I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css:

.elementToFadeInAndOut {
    opacity: 1;
    transition: opacity 2s linear;
}

Is there a way I can make the element fade out after it fades in by editing css for this same class?

Use the css defined in this link to toggle fadeIn and fadeOut classes for the required element: https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/ — raksheetbhat, Feb 28 '19 at 13:45

score 116 · Accepted Answer · edited Jun 26 '16 at 09:47

Use css @keyframes

.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s linear;
}


@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

here is a DEMO

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

<div class=elementToFadeInAndOut></div>

Reading: Using CSS animations

You can clean the code by doing this:

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    opacity: 0;
}

@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}

@keyframes fadeinout {
  50% { opacity: 1; }
}

<div class=elementToFadeInAndOut></div>

Adding *forwards* keeps the element hidden after the fade finishes its cycle. Awesome. — Womble, Jun 01 '18 at 01:54
Kindly help on this one pls? https://stackoverflow.com/questions/61203327/css-animation-fadein-fadeout-2-images-continuously — newdeveloper, Apr 14 '20 at 08:13

Fabrizio Calderan loves trees · Answer 2 · 2020-04-14T19:53:04.860

16

If you need a single fadeIn/Out without an explicit user action (like a mouseover/mouseout) you may use a CSS3 animation: http://codepen.io/anon/pen/bdEpwW

.elementToFadeInAndOut {

    animation: fadeinout 4s linear 1 forwards;
}



@keyframes fadeinout {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

By setting animation-fill-mode: forwards the animation will retain its last keyframe

By setting animation-iteration-count: 1 the animation will run just once (change this value if you need to repeat the effect more than once)

edited Apr 14 '20 at 19:53

answered May 08 '15 at 14:03

Fabrizio Calderan loves trees

109,094
24
154
160

Is the `-webkit-` still really required? – Jack Apr 14 '20 at 19:17
3

Not really in 2020, but in 2015 It was – Fabrizio Calderan loves trees Apr 14 '20 at 19:52

score 7 · Answer 3 · answered Feb 28 '19 at 13:52

7

I found this link to be useful: css-tricks fade-in fade-out css.

Here's a summary of the csstricks post:

CSS classes:

.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

In React:

toggle(){
    if(true condition){
        this.setState({toggleClass: "m-fadeIn"});
    }else{
        this.setState({toggleClass: "m-fadeOut"});
    }
}

render(){
    return (<div className={this.state.toggleClass}>Element to be toggled</div>)
}

answered Feb 28 '19 at 13:52

raksheetbhat

612
2
9
19

The different delay offset values for visibility are key here. Thanks – billynoah Apr 29 '20 at 17:52
This should be the top answer, cause this makes the element actually hidden after it fades out. – SenTisso Nov 03 '20 at 23:01

Kwilver Bear · Answer 4 · 2020-03-02T23:42:23.290

3

A way to do this would be to set the color of the element to black, and then fade to the color of the background like this:

<style> 
p {
animation-name: example;
animation-duration: 2s;
}

@keyframes example {
from {color:black;}
to {color:white;}
}
</style>
<p>I am FADING!</p>

I hope this is what you needed!

edited Mar 02 '20 at 23:42

answered Mar 02 '20 at 22:16

Kwilver Bear

77
7

This does not *fade* out. – TylerH Mar 02 '20 at 22:24
I've removed my downvote, but I don't know if I would call the original post a *mistake*; by changing from `display` (which cannot be animated or transitioned) to `color` (which can be animated/transitioned) [and, just as critically, added a duration], you've *fundamentally changed* the answer. – TylerH Mar 03 '20 at 00:33

score 0 · Answer 5 · answered May 08 '15 at 14:32

Try this:

@keyframes animationName {
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}
@-o-keyframes animationName{
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}
@-moz-keyframes animationName{
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}
@-webkit-keyframes animationName{
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}   
.elementToFadeInAndOut {
   -webkit-animation: animationName 5s infinite;
   -moz-animation: animationName 5s infinite;
   -o-animation: animationName 5s infinite;
    animation: animationName 5s infinite;
}

CSS how to make an element fade in and then fade out?

5 Answers5

Linked

Related