[CSS] 애니메이션 실습 : 걷기 애니메이션 (from.토매토)

CSS : 애니메니션 만들기 : 걸어가는 토매토

이번 시간에는 CSS실습으로 귀여운 걷기 애니메이션을 만들어보겠습니다. 😄

---

border-radius

Start Stop

---

#1. HTML

다음은 HTML 코드 입니다!

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

다음은 CSS 코드 입니다!

.step {
  height: 700px;
  background: #fde7ef;
  position: relative;
}
.step .stepbox {
  width: 800px; height: 600px;
  background: url(https://user-images.githubusercontent.com/106949433/188998629-e1cb8ac8-0263-4b69-935d-eacd186c2535.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;
}

#3. JavaScript

다음은 자바스크립트 입니다!

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