@keyframes

@keyframes 애니메이션명 {}

1. from to 키워드 사용

@keyframes move {
  /* 애니메이션 시작 시점 */
  from { left: 0; }
  /* 애니메이션 종료 시점 */
  to   { left: 300px; }
}

2. % 로도 사용 가능

@keyframes move {
  0%   { left: 0; }
  50%  { left: 100px; }
  100% { left: 300px; }
}

animation 속성

• 속기형
  animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state ;
• 기본값
  animation: none 0 ease 0 1 normal none running ;

• animation : 띄어쓰기로 쭉 나열해 속성 한번에 지정가능

프로퍼티	설명	기본값
animation-name	@keyframes` 에 작성할 이름	none
animation-duration	한 싸이클의 애니메이션 재생될 시간 지정. * 초 단위(s)나 밀리 초 단위(ms)로 지정, 지정해줘야 재생됨	0s
animation-timing-function	중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정	ease
animation-delay	시작을 지연시킬 시간 지정. *초 단위(s)나 밀리 초 단위(ms)로 지정	0s
animation-iteration-count	애니메이션 재생 횟수를 지정한다.	1
animation-direction	애니메이션이 종료 후 반복될 때 진행하는 방향을 지정	normal
animation-fill-mode	애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.
animation-play-state	애니메이션 재생 상태(재생 또는 중지)를 지정한다.	running

• animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
• animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
• animation-direction : 애니메이션 재생 방향을 지정
• animation-iteration-count : 애니메이션 재생 횟수 지정
• animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
• animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
• animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정