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

User · Answer

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

User · Answer

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    lt style gt   p   animation-name  example  animation-duration  2s      keyframes example   from  color black   to  color white      lt  style gt   lt p gt I am FADING  lt  p gt    I hope this is what you needed

User · Answer

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

User · Answer

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   lt div className  this state toggleClass  gt Element to be toggled lt  div gt

User · Answer

Use css  keyframes   elementToFadeInAndOut       opacity  1      animation  fade 2s linear       keyframes fade     0  100    opacity  0     50    opacity  1       here is a DEMO   x000D   x000D   elementToFadeInAndOut   x000D      width 200px  x000D      height  200px  x000D      background  red  x000D      -webkit-animation  fadeinout 4s linear forwards  x000D      animation  fadeinout 4s linear forwards  x000D    x000D   x000D   -webkit-keyframes fadeinout   x000D    0  100    opacity  0    x000D    50    opacity  1    x000D    x000D   x000D   keyframes fadeinout   x000D    0  100    opacity  0    x000D    50    opacity  1    x000D    x000D   lt div class elementToFadeInAndOut gt  lt  div gt  x000D   x000D   x000D    Reading  Using CSS animations  You can clean the code by doing this    x000D   x000D   elementToFadeInAndOut   x000D      width 200px  x000D      height  200px  x000D      background  red  x000D      -webkit-animation  fadeinout 4s linear forwards  x000D      animation  fadeinout 4s linear forwards  x000D      opacity  0  x000D    x000D   x000D   -webkit-keyframes fadeinout   x000D    50    opacity  1    x000D    x000D   x000D   keyframes fadeinout   x000D    50    opacity  1    x000D    x000D   lt div class elementToFadeInAndOut gt  lt  div gt  x000D   x000D   x000D

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

Examples related to css

Examples related to css-transitions

Examples related to fadein

Examples related to fadeout