[CSS] 걷는 호박 애니메이션 만들기🎃

CSS 애니메이션 : 걷는 호박

이번 포스팅에서는 호박이 걸어가는 애니메이션을 CSS를 통해 만들어보겠습니다.

HTML 소스

<div class="sample">
    <h3><span></span><em class="sr-only"></em></h3>
    <div class="timing step">
        <div class="stepbox"></div>
        <span class="stepBtn">
            <a href="#" class="stepBtnStart">Start</a>
            <a href="#" class="stepBtnStop">Stop</a>
        </span>
    </div>
</div>

CSS 소스

ani1.jpg 파일은 포토샵에서 호박이 걷는 장면 32장을 가로로 이어붙여 만든 이미지 파일이며 width 값은 25600px입니다.

이렇게 가로로 이어붙인 이미지 파일을 먼저 준비합니다. 이러한 이미지 파일을 애니메이션 적용하는 방법은 다음과 같습니다.

.step {
    height: 700px;
    background: #3b0643;
    position: relative;
}
.step .stepbox {
    width: 800px; height: 600px;
    background: url(https://kde66034.github.io/coding/animation/img/ani1.jpg);
    border-radius: 0;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    animation: ani 1s steps(32, start) infinite;
    /* ani 1s steps(프레임수(이미지 개수), start) infinite; */
}
.step .stepbox.start {
    animation-play-state: running;
}
.step .stepbox.stop {
    animation-play-state: paused;
}
@keyframes ani {
    0% {background-position: 0 0;}
    100% {background-position: -25600px 0;}
    /* 100% {background-position: 이어붙여 만든 이미지 파일의 width 값 (px) 0;} */
}
.stepBtn {
    position: absolute; left: 15px; top: 20px;
}
.stepBtn a {
    background: #e16162; color: #fff;
    padding: 10px;
    margin: 3px;
    border-radius: 3px;
}

코드펜 결과