Animation

transition 속성은 클래스명이 추가되거나 hover 등과 같은 "유저 액션(트리거)"를 통해서만 동작하지만, animation 속성의 경우 별도의 트리거나 설정없이도 동작하는 것이 가능합니다.

transition 속성은 전상태(0% 프레임)과 후상태(100% 프레임)만을 지정하여 애니메이션을 적용하지만, animation 속성같은 경우 사용자가 원하는 중간 프레임들을 지정하여 애니메이션을 조금 더 디테일하게 적용할 수 있습니다.

@keyframes

• 2개 이상의 애니메이션 중간 상태(프레임)을 지정하는 속성입니다.

• animation 속성은 @keyframes 규칙에 정의된 어떤 특정 애니메이션을 제어하는 속성입니다. 즉, animation 속성은 애니메이션을 제어하는 속성이며 실질적으로 애니메이션 정의는 @keyframes 규칙을 통해 선언을 합니다.

• keyframes 이름을 작성할 때는 영문, 숫자, _, -만을 사용할 수 있으며 대소문자를 구분합니다.

---

@keyframes 애니메이션_이름 {
	0% { ,,, }
    ,,,
    100% {,,,}
}

• @keyframes를 통해 각 프레임별로 어떻게 변화할지, 동작할 지 정의를 합니다. @keyframes를 통해 선언하며 애니메이션 이름은 우리가 사용할 애니메이션 이름을 작성합니다. 그리고 각 프레임의 {,,,}안에 변경될 CSS 속성을 작성합니다.

• transition 속성의 경우 전상태(0%)와 후상태(100%)의 스타일만 정의할 수 있지만 @keyframes 규칙을 사용하면 다양한 중간 상태(12%, 45% 등,,)의 내용을 설정할 수 있습니다.

• 0%의 경우 애니메이션 시작시 스타일이며 100%는 애니메이션 끝 스타일을 작성합니다. 만약 기존 스타일을 애니메이션 시작 스타일로 사용하는 경우 굳이 0% 프레임을 비워두거나 작성하지 않아도 되며, 기존 스타일로 애니메이션이 마무리되는 경우에도 100% 프레임을 비워두거나 작성하지 않아도 됩니다.

@keyframes example {
    50% { width: 300px; }
}

example 애니메이션의 경우 0% 지점에서는 기존 width 값을 사용하며 이후 0%부터 50% 지점까지 width 속성값이 300px이 되고, 이후 100%까지 기존 width 값으로 변경됩니다.

이처럼 변경이 될 지점의 프레임만 작성해줍니다.

animation

• 요소에 애니메이션을 설정 / 제어하는 단축 속성입니다. animation 단축 속성으로 아래와같은 개별 속성을 한 번에 작성할 수 있습니다.

animation: <animation-name> <animation-duration> <animation-timing-funcition> <animiation-delay>
           <animation-iteration-count> <animation-direction> <animation-fill-mode> <animation-play-state>;

• 값	의미	기본값
  animation-name	@keyframes 규칙의 이름을 설정	none
  animation-duration	애니메이션의 지속 시간 설정	0s, 0ms
  animation-timing-function	타이밍 함수 설정	ease
  animation-delay	애니메이션 대기 시간 설정	0s, 0ms
  animation-iteration-count	애니메이션 반복 횟수 설정	1
  animation-direction	애니메이션 반복 방향 설정	normal
  animation-fill-mode	애니메이션의 전후 위치 설정	none
  animation-play-state	애니메이션의 재생과 중지를 설정	running

• animation-name과 animation-duration 속성은 반드시 작성해야 애니메이션이 동작을 합니다.

• transition 속성과 마찬가지로 앞에 작성된 시간값이 animation-duration이고 뒤에 작성된 시간값이 animation-delay 값이 됩니다.

animation-name

• 적용할 @keyframes 규칙의 이름을 작성하는 속성입니다.

• 값	의미	기본값
  none	애니메이션을 지정하지 않음	none
  @keyframes 이름	이름이 일치하는 @keyframes 규칙의 애니메이션을 적용

• @keyframes 규칙을 통해 만들어낸 프레임 그룹의 이름을 연결하기 위해 작성합니다.

animation-duration

• 애니메이션 지속 시간을 설정하는 속성입니다. 즉, 0%부터 100%까지 한 사이클을 완료하는데 걸리는 시간을 설정하는 속성입니다.

• 값	의미	기본값
  시간	지속 시간을 설정(초, 밀리초)	0s, 0ms

• 시간값은 반드시 0이상 양의 정수를 작성해야 합니다. 즉, 음수값을 허용하지 않습니다.

animation-timing-function

• 애니메이션 효과를 계산하는 방법을 지정하는 속성입니다.

• 값	의미	기본값
  ease	빠르게 -> 느리게	ease
  ease-in	느리게 -> 빠르게
  ease-out	빠르게 -> 느리게
  ease-in-out	빠르게 -> 느리게 -> 빠르게
  step(n)	n번 분할된 애니메이션
  cubic-bezier()

animation-delay

• 애니메이션 시작 대기 시간을 설정하는 속성입니다. 즉, 애니메이션 시작 시점을 설정하는 속성입니다.

• 값	의미	기본값
  시간	대기 시간을 설정(초, 밀리초)	0s, 0ms

• 시간값을 작성할 때 음수값을 허용합니다. 양수값을 작성한 경우에는 지정된 시간이 경과된 이후에 시작되고, 음수값을 작성한 경우에는 애니메이션이 즉각적으로 시작되지만 시작되는 시점이 지정된 시간이 경과된 지점부터 시작하게 됩니다. 즉, 중간 프레임부터 시작하게 됩니다.

animation-iteration-count

• 애니메이션의 반복 횟수를 지정하는 속성입니다.

• 0%부터 100%까지 한 사이클이 1번이 됩니다. 0.5 값 지정시 애니메이션이 반만 진행됩니다.

• 값	의미	기본값
  숫자	반복 횟수를 설정	1
  infinite	무한 반복

animation-direction

• 애니메이션의 반복 방향을 설정하는 속성입니다.

• 즉, keyframes에 지정한 각 프레임의 순서를 설정할 수 있습니다.

• 값	의미	기본값
  normal	정방향으로만 반복	normal
  reverse	역방향으로만 반복
  alternate	정방향에서 역방향으로 반복(왕복)
  alternate-reverse	역방향에서 정방향으로 반복(왕복)

• alternate 값은 정방향으로 1번 역방향으로 1번 총 2번 반복하기 때문에 animation-iteration-count 속성의 값이 2 이상을 작성해주어야 정상적으로 동작합니다(alternate-reverse도 동일).
  즉, 0%~100% 한 사이클 그리고 100%~0% 한 사이클 총 두 사이클이 필요로 합니다.

• reverse 값은 100%에서 시작하여 0%로 끝나도록 애니메이션을 재생합니다.

animation-fill-mode

• 애니메이션의 전과 후 요소의 스타일 적용 방식을 설정하는 속성입니다.

• 값	의미	기본값
  none	애니메이션이 실행되지 않을 때 keyframes에 지정한 스타일 적용하지 않음 즉, 기존 스타일을 적용한다	none
  forwards	애니메이션 마지막 프레임의 스타일을 유지합니다
  backwards	애니메이션 시작 전 언제나 시작 스타일로 시작
  both	애니메이션 시작 전에는 언제나 시작 스타일로 시작하고 애니메이션 끝난 후에는 마지막 스타일을 유지

• none 값의 경우 애니메이션이 실행되지 않을 때는 기존 스타일을 사용합니다. 즉, 애니메이션 실행 전과 실행 후에는 기존 스타일을 그대로 사용하게 됩니다.

• forwards 값의 경우 애니메이션이 실행된 이후에 애니메이션의 마지막 프레임에 지정한 스타일을 유지하게 됩니다. 즉, 애니메이션이 끝나더라도 기존 스타일로 돌아오지 못하고 마지막 프레임의 스타일을 유지하게 됩니다.

• backwards 값의 경우 애니메이션 시작 전에 기존 스타일부터 시작하는 것이 아니라 바로 애니메이션의 첫 프레임 스타일부터 시작하게 됩니다.
  이는 animation-delay를 통해 지연 시간을 설정하더라도 언제나 첫 프레임 스타일부터 시작하게 됩니다.

• both 값은 forwards와 backwords 모두 적용된 것으로 애니메이션 시작은 언제나 첫 프레임의 스타일부터 시작하고, 애니메이션이 끝나더라도 마지막 프레임의 스타일을 유지하고 기존 스타일로 돌아가지 않게 됩니다.

animation-play-state

• 애니메이션의 재생과 정지를 설정하는 속성입니다.

• 값	의미	기본값
  running	애니메이션을 동작	running
  pasued	애니메이션 동작을 일시 중지

---

div {
    width: 100px;
    height: 100px;
    background-color: #0066ff;
    
    animation-name: my-animation;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes my-animation {    
    100% {
        width: 300px;
        height: 300px;
        background-color: #000;
    }
}              

위와 같은 애니메이션이 무한정 반복됩니다.