CSS애니메이션 예시

CSS animation

만드는 방법

1. 애니메이션으로 만들고 싶은 이미지를 프레임 수만큼 가져옵니다.(연속되는 이미지로 가져와주세요) 2. 이미지들을 하나로 이어 붙입니다. 포토샵에서 (이미지의 너비) X (프레임 수) 만큼의 너비로 새 파일을 만들어서 순서대로 이어붙이시면 됩니다. 3. 그 이미지를 저장합니다. 4. 이 이미지를 CSS의 background를 이용하여 넣어줄 위치에 위치시킵니다. 5. 애니메이션효과를 부여합니다. 소스는 아래의 소스를 참고해주세요.

HTML 소스

<div class="sample">
    <div class="timing step">
        <div class="stepbox"></div>
    </div>
</div>

.step {
    height: 700px;
    background: #333;
    position: relative;
}
.step .stepbox {
    width: 800px; height: 600px;
    background: url(https://github.com/Youcodein/coding2/blob/main/animation/img/cupani.jpg?raw=true);
    border-radius: 0;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    animation: ani 1s steps(32, start) infinite;
}

@keyframes ani {
    0% {background-position: 0 0;}
    100% {background-position: -25600px 0;}
}

$(".start2").click(function(){
$(".timing.bg2 > div").addClass("show");
setTimeout(function(){
$(".timing.bg2 > div").removeClass("show");
},4000);
});