[CSS] 무한 회전하는 이미지

 

 

브랜드 홈페이지에서 로고를 무한으로 회전시켜서 임팩트 있는 UI를 만드는것이 최근 자주 보이는 것 같다.

무한 회전하는 이미지를 CSS로만 구현이 가능하다는 사실!

 

코드는 매우 간단하다.

.img {animation: rotate_image 6s linear infinite;transform-origin: 50% 50%;}

@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}

 

 

animation: rotate_image 6s linear infinite;

 

 

rotate_image 라는 이름을 가진 키프레임을 실행시켜라

6s : 6초에 한번씩 (animation-duration)

linear : 동일한 속도로 (animation-timing-function)

 

 

---

 

animation-timing-function에 들어갈 수 있는 값은 다양한데, 대표적인것들만 살펴보면 아래와 같다.

 

 

animation-timing-function 값

animation-timing-function	설명
ease	천천히 시작되고, 속도가 줄어들면서 끝남.
ease-in	천천히 시작
ease-out	빠르게 시작
ease-in-out	빠르게 시작 되어 평균 속도 유지
linear	속도가 동일함.

 

 

 

animation-timing-function 값에 따른 속도 차이 예시

 

 

linear

 

 

 

ease

 

 

 

 

 

ease-in-out