[CSS] 이미지가 빙빙 돈다? animation spin

by

#css #spin #animation #spin

1. 이미지가 빙빙돈다!

어? 이게 뭐지? 이미지가 빙빙 돕니다.

나 이거 처음보고 진짜 머리 아팠잖아요? 나도 이제 진짜 고인물 다되었는지 요즘 이런 기술들 보면 신기해 죽겠습니다.

어떻게 하는지 한번 알아봅시다.

2. animation spin 정의

일단 animation을 이용하는 것이긴 한데 spin이라고 하는 애니메이션을 정의 해줘야 합니다.

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

이거를 간단하게 설명해보자면

@keyframes spin

- 0%일 때는 회전 각도(rotate)가 0도
- 100%일 때는 360도 회전

이렇다고 해요. 모르겠나요? 몰라도 됩니다. 그냥 css파일에 넣어주시면 되요.

3. class 정의

그런 다음에 아래에 class를 정의해줍시다.

.spinner {
  animation: spin 5s linear infinite;
}

spin이라고 쓴거 보이시나요? 위에 정의한 애니메이션을 이용해서 실제 움직이는 클래스를 정의해준 것입니다.

spinner 클래스에 animation 속성
- spin: 사용할 애니메이션 이름
- 2s: 지속 시간 (5초)
- linear: 속도 일정
- infinite: 무한 반복

뭐 대충 아시겠죠? 그냥 모르겠으면 넣어 넣어!

4. 이미지에 class 입히기

자, class를 만들었으니 이미지에 넣어줍시다.

<img class="spinner" src="" />

이렇게까지만 해주면 끝! 어렵지 않죠?

이쁘게 코딩해봅시다!

Leave a Comment