9-3. CSS 애니메이션 사용하기 (animation,@keyframs, animation-duration, ..)

1. animation CSS3의 animation 속성을 사용하면 자바 스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다. 1️⃣ @keyframs 속성, animation-name 속성 애니메이션 지점과 이름을 설정하는 속성으로 애니메이션 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다. 이때 애니메이션을 여러개 지정할 때를 대비하여 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다. animation-name : 이름 2️⃣ animation-du..

2021.10.15