이 문서에서는 다단계 애니메이션 및 전환을 추가하는 과정을 보여줍니다.
다단계 애니메이션 및 전환을 사용하는 방법?
다단계 애니메이션을 만들기 위해 일련의 키프레임이 생성됩니다. 선택한 HTML 요소에 적용할 일련의 변경 사항을 지정합니다. 각 키프레임은 애니메이션의 다른 상태를 나타내며 브라우저는 이러한 상태 사이에서 요소를 부드럽게 전환합니다. 전환하는 동안 사용자 상호 작용 또는 상태 변경에 의해 지정된 기간 동안 CSS 속성의 원활한 변경을 지정합니다.
더 나은 이해를 위해 실용적인 예를 살펴보겠습니다.
예제 1: 다단계 애니메이션 적용
이 예에서 다단계 애니메이션은 선택한 HTML 요소에 적용됩니다. 아래 데모를 방문하십시오.
< 스타일 >
.animationExample {
너비: 130px;
높이: 130px;
배경색: 포레스트그린;
위치: 상대적;
애니메이션: moveAnimate 4s ease-in-out 무한;
}
< / 스타일 >
< 몸 >
< 사업부 수업 = '애니메이션 예' >< / 사업부 >
< / 몸 >
위의 코드 조각에서:
- 먼저 '라는 이름의 클래스 애니메이션예제 ”가 선택되었습니다. <스타일> ” 태그.
- 다음으로 '의 값 130픽셀 '는 '에 할당됩니다. 키 ' 그리고 ' 너비 ' 속성.
- 또한 ' 포레스트그린 ' 그리고 ' 상대적인 ”에 대한 값으로 배경색 ' 그리고 ' 위치 ” 속성을 사용하여 시각화를 향상시킵니다.
- 그 후 ' 생기 ” 속성을 설정하고 “ moveAnimate 4s는 무한대로 ease-in-out ” 애니메이션을 적용합니다.
- 값은 네 부분으로 구성됩니다. 첫 번째는 사용자 지정 이름 애니메이션, 두 번째는 완료 시간, 세 번째는 애니메이션 유형, 네 번째는 이 애니메이션이 적용되는 횟수에 대한 제한입니다.
- 마지막으로 HTML 요소를 만들고 ' 애니메이션예제 ” 클래스.
이제 ' 키프레임 ” 사용자 지정을 정의하는 규칙 “ moveAnimate ” 애니메이션:
@ moveAnimate 키프레임 {0 % {
왼쪽: 0 ;
배경색: 파란색;
}
오십 % {
왼쪽: 200px;
배경색: 포레스트그린;
변환: 회전 ( 180도 ) ;
}
100 % {
왼쪽: 0 ;
배경색: 파란색;
}
}
위의 코드 블록에서:
- 먼저 “ @키프레임 ” 블록은 정의할 커스텀 애니메이션의 이름과 함께 생성됩니다.
- 다음으로 '라는 블록을 만듭니다. 0% ” 애니메이션 시작 부분에 CSS 스타일을 적용합니다. 그리고 ' 배경색 ' 그리고 ' 왼쪽 ” CSS 속성.
- 이제 이름이 ' 오십% ” 애니메이션 중간에 스타일을 지정합니다. '라는 가치를 제공합니다. 200픽셀 ”, “ 포레스트그린 ' 그리고 ' 회전(180도) '를 'left', 'background-color' 및 'transform' 속성으로 변경합니다. 이렇게 하면 선택한 요소가 왼쪽으로 200px 회전할 수 있습니다.
위의 코드 블록을 컴파일한 후:
출력에는 선택한 HTML 요소에 다단계 애니메이션이 적용되었음을 보여줍니다.
예 2: 다단계 전환 적용
다단계 전환을 적용하려면 CSS 선택기를 ' 이행 ' 재산. 아래 코드를 방문하십시오.
.페이드 {
불투명도: 1;
전환: 불투명도 1s;
}
.fade:hover {
불투명도: 0;
}
<
/ 스타일>
<
몸>
< 피 수업 = '바래다' > 전환을 보려면 저 위로 마우스를 가져가세요. < / 피 >
< / 몸 >
위 코드에 대한 설명:
- 먼저 커스텀 ' 바래다 ” 클래스를 선택하고 1의 값을 “ 불투명 ' 재산. 또한 '의 값을 설정하십시오. 불투명도 1초 ' 로 ' 이행 ” CSS 속성. '의 기간 동안 불투명도를 설정하거나 제거합니다. 1초 '.
- 다음으로 “ :호버 ” 선택자는 “ 바래다 ' 수업. 그 안에 '의 가치 0 ”는 불투명도 속성으로 설정됩니다.
- 결국 HTML 요소는 ' <몸> ” 태그 및 “의 클래스 바래다 '가 첨부되어 있습니다.
컴파일 단계가 끝나면 웹 페이지가 다음과 같이 나타납니다.
GIF는 선택한 HTML 요소에 사용자 정의 페이드 전환이 적용되었음을 표시합니다.
결론
다단계 애니메이션과 전환은 동작과 시각 효과를 추가하여 HTML 웹 페이지에 생명을 불어넣습니다. 애니메이션의 경우 ' 키프레임 '와 같은 기간 백분율과 함께 활용됩니다. 0% '가 시작입니다. ' 오십% '는 중간이고 ' 100% ”는 애니메이션 지속 시간의 끝입니다. 전환을 위해 CSS 선택기를 ' 이행 ' 수업. 이 문서에서는 다단계 애니메이션 및 전환을 사용하는 프로세스를 보여 주었습니다.