애니메이션 효과

✏️ 애니메이션 효과

CSS는 웹페이지 상에 표시되는 콘텐츠가 TV 애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframe 모듈과 animation 속성을 지원

---

✏️ @keyframe 모듈

애니메이션을 표현하는 여러 개의 프레임은 @keyframe 모듈을 이용해 정의
백분율을 이용해 프레임을 나누거나, 별도의 키워드로 간단하게 나눌 수 있음

사용 형태 : @keyframe "애니메이션 이름 지정" {프레임 지정}

키워드 from과 to로 애니메이션 프레임 지정

백분율을 이용해 애니메이션 프레임 지정

---

✏️ animation 속성

animation 하위 속성

1. -name : 적용할 키프레임 이름
2. -duration : 애니메이션 지속 시간
3. -delay : 애니메이션 시작 전 시간
4. -timing-fuction : 속도 그래프
5. -direction : 동작 진행 방향
6. -iteration-count : 반복 횟수
7. -fill-mode : 전후 상태 설정
8. -play-state : 애니메이션 적용 여부

단축 속성
맨 앞 name + 시간만 duration delay 순이고 나머지는 순서 관계없음