Fade In/Out with CSS3

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

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>

Fade in-out with CSS3?

You just need to add a percentage in your @keyframes:

.text {
    /* fade in */
    -webkit-animation: fadeinout 4s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeinout 4s;
    /* Firefox < 16 */
    -ms-animation: fadeinout 4s;
    /* Internet Explorer */
    -o-animation: fadeinout 4s;
    /* Opera < 12.1 */
    animation: fadeinout 4s;
}
@keyframes fadeinout {
    from {
        opacity: 0;
    }
    33% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

Although to do exactly what you are asking, initially set opacity: 0;, like this, and adjust to 6s:

        .text {          opacity: 0;          /* fade in */          -webkit-animation: fadeinout 6s;          /* Safari, Chrome and Opera > 12.1 */          -moz-animation: fadeinout 6s;          /* Firefox < 16 */          -ms-animation: fadeinout 6s;          /* Internet Explorer */          -o-animation: fadeinout 6s;          /* Opera < 12.1 */          animation: fadeinout 6s;        }
        @keyframes fadeinout {          from {            opacity: 0;          }          33% {            opacity: 1;          }
          to {            opacity: 0;          }        }

<p class="text">faded</p>

CSS3 Transition - Fade out effect

You can use transitions instead:

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

Simple CSS Animation Loop – Fading In & Out Loading Text

As King King said, you must add the browser specific prefix. This should cover most browsers:

@keyframes flickerAnimation {  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}@-o-keyframes flickerAnimation{  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}@-moz-keyframes flickerAnimation{  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}@-webkit-keyframes flickerAnimation{  0%   { opacity:1; }  50%  { opacity:0; }  100% { opacity:1; }}.animate-flicker {   -webkit-animation: flickerAnimation 1s infinite;   -moz-animation: flickerAnimation 1s infinite;   -o-animation: flickerAnimation 1s infinite;    animation: flickerAnimation 1s infinite;}

<div class="animate-flicker">Loading...</div>

CSS fade-out and stay so

Use animation-fill-mode: forwards; for that purpose:

.fade-out {
  animation: fadeOut ease 5s;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<h1 class="fade-out">hello</h1>

CSS animations default to slow fade in-out, is there a way to change that?

In order to illustrate your issue on the site, I created a snippet using background colors instead of images:

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
}

@keyframes homepics {
  0% { background-color: red; }
  10% { background-color: orange; }
  20% { background-color: yellow; }
  30% { background-color: green; }
  40% { background-color: blue; }
  50% { background-color: indigo; }
  80% { background-color: violet; }
  90% { background-color: purple; }
}

<div class="homeslider"></div>

Is there a CSS-only (pure CSS) workaround to apply fade-in and fade-out on objects with display:none?

As LGSon presented on the comments (and later on an answer), an alternative to display:none is height:0 combined with overflow:hidden.

So I did use this method together with opacity values on keyframes/transition to reproduce the fade-in/fade-out effects of the OP snippet, but without any javascript.

transition-timing-function: cubic-bezier was used to perform a quick jump to height:0

#b {  overflow: hidden;  height: 0;  opacity: 0;  -webkit-transition: opacity 1s, height 1s cubic-bezier(1,0,1,0); /* Safari */  transition: opacity 1s, height 1s cubic-bezier(1,0,1,0);  background: skyblue;}
#a:hover ~ #b {  opacity: 1;  height: 60px;  -webkit-animation: animate 1s; /* Chrome, Safari, Opera */   animation: animate 1s;  height: 60px;}
@keyframes animate {    0%   {opacity: 0;  height: 60px;}    100% { opacity: 1;  height: 60px;}}
div {  width: 58px;  height: 58px;  vertical-align: middle;  outline: 1px solid black;  line-height: 60px;  text-align: center;  }
#a {  background: tomato;  }
#c {  background: greenyellow;  }

<div id=a>OVER</div><div id=b>B</div><div id=c>C</div>

Using CSS for a fade-in effect on page load

Method 1:

If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren't supported either, but this is exactly the kind of thing they were made for.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Demo

• http://jsfiddle.net/SO_AMK/VV2ek/

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation

Method 2:

Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:

jQuery

$("#test p").addClass("load");​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

Plain JavaScript (not in the demo)

document.getElementById("test").children[0].className += " load";

Demo

• http://jsfiddle.net/SO_AMK/a9dnW/

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions

Method 3:

Or, you can use the method that .Mail uses:

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

Demo

• http://jsfiddle.net/SO_AMK/a9dnW/3/

Browser Support

jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-support/


jQuery 2.x: All modern browsers and Internet Explorer 9 (and later): http://jquery.com/browser-support/

This method is the most cross-compatible as the target browser does not need to support CSS 3 transitions or animations.

How to do fade-in and fade-out with JavaScript and CSS

Ok, I've worked it out

element.style.opacity = parseFloat(element.style.opacity) + 0.1;

Should be used instead of

element.style.opacity += 0.1;

Same with

element.style.opacity = parseFloat(element.style.opacity) - 0.1;

Instead of

element.style.opacity -= 0.1;

Because opacity value is stored as string, not as float. I'm still not sure though why the addition has worked.

---

Related Topics