How to convert a jQuery fade effect in CSS?

Question

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

Yes with CSS3 ease. http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load — Jose Rocha, Nov 27 '15 at 09:58
This is confiusing. You specificaly asked how to make your jquery animation into CSS and you accept a jquery answer. — web-tiki, Nov 27 '15 at 11:45

Harry · Accepted Answer · 2015-11-27T10:12:35.333

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>

Ferran Buireu · Answer 2 · 2015-11-27T11:11:43.843

Yes, it is. Your code capture some elements using getElementById as back and top.

You can use the following code to change CSS properties of those elements:

$('#back').css({'opacity':'1'});

Implemented in your code:

$("#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");
                    }               

    $('#back').css({'opacity':'0'});

    $('#top').css({'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;
                }
            });

score 0 · Answer 3 · answered Nov 27 '15 at 09:59

0

jQuery Transit is an awesome plugin which mimics jQuery's animation functions but in CSS. You get a much higher framerate using CSS too!

answered Nov 27 '15 at 09:59

Mike Resoli

1,005
3
14
37

How to convert a jQuery fade effect in CSS?

3 Answers3