Javascript없는 CSS Animation!
CSS 애니메이션은 자바스크립트 없이도 다양한 애니메이션을 가능하게 해주는 CSS 속성입니다. 이를 통해 간단한 효과부터 복잡한 애니메이션까지 구현할 수 있습니다. CSS 애니메이션의 핵심 요소는 @keyframes 규칙과 animation 속성입니다. 이 두 가지 요소가 함께 작동해 애니메이션의 움직임과 타이밍을 정의합니다. 1. CSS 애니메이션 기본 구성 요소(1) @keyframes 규칙@keyframes는 애니메이션의 단계별 상태를 정의하는 규칙입니다. 애니메이션 중간 상태를 정의하여 객체가 어떻게 움직이거나 변형되는지를 설정할 수 있습니다. 일반적으로 0%에서 100%까지의 상태를 정의해 시작과 끝 상태를 지정합니다.@keyframes moveRight { 0% { transform: ..
2024.10.29