[BROWSER]애니메이션

@keyframes

시간 순서대로 정밀하게 짜여진 애니메이션

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

@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-name - 애니메이션 중간 상태 지정. @keyframes 블록에 작성
• animation-duration - 한 싸이클의 애니메이션이 재생될 시간 지정
• animation-delay - 애니메이션 시작 지연시킬 시간 지정
• animation-direction - 애니메이션 재생 방향 지정
• animation-iteration-count - 애니메이션 반복 횟수 지정
• animation-play-state - 애니메이션을 재생 상태. 멈추거나 다시 재생
• animation-timing-function - 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
• animation-fill-mode - 애니메이션이 재생 전 후의 상태 지정

---

animation-name

적용하고 싶은 요소에 animation 속성의 첫번째 값, 혹은 animation-name 속성으로 @keyframes로 만든 애니메이션 이름 작성

#logo {
  animation: lotate;
  /*혹은 
    animation-name : lotate(이것은 내 마음대로)
    */
}

animation-duration

재생될 시간을 animation 속성의 두번째 값, 혹은 animation-duration 이라는 속성으로 시간 단위로 작성, 기본값이 0

#logo {
  animation: lotate 3s;
  /* 혹은
    animation-name : lotate;
	animation-duration : 3s; 
    */
}

animation-delay

재생을 미룰 시간 지정, animation 속성에 띄어쓰기, 혹은 animation-duration 이라는 속성으로 시간 단위로 작성

#logo {
  animation: lotate 3s 3s;
  /* 혹은
    animation-name : lotate;
	animation-duration : 3s;
	animation-delay : 3s;
     */
}

animation-direction

재생 방향 지정, animation 속성에 띄어쓰기, 혹은 animation-direction 이라는 속성으로 작성

• normal - 기본값, 처음부터 다시 재생
• reverse - 역방향으로 재생
• alternate - 순, 역방향 번갈아 재생
• alternate-reverse - 역, 순방향 번갈아 재생

#logo {
  animation: lotate 3s reverse;
  /* 혹은
    animation-name : lotate;
	animation-duration : 3s;
	animation-direction : reverse;
     */
}

animation-iteration-count

재생 횟수 지정, 기본 값 1, infinite 무한 반복, 소수점 작성 시, 재생 도중 처음 상태

#logo {
  animation: lotate 3s 3;
  /* 혹은
    animation-name : lotate;
	animation-duration : 3s;
	animation-iteration-count : 3 ;
     */
}

animation-play-state

재생 상태 설정, 기본 값 running, 정지 pause, 보통 이벤트로 애니메이션 재생 상태 변경할 때 사용

#logo {
  animation: lotate 3s pause;
  /* 혹은
    animation-name : lotate;
	animation-duration : 3s;
	animation-play-state : pause ;
     */
}

animation-timing-function

속도 설정, linear, ease(기본), ease-in, ease-out, ease-in-out

animation-fill-mode

재생 전 후의 상태

• none - 기본 값. 재생 중이 아닌 경우 요소의 스타일 유지.
• forwards - 재생 중이 아닌 경우 마지막 키프레임 스타일 유지.
• backwards - 재생 중이 아닌 경우 첫 번째 키프레임 스타일 유지.
• both - 재생 전에는 첫 번째 키프레임 스타일, 재생 후에는 마지막 키프레임 스타일 유지.

---

@keyframes 중간값

키프레임을 설정하면서 주는 중간값은 애니메이션 재생 시간을 기준으로 함