[CSS, jQuery] 도장 찍기 애니메이션 코딩

 

위의 캡처이미지처럼 도장이 아래 y축으로 100% 만큼 아래로 애니메이션이 되면서 도장이 찍히도록 코딩해보자.

 

<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
 
<style>
.translate-y{animation: translatey 1s linear 1 ;}
@keyframes translatey{
    0%{transform: translateY(0);}
    100%{transform: translateY(100%);}
}
</style>
 
<div class="sub_stemp_book" style="position:relative;">
    <div style="position:absolute;z-index:20;">
       <img src="stamp_icon.png" id="stampIcon" >
    </div> 
    <div style="position:absolute;z-index:11;">
        <div class="stemp_bg" style="">
            <img src="stamp_ex.png" id="stampOffImg" style="display:block">
            <img src="stamp_commit.png" id="stampOnImg" style="display:none;">
        </div>
        <div class="stemp_btn">
            <div class="stemp_btn_back">
                <a href="javascript:stampClick();"><img src="stamp_icon.png" alt="">스탬프찍기</a>
            </div>
        </div>
    </div>
</div>
 
 
<script>
function stampClick(){
    $("#stampIcon").addClass('translate-y');
    setTimeout(function(){
        document.getElementById("stampOffImg").style.display = "none";
        document.getElementById("stampOnImg").style.display = "block";
    },1000);
}
 
 
$(window).ready(function() {
    $('#stampIcon').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
            $(this).removeClass();
    });
});
</script>

 

참고 : https://gahyun-web-diary.tistory.com/79