css animation

 

@keyframes

@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes

 

 

CSS 애니메이션 사용하기

CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

 




 

 

CSS @keyframes Rule

Make an element move gradually 200px down:

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp