5일차(CSS-애니메이션 효과)-24.11.20

애니메이션 효과

애니메이션

애니메이션의 사전적 정의는 ‘움직이지 않는 물체를 움직이는 것처럼 보이게 만드는 촬영기법 또는 그렇게 만들어진 영화’이다.
CSS는 웹페이지 상에서 표시되는 컨텐츠가 TV애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframes 모듈과 animation속성을 지원한다.
(속성값 변화뿐만 아니라 다양한 프레임을 가지고 움직이는 요소를 만들 수 있다.)

@keyframes

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

애니메이션(animation)

animation은 단축속성이며, animation의 다른 하위 속성들과 함께 지정하면
애니메이션의 실행 시간이나 방식 등을 추가로 정의할 수 있다.

접미사	의미	접미사	의미
-name	적용할 키프레임 이름	-direction	동작 진행 방향 (기본값 위-아래 역방향도 가능)
-duration	애니메이션 지속 시간	-iteration -count	반복 횟수
-delay	애니메이션 시작 전 시간	-fill-mode	전후 상태 설정 (끝났을 때 처음으로 돌아갈지 마지막으로 돌아갈지)
-timing -function	속도그래프	-play -state	애니메이션 적용 여부