How to start an animation when the element appears in sight (not animate.css and wow.js)?

Please help with the question decision :) I wrote in CSS what you want to see using the library animation, type, animate.css , wow and so data-wow-delay in my case is not working. How to run the animation since the advent of its location in the zone of visibility (when scale)?

https://jsfiddle.net/serebro_/8a4hs4tx/2/

.animation_car8{
 animation: anim_car8 linear 3s;
 animation-iteration-count: 1;
 animation-fill-mode: forwards;
 transform-origin: 50% 50%;

}

@keyframes anim_car8{
 0% {
opacity:0;
 transform: translate(0%,100%) ;
}
 8% {
opacity:1;
 transform: translate(50%,100%) ;
}
 92% {
opacity:1;
 transform: translate(650%,100%) ;
}
 100% {
opacity:0;
 transform: translate(700%,100%) ;
}
}
July 2nd 19 at 17:19
3 answers
July 2nd 19 at 17:21
Solution
$(window).scroll(function(){
 if ( $(this).scrollTop() > el.offset().top - 200 ) {
el.addClass('animation_car8');
}
});
IBird, help still please a little)) I Understand what you wrote, what you want, but I have not works, can you look at the code? https://jsfiddle.net/serebro_/8a4hs4tx/2/ - nels_Wehner50 commented on July 2nd 19 at 17:24
: https://jsfiddle.net/8a4hs4tx/3/ all works well - Rosendo_Hess commented on July 2nd 19 at 17:27
: Not(( Delay is 1 sec, so it seems that the animation starts when scrole. animation duration 3 seconds. Wait 4 seconds, then scroll down and you will see that the animation has already passed.
Or I tuplyu...(
Please help - nels_Wehner50 commented on July 2nd 19 at 17:30
: well, you el you would ask. its img which animeready - Rosendo_Hess commented on July 2nd 19 at 17:33
: https://jsfiddle.net/8a4hs4tx/5/ - Rosendo_Hess commented on July 2nd 19 at 17:36
: Thank you ogromennoe!!! Sting you tomorrow to catch an order for 300 thousand rubles and to do it for a week, and then win a trip to the Maldives and to rent there a boat whores!)) - nels_Wehner50 commented on July 2nd 19 at 17:39
July 2nd 19 at 17:23
Calculate the offsetTop of an element from the beginning of the document and tracked during scrolling when scrollTop equal to this offsetTop
July 2nd 19 at 17:25
I like to wrap methods so that you educated and classes a method that specifies when elements are in view, and all cleans.

Find more questions by tags jQueryCSSJavaScript