CSS 키프레임 애니메이션 예제 튜토리얼

CSS애니메이션에서 Transition 기술을 사용하는 것은 "암시적" 애니메이션 방법이고, 이에 대응하여 "명시적" 애니메이션 기술이 있습니다. 즉, CSS에서 이를 사용할 수 있는 애니메이션을 직접 지정하는 것입니다. 효과를 적용하려면 키프레임 속성을 사용해야 합니다.

데모: Falling Autumn Leaves 애니메이션

위의 "Falling Autumn Leaves Animation" CSS 애니메이션 데모는 매우 흥미롭고 CSS 애니메이션의 탁월한 특성을 완벽하게 보여줍니다.

바운싱 박스부터 시작하여 키프레임에 애니메이션을 적용하는 방법을 단계별로 소개하겠습니다.

데모: Bounce Box

CSS를 사용하여 이러한 애니메이션 효과를 선언하는 것은 매우 간단합니다. 먼저 @keyframes를 사용하여 애니메이션 효과 규칙을 설명합니다.

@keyframes bounce {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

@keyframes 코드 블록에는 집합적으로 키프레임이라고 불리는 일련의 CSS 규칙이 있습니다. 키프레임은 전체 애니메이션의 특정 순간에 애니메이션 스타일을 정의합니다. 애니메이션 드로잉 엔진은 다양한 스타일 간의 전환을 원활하고 원활하게 실현합니다. "bounce"로 정의된 위 애니메이션에는 두 개의 키프레임이 있습니다. 하나는 애니메이션의 시작 상태("from" 코드 블록)와 종료 상태("to" 코드 블록)입니다.

애니메이션이 정의되면 animation-name을 사용하여 애니메이션 대상 요소와 연결할 수 있습니다.

p {
 animation-name: bounce;
 animation-duration: 4s;
 animation-iteration-count: 10;
 animation-direction: alternate;
}

'bounce' 애니메이션은 위의 CSS 규칙에 바인딩되어 있으며 애니메이션 지속 시간은 4초로 설정되어 역실행 간격으로 총 10회 실행됩니다.

다음으로 회전, 배경색, 투명도 및 여러 키프레임을 사용해야 하는 기타 기술을 포함하는 보다 복잡한 애니메이션을 만들 예정입니다.

@keyframes pulse {
 0% {
   background-color: red;
   opacity: 1.0;
   transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   transform: scale(1.0) rotate(0deg);
 }
}

.pulsedbox {
 animation-name: pulse;
 animation-duration: 4s;
 animation-direction: alternate;
 animation-timing-function: ease-in-out;
}

여기서 키프레임은 백분율을 사용하여 애니메이션의 각 단계에서 액션 장면을 나타냅니다. 이전의 "from" 및 "to" 키워드는 실제로 "0%" 및 "100%"와 동일합니다.

CSS 키프레임 애니메이션의 목적은 웹 개발자에게 다채로운 페이지 효과를 더 쉽게 만들 수 있는 방법을 제공하는 것입니다. 대부분의 애니메이션 효과는 본질적으로 표현력이 뛰어나므로 브라우저 스타일 시스템에 속합니다. 프로그래머는 JavaScript 기술을 사용하여 이전의 수동 구현을 완전히 대체하여 간단히 스타일을 선언함으로써 이러한 효과 애니메이션을 만들 수 있습니다.

【관련 추천】

1. 무료 CSS 온라인 동영상 튜토리얼

CSS 온라인 매뉴얼

3. php.cn Dugu Jiujian (2)-css 동영상 튜토리얼

위 내용은 CSS 키프레임 애니메이션 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!