/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */

@keyframes 애니메이션이름 {
	0% {            /* from 이라고 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}

	50% {           /* 애니메이션 진행도에 따른 스타일을 설정합니다. */
                  /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}

	100% {          /* to 라고 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}
}

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}

/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */

animation 속성

animation 에 전달해줄 수 있는 속성들은 다음과 같습니다.

• animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음
  • animation-name : 애니메이션의 중간 상태를 지정하는 이름. @keyframes 블록에 작성
  • animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
  • animation-delay : 애니메이션이 시작을 지연시킬 시간 지정
  • animation-direction : 애니메이션 재생 방향을 지정
  • animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
  • animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
  • animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  • animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정

코드스테이츠 로고에 logo라는 아이디를 부여하고 해당 요소에 각 속성을 적용해보며 각 속성이 어떤 의미인지도 차근차근 알아봅시다.