How to convert a jQuery fade effect in CSS?


Tags: javascript,jquery,css,css3,css-animations

Problem :

I have the following code which is going to fade some images but I am interested if there is a way to handle this in CSS.

$("#top").stop(true, true).delay(0).fadeTo(fadeTime * 100, 0);
$("#back").stop(true, true).delay(0).fadeTo(fadeTime * 100, 1, function () {
    if (curLoop < loops) {
        if (curImg < imgNo) {
            prevImg = curImg
            curImg++
        } else {
            prevImg = imgNo
            curImg = 1;
            curLoop++console.log("LOOP");
        }

        document.getElementById("back").style.opacity = 0;

        document.getElementById("top").style.opacity = 1;

        document.getElementById("back").src = "frames/frame_" + curImg + ".jpg";
        document.getElementById("top").src = "frames/frame_" + prevImg + ".jpg";
    } else {
        console.log("STOPPED");
        window.clearInterval(myVarSTD);
    }

    if (!initialized) {
        myVarSTD = setInterval(function () {
            startAnimation()
        }, delay * 1000);
        initialized = true;
    }
});


Solution :

You can't loop through image sources in a pure CSS animation but the below fade effect is possible with CSS3 animations. Here the front and back images are absolutely positioned and using opacity animation they are faded in and out in an infinite loop. I have used 2 div with background-image but you could do the same for img element also.

Refer inline comments within the snippet for more explanation of the animation's CSS code.

.front,
.back {
  position: absolute; /* absolute positioning puts them one on top of other */
  height: 200px;
  width: 200px;
  animation: fade-in-out 10s linear infinite; /* first is animation keyframe's name, second is the duration of the animation, third is timing function and fourth is iteration count */
}
.front {
  background-image: url(http://lorempixel.com/200/200/nature/1);
}
.back {
  background-image: url(http://lorempixel.com/200/200/nature/2);
  z-index: -1; /* keeps the element behind the front */
  animation-delay: 5s; /* delay is equal to half the animation duration because the back has to fade-in once the front has faded-out at 50% */
}
@keyframes fade-in-out { /* animation settings */
  0%, 100% {
    opacity: 1; /* at start and end, the image is visible */
  }
  50% {
    opacity: 0; /* at the mid point of the animation, the image is invisible */
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='front'></div>
<div class='back'></div>


    CSS Howto..

    How to apply only one css file out of two css files included?

    JavaScript, AngularJS: How do I know if element is larger than its container?

    Why is my text not showing in my DIV?

    How to get inner and outer width to a single element?

    how to connect circles with lines without ovelaping

    How should a graphic designer learn web design? [closed]

    How can I have a CSS hover affect a different tag?

    How to make an svg masked image compatible with Internet Explorer

    How to bump up text?

    How to fill in blank space using html and css

    How to unfold or close content in html/JS - always assigned to different id

    How can I turn a background visibility on and off with jQuery?

    How to add more bars to this Animated JQuery, CSS and HTML Bar Graph

    How can I use JQ to pick out a parent whose child is hr.strong?

    CSS How to add a button below an image [closed]

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    The UI Designers and Marketing people at my company don't want “awkward line breaks”. How to do with CSS or JS? [closed]

    CSS: How to do image change on rollover

    How can I opt out of a CSS style on a case-by-case basis?

    How to change first word color through css [duplicate]

    How to change the scrollbar color using css [duplicate]

    How to hide and show a separate div with CSS

    GWT - How to create a drop down menu

    How to properly align a page with header, nav, section and footer // HTML5 and CSS

    how do I properly position & scale these elements in CSS?

    How do browsers parse/render CSS?

    How to make this inner div vertically centered? (Using CSS)

    How do you create tabstops in XHTML?

    How to place Facebook send dialog box above other content?

    how can we use and control Gradient