Run Css Animation When Visible On Scroll

I'm creating my test webpage and I ran into a problem, there are quite a few 'answers' on my issue but none was I able to implement in my code. I know I have to use javascript but

Solution 1:

Remove the animation-name from your style rule:

.movepic {
    position: relative;
    animation-duration: 3s;
    animation-fill-mode: forwards
    visibility: visible;
    z-index:10;
} 

and add this class to stylesheet:

.animation-class {
    animation-name: move
}

Now add the jQuery:

var has_fired;
$("html").on("scroll", function () {
    if (!has_fired && $(this).scrollTop() >= $("#imgContainer").offset().top) {
        $("#imgContainer").addClass("animation-class");
        has_fired = true; // use this if only want fired once
    }
});

The animation will now run. BTW I would add an ID (imgContainer) to your container of interest and use this as selector for matching because unless .movepic is a unique class, this function will fire for any container with the .movepic class (if .movepic is the selector).

Solution 2:

I use this code for this effect:

HTML:

<img class="movepic" src="pictures/test.jpg">

CSS:

.movepic {
  opacity: 0;
  margin: 25px00;
  color: white;
  padding: 10px;
 }

.FadeIn {
    -webkit-animation: slideIn 0.8s ease 0.3s forwards;
    animation: slideIn 0.8s ease 0.3s forwards;
}

@keyframes slideIn {
    0% {
        -webkit-transform: translateY(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

JQuery:

var $fade =  $(".movepic"); //Calling the class in HTML

$(window).scroll(function () { //Using the scroll global variable
    $fade.each(function () {

        fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
        windowBottom = $(window).scrollTop() + $(window).height();

        if (fadeMiddle < windowBottom) {
          $(this).addClass("FadeIn");
        }
    });
});

/* On Load: Trigger Scroll Once*/
$(window).scroll();