CSS 스프라이트와 steps를 사용하여 근육 트레이닝을 시도했습니다.

web 크리에이터 박스 씨의 기사를 참고로, 근육 트레이닝 (팔굽혀 펴기)를 애니메이션으로 해 보았습니다.

일러스트레이터로 그린 일러스트를 SVG 형식으로 저장

팔을 구부리기 전과 구부린 후의 움직임을 하나의 이미지 파일로 준비합니다.

HTML 및 CSS 구현

pushup 클래스에 이미지를 포함하고 움직여갑니다.

<h1>WORK OUT</h1>
      <div class="viewContainer">

          <div class="pushup"></div>

      </div>

CSS에서 이미지 배치와 애니메이션 동작을 설명합니다.

/* push up */
.pushup {
  background: url(../images/person/pushUpMan.svg) no-repeat;
  width: 360px;
  height: 173px;
  animation: play 1s steps(2) infinite
}

@keyframes play {
  to {
    background-position: -840px 0;
  }
}

애니메이션 움직임

animation 의 1s 는 애니메이션의 작동 시간(초)을 나타냅니다.step(2) 는 2단계를 반복한다는 의미입니다.

animation: play 1s（※時間） steps(2)（※コマ数） infinite

프레임 수를 늘리면 그만큼 부드러운 애니메이션을 만들 수 있습니다.
마지막으로 infinite를 지정하면 동작이 무한 루프가됩니다.

background-position: -840px 0;

keyframes 안에서 1초마다 배경을 지정한 수치분만큼 x축으로 즐겨 줌으로써 마치 움직임이 있는 것처럼 보이고 있습니다.

데모

실행 결과가 여기입니다.
데모 사이트

참고

CSS 스프라이트와 steps를 사용하여 애니메이션 이미지를 만듭니다.
codepen