Animation

• 요소의 현재 스타일을 다른 스타일로 변환

@keyframe
시작: 0%, from
과정: 1%, 3%, 10%, ..
끝: 100%, to

0%      5%      50%     ... 100%
장면1   장면2   장면3        끝장면

• animation-name: 애니메이션의 이름을 설정
• animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정
  • forwards: 애니메이션 키프레임이 완료되었을 때 마지막 프레임을 유지
• animation-direction: 애니메이션의 진행 방향을 정하는 속성
  • reverse: 반대 순서로 진행
  • alternate: 정해진 순서로 진행했다가 다시 반대순서로 돌아감
  • reverse-alternate: 반대 순서로 진행했다가, 다시 정해진 순서로 돌아감
• animation-duration: 애니메이션이 일어나는 시간을 설정
• animation-iteration-count: 애니메이션이 몇 번 반복할지 설정
  • infinite: 무한반복
  • 숫자: 숫자만큼 반복