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 162 · 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

score 26 · Answer 2 · edited Sep 07 '22 at 08:07

26

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 Sep 07 '22 at 08:07

Raphaël Balet

6,334
6
41
78

answered May 08 '15 at 14:03

Fabrizio Calderan

120,726
26
164
177

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

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

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

14

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

850
2
11
25

The different delay offset values for visibility are key here. Thanks – But those new buttons though.. 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

169
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