Как запускать анимацию при появлении элемента в зоне видимости (не animate.css и wow.js)?

Question

[Сергей Игнатьев]

Прошу помочь с решением вопроса :) Я написал в CSS то, что хочется увидеть, не используя библиотеки анимацией, типа, animate.css , поэтому wow и data-wow-delay в моем случае не работает. Как запускать данную анимацию с момента появления ее месторасположения в зоне видимости (при скроле)?

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

Answer 1

[iBird Rose]

$(window).scroll(function(){
    if ( $(this).scrollTop() > el.offset().top - 200 ) {
        el.addClass('animation_car8');
    }
});

Comments

[Сергей Игнатьев]

IBird, помогите еще пожалуйста, маленько)) Понимаю, что вы написали, то что требуется, но у меня не работает, может гляните на код? https://jsfiddle.net/serebro_/8a4hs4tx/2/

[iBird Rose]

Сергей Игнатьев: https://jsfiddle.net/8a4hs4tx/3/ все работает же

[Сергей Игнатьев]

iBird Rose: Нет(( Задержка стоит 1 сек, поэтому кажется, что анимация стартует при скроле. длительность анимации 3 секунды. Подождите 4 секунды, потом прокрутите и увидите, что анимация уже прошла.
Или я туплю...(
Помогите пожалуйста

[iBird Rose]

Сергей Игнатьев: ну ты el то задал бы. свое img которое анимируешь

[iBird Rose]

Сергей Игнатьев: https://jsfiddle.net/8a4hs4tx/5/

[Сергей Игнатьев]

iBird Rose: Спасибо огромедное!!! Жалю тебе завтра поймать заказ на 300 тыщ рублей и сделать его за неделю, а потом выиграть путевку на Мальдивы и снять там яхту со шлюхами!))

Answer 2

[Денис Букреев]

Вычисляешь offsetTop у элемента от начала документа и отслеживаешь во время скролла когда же scrollTop сравняется с этим offsetTop

Answer 3

[Kovalsky]

А мне всё нравится оборачивать в методы, так что вот вам воспитанный метод который и классы задаёт когда элементы входят в поле зрения, и за собой всё убирает.