CSS 사용자 정의 속성을 사용하여 CSS 애니메이션을 재생하고 일시 중지하는 방법은 무엇입니까?

SS에서 애니메이션은 웹사이트에 시각 효과를 추가하는 효과적인 방법입니다. 그러나 때때로 우리는 이러한 애니메이션이 재생되는 시기와 방법에 대해 더 많은 제어를 원합니다. 여기에서는 CSS 사용자 정의 속성을 사용하여 CSS 애니메이션을 재생하고 일시 중지하는 방법을 살펴보겠습니다.

계속하기 전에 키프레임을 사용하거나 둘 이상의 상태 간 전환을 통해 CSS 애니메이션을 만들 수 있다는 점을 알아야 합니다.

문법

으아악

이름을 지정하고 @keyframes 키워드를 사용하여 애니메이션을 정의합니다. 중괄호 안에 백분율이나 키워드 값을 사용하여 애니메이션 단계를 정의합니다.

CSS에서 애니메이션 재생 및 일시중지

CSS에서 애니메이션 재생 및 일시 정지는 애니메이션 요소를 제어하는 ​​기능을 의미합니다. 이는 귀하의 웹사이트에 움직임과 시각적인 흥미를 더하는 방법입니다.

애니메이션 재생 및 일시 정지를 통해 애니메이션이 재생되는 시기와 방법을 제어할 수 있습니다. 이는 사용자가 집중해야 할 때 애니메이션을 일시 중지할 수 있도록 하려는 경우 유용합니다.

CSS에서는 animation-play-state 속성을 사용하여 애니메이션이 실행 중인지 일시 중지되었는지 제어할 수 있습니다. 기본적으로 animation-play-state 속성 은 running으로 설정되어 있습니다. 이는 페이지가 로드될 때 애니메이션이 자동으로 재생된다는 의미입니다. 그러나 CSS를 사용하여 언제든지 이 속성의 값을 변경하여 애니메이션을 시작하거나 중지할 수 있습니다.

CSS를 사용하여 애니메이션 재생 및 일시 정지 효과를 만들려면 다음 단계를 따르세요. -

1단계: 애니메이션 정의

첫 번째 단계에서는 제어하려는 애니메이션을 정의해야 합니다. 키프레임을 사용하여 간단한 애니메이션을 만들 수 있습니다.

2단계: 재생 및 일시 정지 효과 만들기

애니메이션을 정의한 후에는 애니메이션을 제어하는 ​​요소를 생성해야 합니다. 버튼, 체크박스, 호버 효과 등 HTML 요소를 모두 사용할 수 있습니다.

3단계: CSS 사용자 정의 속성 정의

이제 애니메이션 상태를 보유하는 CSS 사용자 정의 속성을 정의해야 합니다. 사용자 정의 속성에는 어떤 이름이든 사용할 수 있지만 이 예에서는 --animation-play-state 및 --animation-timingfunction을 사용합니다.

예제를 통해 위의 개념을 이해하겠습니다.

예 1

다음은 간단한 슬라이드쇼 애니메이션을 만드는 방법의 예입니다.

으아악

예 2

이것은 CSS 사용자 정의 속성을 사용하여 CSS 애니메이션을 재생하고 일시 중지하는 방법에 대한 또 다른 예입니다.

으아악

결론

CSS 사용자 정의 속성을 사용하여 CSS 애니메이션을 재생 및 일시 중지하면 웹 페이지에서 애니메이션을 제어하는 ​​간단하고 효과적인 방법이 제공됩니다. 첫 번째 예에서는 키프레임 애니메이션을 사용하여 애니메이션을 정의하고 animation-play-state 속성을 사용하여 해당 상태를 제어합니다. 두 번째 예에서는 전환 애니메이션을 사용하고 사용자 정의 속성 값을 변경하여 애니메이션 상태를 제어합니다. 두 기술 모두 CSS를 사용하여 쉽게 제어할 수 있는 동적 애니메이션을 만드는 방법을 제공합니다.

위 내용은 CSS 사용자 정의 속성을 사용하여 CSS 애니메이션을 재생하고 일시 중지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!