Изменение видимости анимации CSS с помощью Javascript

Question

Я следил за указаниями от Justin Aguilar's Site, чтобы добавить некоторые анимации CSS на мой сайт. Это хорошо составлено и кажется довольно простым. Однако у меня возникла серьезная проблема с запуском анимации входа.

Являясь довольно новым в этом отношении, я понимаю, что этот вопрос может быть абсолютно унаследованным, но я не сработал с ним в течение последних нескольких дней без успеха.

Чтобы создать вход, видимость элемента изначально установлена ​​на «скрытый». Затем javascript должен запускать анимацию, добавляя класс .pullUp, который заставляет элемент становиться видимым и анимационным. Это кажется довольно простым, но все мои элементы начинают анимацию, как только страница загружается, или они остаются невидимыми.

Я действительно мог бы вам помочь. Вот Link to the code on JFiddle.

<img src="img/apple.png" id="apple" class="pullUp" /> 

    <script= "text/css"> 

.pullUp{ 
    animation-name: pullUp; 
    -webkit-animation-name: pullUp; 

    animation-duration: 1.1s; 
    -webkit-animation-duration: 1.1s; 

    animation-timing-function: ease-out;  
    -webkit-animation-timing-function: ease-out;  

    transform-origin: 50% 100%; 
    -ms-transform-origin: 50% 100%; 
    -webkit-transform-origin: 50% 100%; 

    visibility: visible !important;    
    } 
</script> 

<script> 

$(window).scroll(function() { 
    $('#apple').each(function(){ 
    var imagePos = $(this).offset().top; 

    var topOfWindow = $(window).scrollTop(); 
    if (imagePos < topOfWindow+150) { 
     $(this).addClass(".pullUp"); 
    } 
    }); 
</script> 

В основном я просто нужен мой образ, чтобы стать видимым и анимации, когда изображение прокручивается.

Возможно, что исходные проблемы могут быть загрузочными платформами моего сайта, но я не понимаю, почему это произойдет. Также, пожалуйста, знайте, что я использую внешние таблицы стилей и просто включил весь код здесь для удобства. Любое понимание или помощь очень ценится!

Answer 1

I forked your JSFiddle

1. Вы отсутствовали }); в конце вашего кода блока. Вот почему jQuery не работал.
2. У вашего изображения был добавлен класс pullUp, поэтому анимация начиналась сразу.

Answer 2

Я заметил в вашем CSS, где у вас есть поплавки, вы не указали позицию (то есть позиция: относительная или позиция: абсолютная). Это важно для этого типа вещей (редактирование: видимо, нет, как показано ниже).

После добавления в положение: по отношению к этим элементам, похоже, он работает, однако вам может потребоваться изменить анимацию, поскольку эффект кажется минимальным.