CSS Animation - Rotate(빙글빙글 돌기)

한 자리에서 infinite하게 도는 animation을 만들고 싶어서 찾아봤다.

애니메이션은 아래와 같이 사용할 수 있는데, 보통 두번째나 세번째처럼 많이 사용하는 것 같다.

일단 keyframes에 대해 알아보자면, 어떤 모양에서 어떤 모양으로, 혹은 어디에서 어디로 이동할 지에 대해 정해줄 수 있는 메소드(?)다.

나는 360도 도는 동작을 원해서 아래와 같이 적어주었다. from-to 말고도 0% - 100% 이렇게 작성할 수 있다. 

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

keyframe을 정해준 후, 원하는 class나 id등 속성에 가서 animation을 등록해주면 된다. 

 

아래를 잠깐 짚고 넘어가자면, 

animation-name - 어떤 keyframe을 사용하는지

animation-duration - animation의 총 시간

animation-timing-function - animation의 진행 속도를 정함 (기본 값: ease)

animation-delay - animation을 시작하기 전 대기하는 속도

animation-iteration-count - animation을 시작하기 전, 대기하는 시간

animation-direction - animation 진행 방향 

animation-fill-mode - animation을 마친 후, 어떤 상태로 만들 지 정함

animation-play-state - 애니메이션을 진행할 지 멈출 지 정한다.

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes name | duration | easing-function | delay */
animation: slidein 3s linear 1s;

/* @keyframes name | duration */
animation: slidein 3s;

 

뭐가 많아서 아직 막 잘 다루는 것 같지는 않지만.. 그래도 rotate 만들었다!

 

원하는 곳에 아래 속성을 넣어주면 동작한다.

animation: rotate 5s infinite

 

참고 : 

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

animation - CSS: Cascading Style Sheets | MDN

www.codingfactory.net/11163

CSS / 애니메이션 / animation