CSS를 사용하여 애니메이션을 분할 요소에 바인딩하는 방법은 무엇입니까?

키프레임 방법을 사용하여 애니메이션 정의

키프레임 방법은 CSS에서 애니메이션 효과를 만드는 가장 일반적인 방법입니다.

예

Explanation

Explanation

• HTML 코드는 애니메이션을 위해 "컨테이너" 클래스가 있는 Division 요소를 사용합니다. @keyframes 규칙에 정의된 애니메이션은 교대 루프를 통해 요소를 0픽셀에서 오른쪽으로 100픽셀로 이동한 다음 오른쪽으로 200픽셀로 이동합니다.

• CSS 코드는 뷰포트의 너비가 50%, 높이가 뷰포트의 10%, 배경색이 보라색인 "컨테이너" 클래스를 정의합니다. 'myAnimation 2s 무한 교대' 값과 함께 'animation' 속성을 사용하여 요소에 애니메이션을 적용합니다. div 요소는 HTML 본문 내에 포함되어 있으며 웹 브라우저에서 볼 때 애니메이션이 적용됩니다.

클리핑 경로 사용

이전 예제를 이해했다면 매우 복잡한 애니메이션을 만드는 것은 너무 많은 코드 줄을 수동으로 작성해야 하기 때문에 상당히 어렵다는 것을 알았을 것입니다. 따라서 훌륭한 애니메이션 효과를 얻기 위해 사용할 수 있는 다른 도구도 많이 있습니다. 그러한 예 중 하나는 클리핑 패스를 사용하는 것입니다.

• clip-path는 요소의 나머지 부분을 숨기면서 표시(클리핑)할 요소의 특정 영역을 지정할 수 있는 CSS 속성입니다.

• 원, 직사각형, 다각형 또는 SVG 경로와 같은 기본 모양을 사용하여 생성할 수 있는 클리핑 경로로 영역을 정의할 수 있습니다.

예

Explanation

Explanation

• 여기서 HTML 문서는 플렉스 컨테이너를 사용하여 하위 요소를 가로 및 세로 중앙에 표시합니다. body 요소의 높이는 100vh이고 .container 클래스에는 원형 클리핑 마스크와 호버 전환 효과가 있습니다.

• .container 클래스에는 배경색, 너비, 패딩 및 텍스트 정렬, 테두리 반경 20px, 원형 마스크를 생성하는 클립 경로 속성이 있습니다. 호버 의사 클래스는 1초 전환 효과로 클립 경로의 크기를 변경합니다.

이 주제를 더 자세히 살펴보려면 다음 튜토리얼을 읽고 해당 주제에 대해 자세히 알아보세요. -

결론

이 기사에서는 CSS를 사용하여 애니메이션을 div 요소에 바인딩하는 방법을 배웠습니다. 동일한 작업을 수행하기 위해 키프레임 방법을 사용하는 방법을 독점적으로 살펴보겠습니다. 지속 시간, 지연, 동작 등과 같은 애니메이션 속성을 사용자 정의할 수 있습니다.