CSS 애니메이션 - 걷기 애니메이션

CSS 애니메이션 연습하기

오늘은 걸어가는듯한 애니메이션을 만들어보겠습니다.

---

결과

HTML

버튼을 두개 만들어줍니다.

&<div class="sample">
    <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

사진을 쭉 가로로 길게 만들어주고 800px씩 우에서 좌로 이동하는거로 만들어줍니다.

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

스크립트는 간단하니 코드팬을 확인하시기 바랍니다!!

코드팬 보기