[CSS] CSS로 움직이는 애니메이션(GIF)를 만들어보자

CSS로 움직이는 이미지 만들기

CSS애니메이션을 이용하면 움짤파일을 굳이 사용하지않아도, Gif파일처럼 흔히 말하는 움짤의 형식으로 만들수도 있습니다. 그리고 'Start'와 'Stop'버튼을 이용해 움직이는 이미지를 일시정지 할 수도 있습니다.

Start Stop

소스 보기

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>

CSS

.step {
    height: 700px;
    background: #fff;
    position: relative;
}
.step .stepbox {
    width: 800px;
    height: 600px;
    background: url(img/ani1.jpg);
    border-radius: 0;
    position: absolute;
    background-size: cover;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: ani 1s steps(16, 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: -12800px 0;
    }
}
.stepBtn {
    position: absolute;
    left: 15px;
    top: 20px;
}
.stepBtn a {
    background: #e16162;
    color: #fff;
    padding: 10px;
    margin: 3px;
    border-radius: 3px;
}

■ 무작정 따라해보기

작업하는 컴퓨터의 포토샵이 맛탱이가 갔습니다... 글만 열심히 적어보겠습니다

1. 우선 gif파일을 하나 구해옵니다. 저의 경우는 '드리블'이라는 사이트를 이용했습니다.
2. 다운받은 gif파일을 포토샵을 이용해서 열어줍니다.
3. 레이어갯수와 이미지의 w,h값을 확인해줍니다.
4. 위 이미지는 w: 800, h: 600이며 레이어갯수 16. 구한 (w 값 X 레이어 갯수) = (12,800)이 나오는데요 새로운 레이어를 만들어주는데, 이 곱한 값을 새 레이어의 w값으로 지정해줍니다. h값은 그대로 적용해줍니다.
5. 새로운레이어에 기존 이미지 레이어를 한개씩 이쁘게 정렬시켜서 옮겨줍니다. (고생하십쇼...)
6. 일렬로 저장된 이미지를 jpg나 png등으로 저장해줍니다.

7. 이 이미지를 CSS의 background를 이용하여 넣어줄 위치에 위치시킵니다.
8. 'transform: translate'를 이용해서 적절히 위치를 조정해준뒤 애니메이션효과를 부여합니다.

■ 원장도 아직도 헷갈리는 steps()애니메이션

애니메이션이 계단식(단계별)로 진행되도록 하는 함수입니다.
2개의 파라미터를 가지고 있는데 첫번째 파라미터는 양수값을 가지며 몇개의 단계로 나눌지를 정합니다.
두번째 파라미터는 "start"나 "end"가 오도록 되어있고 "end"가 디폴트입니다.
start는 첫번째 단계에서 애니메이션을 시작하며, "end"는 마지막 스텝에서 애니메이션이 끝납니다.