[CSS] animation 애니메이션을 구간별로 보여지도록 해보자

긴 이미지를 구간별 딱딱 한프레임씩 끊어서 보여주는 방법이 있습니다.

원래 긴 이미지를 animation 시키면 그냥 좌우 또는 상하로 쭈~~욱 이동이 됩니다...

하지만 긴 이미지를 딱딱 끊겨서 애니매이션처럼 보여주는 방법이 바로

animation-timing-function 안에 있는 steps() 라는 속성입니다.

사용방법은 아래와 같다. 표현방법은 한줄 표현방법으로~~

.test { animation: play 1s steps(10) infinite; }

@keyframes play { 

      0% { background-position:    0px 0; } 

    100% { background-position: -500px 0; } 

}

이것만 가지고 이해가 안갈수 있습니다. 

그래서 해외사이트를 뒤져서 예제를 하나 알아냈습니다. ㅎㅎ

아래의 링크를 클릭하면 (메가맨) 예제를 볼수 있습니다.

이미지를 어떻게 했는지도 살펴보면 참 좋은 예제입니다.

https://codepen.io/ChoEun/pen/KpYYeR?editors=110)

출처: https://codepen.io/ChoEun/

또다른 예제 사이트입니다.

출처 : http://simurai.com/blog/2012/12/03/step-animation

2개의 사이트만 예제사이트로 보아도 이해가 충분히 갈것입니다 ^^