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 141 · 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 · Answer 2 · 2020-04-14T19:53:04.860

22

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

115,126
25
163
167

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

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

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

13

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

790
2
10
24

The different delay offset values for visibility are key here. Thanks – Eaten by a Grue 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

Elliot Harrell · Answer 4 · 2022-04-22T18:24:44.263

4

Try creating a keyframes animation for the opacity attribute of your element:

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

    @keyframes example {
        from {opacity: 2;}
        to {opacity: 0;}
    }
</style>

<div>
    <p>[Element to fade]</p>
</div>

(You can also set the exact percentages of animations to make it fade in/out. For example, set 0% to 2 opacity, 50% to 0 opacity, and 100% to 2 opacity. A good source for this method is W3Schools @ https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2 .)

edited Apr 22 '22 at 18:24

answered Mar 02 '20 at 22:16

Elliot Harrell

139
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