CSS 애니메이션 : 걸어가는 이미지 만들기!

CSS 이미지 애니메이션

각각의 장면을 연속적으로 등장시켜 움직이는듯한 애니메이션을 줄 수 있습니다!

---

CSS

하단의 CSS 백그라운드 포지션이 최대 본인이 적용하려는 이미지의 해상도에 맞게끔 설정해줍니다!

.step {
    height: 700px;
    background: #7e7e7e;
    position: relative;
}

.step .stepbox {
    width: 800px;
    height: 600px;
    background: url(https://github.com/kimsangjunv1/coding/blob/main/animation/img/ani1.jpg?raw=true);
    border-radius: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: ani 1s steps(34, 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: -27200px 0;
    }
}

.stepBtn {
    position: absolute;
    left: 15px;
    top: 20px;
}

.stepBtn a {
    background: #161616;
    color: #fff;
    padding: 10px;
    margin: 3px;
    border-radius: 3px;
}
    

---

HTML

하단의 간단한 HTML을 통해 이미지가 움직일 공간을 만들어줍니다!

<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>

---

HTML

애니에이션이 버튼을 누르면 show 클래스를 없애고 붙이고 하는 방식으로 움직임을 제어할 수 있게 스크립트를 작성해줍니다!

{
    document.querySelector(".stepBtnStart").addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(".stepbox").classList.remove("stop");
        document.querySelector(".stepbox").classList.add("start");
    });
    document.querySelector(".stepBtnStop").addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(".stepbox").classList.remove("start");
        document.querySelector(".stepbox").classList.add("stop");
    });
}

완성 : 움직이는 애니메이션

총 34장의 애니메이션 프레임을 구성해 걷는것처럼 보이는 애니메이션을 구성합니다.

Start Stop