Изображение, появившееся перед тем, как затухать в

Question

Я пытаюсь использовать некоторые стандартные jQuery и CSS, чтобы получить изображение, чтобы исчезнуть, но после возиться с непрозрачностью кажется, что если я задаю непрозрачность 0 в css, тогда изображение снова появится во время анимация, а затем снова исчезнуть после ее завершения. Какие-нибудь советы?

вот код:

JQuery

<script> 
$(window).scroll(function() { 
    $("#me").each(function(){ 
    var imagePos = $(this).offset().top; 
    var topOfWindow = $(window).scrollTop(); 
     if (imagePos < topOfWindow+650) { 
      $(this).addClass("fadeIn"); 
     } 
    }); 
}); 
</script> 

CSS

@keyframes fadeIn { 
    0% { 
     transform: scale(0); 
     opacity: 0.0;  
    } 
    60% { 
     transform: scale(1.1); 
    } 
    80% { 
     transform: scale(0.9); 
     opacity: 1; 
    } 
    100% { 
     transform: scale(1); 
     opacity: 1; 
    }  
} 

Answer 1

Вот как вы можете перейти:

DEMO

CSS

@-webkit-keyframes fadeIn { 
    0% { 
     -webkit-transform: scale(0); 
     opacity: 0.0;  
    } 
    60% { 
     -webkit-transform: scale(1.1); 
    } 
    80% { 
     -webkit-transform: scale(0.9); 
     opacity: 1; 
    } 
    100% { 
     -webkit-transform: scale(1); 
     opacity: 0; 
    }  
} 
@keyframes fadeIn { 
    0% { 
     transform: scale(0); 
     opacity: 0.0;  
    } 
    60% { 
     transform: scale(1.1); 
    } 
    80% { 
     transform: scale(0.9); 
     opacity: 1; 
    } 
    100% { 
     transform: scale(1); 
     opacity: 0; 
    }  
} 

.fadeIn { 
    -webkit-animation: fadeIn 3s; 
      animation: fadeIn 3s; 
} 

.me { 
    width: 100px; 
    height: 100px; 
    background: red; 
    opacity: 0; 
} 

HTML

<button id="toggle-button">Toggle</button> 
<div id="me" class="me"></div> 

JavaScript

$('#toggle-button').click(function() { 
    var el = document.getElementById('me'); 
    el.classList.add('fadeIn'); 
    $(el).bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', 
    function(e) { 
    this.classList.remove('fadeIn'); 
    }); 
});