CSS animate 가위바위보 연속 움직이는 애니메이션 만들기

 

 

크롬에서만 확인했고 타 브라우저 안될 수 있습니다.

(ie 하위는 당연히 안됩니다.)

 

비율을 맞춘 이미지가 준비물로 필요합니다.

제가 사용한 이미지는 무료 icon 사이트에서 가져왔고 찾아보면 많습니다.

(출처 http://www.freepik.com)

 

저는 step을 3등분해서 보여줄거라 다운로드 받은 이미지를 포토샵으로 비율을 맞춰줬습니다.

 

사용한 이미지 예시↓

 

가위 바위 보

 

CSS

.hands{
  // 이건 애니메이션 보여지는 크기
  width:125px;
  height: 175px;

  // 연결된 이미지 bg로 깔고 이미지 크기 정함.
  background:url('/images/hands2.jpg')no-repeat;
  background-size:384px;

  // 0.5초동안 step 3으로 나누어서 무한 실행
  animation: animate .5s steps(3,end) infinite;
}

// 100%까지 bg이미지 크기 position-x로 지정
@keyframes animate{
  0%{
  	background-position-x:0;
  }
  100%{
  	background-position-x:-384px;
  }
}

예제는 https://leeyoonseo.github.io/css_animate_ex1/ 여기서 확인 가능합니다.