"Basic to Brilliance" 13강에 오신 것을 환영합니다! 이 게시물에서는 시간이 지남에 따라 웹 요소에 애니메이션을 적용하여 생명력을 더할 수 있는 강력한 방법인 CSS 애니메이션을 살펴보겠습니다. CSS 애니메이션을 사용하면 사용자 경험과 참여도를 향상시키는 부드럽고 역동적인 효과를 만들 수 있습니다.
CSS 애니메이션을 사용하면 요소가 정의된 기간 동안 다양한 스타일 간에 전환될 수 있습니다. 두 가지 주요 속성을 사용하여 애니메이션 작동 방식을 제어할 수 있습니다.
@keyframes 규칙은 애니메이션 중 여러 지점에서 요소가 가져야 하는 스타일을 지정합니다. 다양한 비율로 키프레임을 정의합니다(0%는 시작, 100%는 끝).
@keyframes changeColor { 0% { background-color: red; } 100% { background-color: blue; } }
이 예에서는:
요소에 애니메이션을 적용하려면 animation 속성을 사용합니다. 이 속성에는 몇 가지 핵심 값이 필요합니다.
지연: 애니메이션을 시작하기까지 기다리는 시간
예: 요소에 애니메이션 적용
.box { animation: changeColor 2s ease-in-out infinite; }
이 경우:
타이밍 기능은 시간이 지남에 따라 애니메이션이 진행되는 방식을 제어합니다. 몇 가지 일반적인 타이밍 기능은 다음과 같습니다.
ease-out: 애니메이션이 빠르게 시작되었다가 느려집니다.
예: 다른 타이밍 기능 적용
.box { animation: changeColor 3s linear; }
여기:
animation-iteration-count 속성을 사용하여 애니메이션이 반복되는 횟수를 제어할 수 있습니다. animation-delay를 사용하여 애니메이션 시작을 지연시킬 수도 있습니다.
.box { animation: changeColor 2s ease-in 3; animation-delay: 1s; }
이 경우:
animation-fill-mode 속성은 요소가 애니메이션 전후에 어떻게 표시되어야 하는지를 정의합니다. 일반적인 값은 다음과 같습니다.
backwards: 요소는 애니메이션이 시작되기 전의 초기 상태를 취합니다.
예: 애니메이션 이후 최종 상태를 유지합니다.
.box { animation: changeColor 2s ease forwards; }
여기:
쉼표로 구분하여 요소에 여러 애니메이션을 적용할 수 있습니다.
@keyframes moveBox { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } .box { animation: changeColor 2s ease, moveBox 2s ease-in-out; }
이 경우:
최신 브라우저는 CSS 애니메이션을 지원하지만 이전 버전의 브라우저에는 항상 공급업체 접두사를 추가하는 것이 좋습니다.
.box { -webkit-animation: changeColor 2s ease; -moz-animation: changeColor 2s ease; animation: changeColor 2s ease; }
This ensures compatibility across different browsers.
Next Up: In the next lecture, we’ll explore CSS Transitions, which allow you to animate changes in CSS properties smoothly. You’ll learn how to create engaging hover effects and other interactions that enhance user experience.
Ridoy Hasan
위 내용은 CSS 애니메이션 – 요소에 생명을 불어넣기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!