1. @keyframes

전역적으로 재사용되게끔 설계되었다.

% 단위로 시간 진행에 따른 상태를 작성해주면 됨

@keyframes 애니메이션이름 {
   0%{
     CSS 속성 : 속성 값
   }
   50%{
     CSS 속성 : 속성 값
   }
   100%{
     CSS 속성 : 속성 값
   }
}

Ex) 회전하는 키프레임 애니메이션

@keyframes lotation{
   0%{
     transform : rotate(0deg)
   }
   50%{
     transform : rotate(180deg)
   }
   100%{
     transform : rotate(360deg)
   }
}

2. animation 속성

2-1) animation-name

애니메이션을 적용하고 싶은 요소에 animation 속성의 첫번째 값, animation-name 이라는 속성으로 @keyframes 키워드를 사용해서 만든 애니메이션 이름을 작성해준다.

#logo {
  animation-name : lotation
}

#logo {
  animation : lotation;
}

이 속성만으로는 애니메이션 재생이 안됨 ⇒ animation-name과 animation-duration을 지정해줘야 함

2-2) animation-duration

애니메이션이 재생될 시간 (작성하지 않을 경우 기본값이 0이므로 애니메이션이 재생되지 않음)

#logo {
  animation-name : lotation;
  animtion-duration : 5s;
}