애니메이션 - Animation Steps | 움직이는 이미지

CSS Animation Steps

gif 파일의 프레임을 풀어서 하나의 이미지로 만든후 값을 지정하여 움직이는 애니메이션 효과를 만들었습니다.

---

html

step 클래스는 이미지를 넣을 stepbox 가 넘치지 않도록 영역을 잡아준후 stepbox 에 이미지를 넣습니다.

코드 보기

<div class="step">
    <div class="stepbox"></div>
    <span class="stepBtn">
        <a href="#" class="stepBtnStart">Start</a>
        <a href="#" class="stepBtnStop">Stop</a>
    </span>
</div>

css

stepbox 에 해당하는 이미지크기를 원하는대로 조정한후 background 를 이용하여 프레임을 해체한 이미지를 불러옵니다.
여기서 중요한점은 크기를 조정한 결과에 따라 이미지 속도라 달라진다는것을 확인할수있습니다.
따라서 저는 원본이미지크기가 1600 / 1200 사이즈이므로 3배를 줄여 animation 을 3 배나 느리게 했습니다.
마지막으로 animation steps(15, start)[15프레임 첫번째이미지부터 시작] 하여 키프레임에서는
0~100% 까지 총 이미지의 끝인 24000px 까지 가기위해 15번을 잘라서 이동합니다.
24000 / 15 를 하면 1600px이니 한프레임당 1600px 를 이미지가 이동하는 방식입니다.

코드 보기

.step {
    height: 400px;
    background: #ffe8d9;
    position: relative;
    overflow: hidden;;
}
.step .stepbox {
/*     width: 1600px;
    height: 1200px; */
    /*원래 이미지 크기 */
    width: 400px;
    height: 300px;
    background: url('https://github.com/hmm365/coding2/blob/main/animation/img/cat.jpg?raw=true');
    background-size: cover;
    border-radius: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: ani 3s steps(15, 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: -24000px 0;
    }
}
.stepBtn {
    position: absolute;
    left: 15px;
    top: 20px;
}
.stepBtn a {
    background: #e16162;
    color: #fff;
    padding: 10px;
    margin: 3px;
    border-radius: 3px;
}

JavaScript

js 는 앞서 css에서 작성한 animation-play-state: running 및 paused 을 이용하여
버튼을 누르면 동작 하는 클래스를 클래스가 stepbox 인 요소에 추가 및 삭제 를 작동합니다.

코드 보기

$(".stepBtnStart").click(function (e) {
    e.preventDefault();
    $(".stepbox").removeClass("stop").addClass("start");
});
$(".stepBtnStop").click(function (e) {
    e.preventDefault();
    $(".stepbox").removeClass("start").addClass("stop");
});