애니메이션

애니메이션 개요

• transition과 비슷하지만 차이가 있음
• transition은user의 action에 의해 효과가 나타나지만 animation은 요소가 계속 스타일이 변경될 수 있게 설정 가능함
• transition은 a에서 b로만 전환되도록 설정 할 수 있지만 animation은 a에서 b,c,d등 다수의 스타일 전환을 할 수 있음

@keyframes

• 여러개의 스타일을 자동으로 작동하게 하는것이기 때문에 여러개의 스타일 시트를 정의해둘 수 있음

@keyframes slidein{
 from{
  margin-left: 100%;
  width: 300%;}

 to {
  margin-left: 0%;
  width: 100%;
 }
}

animation-name, animation-duration

• animation-name은 keyframes의 이름으로 기본값은 none임
• animation-duration은 몇 초 동안에 걸쳐서 재생을 할 것인지 정의함
• animation-duration은 양수만 가능함

animation-delay, animation-timing-function

• animation-delay는 지연시간을 설정할 수 있음
• animation-delay는 음수의 값을 지정할 수 있음. -1초를 지정하게 되면 바로 시작하지만 1초 지난 애니메이션을 재생함
• animation-timing-function은 linear, easein, easeout, easeinout 다 사용가능

animation-iteration-count, animation-direction

• animation-iteration-count는 반복 횟수
• animation-iteration-count는 number로 정의함
• animation-direction은 어느 방향으로 재생할 지 정함
• animation-direction은 normal은 정방향, reverse는 역방향, alternate 앞 뒤로 움직이나, 첫 번째 반복은 정방향, alternate-reverse는 앞 뒤로 움직이나, 첫 번째 반복은 역방향으로 움직임

animation-play-state

• running은 계속 재생되는 효과
• paused는 일시정지되는 효과

animation-fill-mode

• 애니메이션 실행되기 전과 후의 스타일을 적용하는 방법
• none: 스타일을 적용하지 않음
• forwards: 끝난 모습의 keyframes 유지
• backwards: 시작 전에 미리 준비
• both: forwards와 backwards 둘 다 적용