걸어가자

⭐️ 애니메이션 효과 : 걸어가자 ⭐️

---

01. 애니메이션 효과

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다.
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다.

   ___ 참고하기 ___
  `1   @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다.

---

02. gif 에서 이미지 가져오기

[1] < div > 박스 만들기

포토샵으로 gif 파일을 하나씩 이어붙입니다.
가로로 긴 ~ 이미지 파일이 만들어집니다.

---

03. html 작성

[1] < div > 박스 만들기

포토샵으로 gif 파일을 하나씩 이어붙입니다.

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

---

[2] CSS 설정하기

@keyframes 을 이용하여 애니메이션의 움직임을 조절합니다.

  .step {
  height: 700px;
  background: #E7F9FF;
  position: relative;
}
 
.step .stepbox {
  width: 800px;
  height: 600px;
  background: url(img/walking.jpg);
  border-radius: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: ani 1s steps(30, start) infinite;        /* (애니메이션 이미지의 총 프레임수, start) */
}
 
.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;        /* 애니메이션 이미지의 총 너비 px */
  }
}
 
.stepBtn {
  position: absolute;
  left: 15px;
  top: 20px;
}
 
.stepBtn a {
  background: #e16162;
  color: #fff;
  padding: 10px;
  margin: 3px;
  border-radius: 3px;
}

결과보기