CSS 애니메이션 만들기 : GIF 이미지 애니메이션 구현하기

CSS 애니메이션 : GIF 이미지 애니메이션 구현하기

오늘은 조금 다른 방식으로, GIF 이미지를 애니메이션으로 구현하는 방법을 알아보겠습니다.

---

1. 애니메이션을 만들 이미지 찾기

먼저, 어떠한 GIF 이미지를 애니메이션으로 만들 것인지 결정합니다.

2. 애니메이션의 프레임 나열하기

Photoshop에서 GIF 이미지를 가져와 Timeline 창을 띄우면, GIF를 이루고 있는 각각의 레이어들이 나타납니다. 여우 이미지의 크기는 1600px * 1200px이며, 레이어는 총 18개가 있었습니다. GIF의 이미지의 너비(1600px) X 레이어 수(18)의 값(28,800px)을 구해줍니다. 이후, width값이 28,800px, height값이 1200px인 새로운 창을 만들고, 여우의 움직임에 해당하는 각각의 레이어들을 가로로 나열한 뒤 이미지로 저장해 줍니다.

3. 코딩

이미지가 준비되었다면, 이제 코딩을 해봅시다. 애니메이션 효과로 steps를 시작점에서 레이어 수만큼 설정해 주고, keyframes로 이미지의 background-position에 변화를 주면 완성입니다.

.step {
    height: 800px;
    background: #ffe8d9;
    position: relative;
    overflow: hidden;
}
.step .stepbox {
    width: 1600px;
    height: 1200px;
    background: url(img/ani1.jpg);
    border-radius: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: ani 0.7s steps(18, 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: -28800px 0;
    }
}
.stepBtn {
    position: absolute;
    left: 15px;
    top: 20px;
}
.stepBtn a {
    background: #e16162;
    color: #fff;
    padding: 10px;
    margin: 3px;
    border-radius: 3px;
}

4. 결과 확인하기

See the Pen foxanimation by mj0614k (@mj0614k) on CodePen.