Css3 Fade Effect

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 make fade transition faster css3?

May I suggest you drop script and do it all using CSS, as combining script and CSS will most likely get you issues with synchronization (of course, do it all with script will also solve synchronization)

.container {    position: absolute;    width: 90%;    height: 300px;    overflow: hidden;}.slide_photo {    position: absolute;    top: 0; left: 0;    width: 100%;    height: 100%;    background-repeat: no-repeat;    background-position: center center;    background-size: 100% 100%;    animation: fade 28s infinite;    opacity: 0;}.slide_photo.nr4 {    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('http://placehold.it/150/f00');    animation-delay: 21s;}.slide_photo.nr3 {    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('http://placehold.it/150/');    animation-delay: 14s;}.slide_photo.nr2 {    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('http://placehold.it/150/00f');    animation-delay: 7s;}.slide_photo.nr1 {    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('http://placehold.it/150/0f0');    animation-delay: 0s;}
@keyframes fade {  0% {    opacity: 0;  }  5% {    opacity: 1;  }  22% {    opacity: 1;  }  40% {    opacity: 0;  }}
<div class="container landing-container">  <div class="slide_photo nr1"></div>  <div class="slide_photo nr2"></div>  <div class="slide_photo nr3"></div>  <div class="slide_photo nr4"></div></div>

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;
}

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>

CSS3 : Fade in on hover and Fade out when hover is gone

CSS Transitions don't work on display:block/none; You can manage to give that effect using visibility/opacity properties.

Check this example, You can manually add the transition-delay property if you really want it to add.

.main_div {  width: 100px;  height: 100px;  border: thin black solid;  position: relative;}
.main_div .overlay_div {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  visibility: hidden;  opacity: 0;  transition: all 1s ease-out;}
.main_div:hover .overlay_div {  visibility: visible;  opacity: 1;  transition: all 1s ease-in;}
<div class="main_div">  <div class="overlay_div">    some text  </div></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>

Related Topics

Sass Indented Syntax on Multiple Lines

Custom Cursor Image Doesn't Work in All Ies

Reuse CSS Animation in Reversed Direction (By Resetting the State)

Are Alternate Nested Styles Possible in CSS

CSS Id VS Class

How to Have a Varying Number of Columns Per Row in a CSS Grid

First Letter Capitalize and Other Letters in Lower Case in CSS

Input Type="Image" Shows Unwanted Border in Chrome and Broken Link in IE7

CSS Select the First Child from Elements with Particular Attribute

Less CSS: Abusing the & Operator When Nesting

Why Don't CSS Resets Use '*' to Cover All Elements

How to Include CSS Style When Converting Svg to Png

CSS Selector Involving Pseudo Class First-Child and Dropcap

Select Odd Even Child Excluding the Hidden Child

CSS Content, Attr and Url in the Same Sentence

Is the :Before Pseudo-Element Allowed on an Input[Type=Checkbox]

Make Text Height 100% of Div

Can You Apply a Width to a :Before/:After Pseudo-Element (Content:Url(Image))


Leave a reply



Submit