[CSS3] Animation TIP : Frame By Frame 애니메이션 구현하기

Frame By Frame 애니메이션 구현하기 

1분 코딩님의 인터랙티브 웹 개발 제대로 시작하기 강의 참고

 

5100 X 300 사이즈의 스프라이트 이미지를 Frame By Frame 애니메이션으로 구현해야 되는 상황 

 

TIP1. 가로, 세로 사이즈의 두배 사이즈의 이미지를 만든 다음에 CSS 상에서 절반으로 잘라서 사용하기

: 레티나 디스플레이와 같은 고해상도 디스플레이에서 px 직접도가 높은 고해상도로 표현됩니다.

 

TIP2. animation-timing-function: steps() 속성을 사용하기

: 해당 속성을 지정해주지 않으면 -2550px 만큼 연속으로 흘러가는 애니메이션이 되는데, 해당 속성을 사용하면 steps 단계만큼 끊어지는 애니메이션을 구현할 수 있습니다. 

@keyframes spaceship-ani {
  100% {
  	background-position: -2550px 0;
  }
}

.spaceship {
  width: 150px;
  height: 150px;
  background: url('images/sprite_spaceship.png') no-repeat 0 0 / auto 150px;
  animation: spaceship-ani 1s infinite steps(17);        
}