[CSS] 애니메이션 이미지(animation), steps를 사용해 돌아가는 공 만들기

아래와 같이 동그라미 6개가 이어진 형태인 이미지를 차례로 출력하는 실습을 해보았다. 나는 단순히 동그라미 색상만 다르게 설정했지만, 이를 응용해서 그림을 넣거나 하면 간단하지만 재미있는 애니메이션 효과를 볼 수 있다. 이미지를 불러올 rainbow 클래스를 생성하였다. 이미지를 표출할 크기를 설정하고, 이미지 경로를 연결하였다. .rainbow { width: 150px; height: 150px; background: url('images/rainbow_ball.png') no-repeat 0 0 / auto 150px; animation: rainbow-ani 5s infinite steps(6); } background 슬래시(/)는 background-size 속성을 위해 다른 속성과 구분하는 ..