CSS 애니메이션을 시작하는 방법

CSS 애니메이션 : CSS 전환 이상의 동적 효과

CSS 애니메이션은 CSS 전환의 고급 버전입니다. 무한 루프를 지원하고 키 프레임을 사용하며 애니메이션 재생 중에 일시 중지 할 수 있습니다. 이 기사는 CSS 애니메이션의 모든 측면을 탐색 하여이 강력한 웹 디자인 기술을 쉽게 마스터 할 수 있도록 도와줍니다.

CSS 애니메이션 생성 : 키 프레임 및 애니메이션 속성 CSS 애니메이션을 만들려면 먼저 애니메이션 이름을 지정하고 키 프레임 규칙을 그룹화하는 규칙을 정의해야합니다. 그런 다음 애니메이션을 대상 요소에 적용하십시오.

CSS 애니메이션은 다음을 포함하여 다양한 속성을 통해 제어 할 수 있습니다. > (애니메이션 반복 횟수), (애니메이션 방향), (애니메이션 재생 상태) 및

애니메이션 컨트롤 : 일시 중지 및 루프

속성을 ​​사용하여 애니메이션을 일시 중지하십시오. 속성을 ​​@keyframes로 설정하면 무한 루프를 달성 할 수 있습니다.

성능 및 접근성 :주의해서 애니메이션을 사용하십시오 animation-delay CSS 애니메이션은 사용자 경험을 향상시킬 수 있지만, 예를 들어 특정 질병이있는 환자는 애니메이션에서 현기증이나 메스꺼움을 경험할 수있는 반면, 감광성 간질 환자는 가질 수 있습니다. 애니메이션으로 인한 간질 발작이있는 사람들에게는 사용될 가능성이 있습니다. 또한 애니메이션의 성능은 애니메이션 속성의 영향을 받고 일부 속성은 리플 로우 또는 리 그리기를 트리거하여 성능 저성 장치에서 성능 저하를 일으킬 수 있습니다. animation-duration animation-name 애니메이션과 전환의 차이 : 주요 차이 animation-timing-function CSS 애니메이션과 자매 기술 CSS 전환간에 몇 가지 주요 차이점이 있습니다. animation-iteration-count animation-direction 우아한 다운 그레이드 : animation-play-state 애니메이션에는 우아한 다운 그레이드 메커니즘이 부족하면 애니메이션이 유효하지 않으며 JavaScript가 대안으로 필요합니다. animation-fill-mode 루프 :

애니메이션은 반복적으로 반복적으로 반복 될 수 있습니다. 키 프레임 : 애니메이션은 키 프레임을 사용하여보다 복잡하고 상세한 효과를 만듭니다.

일시 중지 : animation-play-state 애니메이션은 재생주기 중에 일시 중지 될 수 있습니다. animation-iteration-count infinite 브라우저 호환성 : 주류 브라우저 지원

모든 주류 브라우저의 최신 버전은 CSS 애니메이션을 지원합니다. Firefox 15와 이전에는 접두사가 필요하지 않습니다. Internet Explorer 10과 11 및 모든 버전의 Microsoft Edge는 접두사 애니메이션도 지원합니다. 탐지 애니메이션 지원 : JavaScript 메소드

CSS 애니메이션 지원은 다양한 방식으로 감지 될 수 있습니다. 첫 번째 방법은

객체의 window 메소드가 존재하는지 테스트하는 것입니다. CSSKeyframeRule 브라우저가

규칙 및 API를 지원하는 경우 다음 방법을 사용할 수 있습니다.

const hasAnimations = 'CSSKeyframeRule' in window;

첫 번째 애니메이션을 만듭니다. 키 프레임 규칙 및 애니메이션 응용 프로그램

@supports 먼저, CSS.supports() 규칙을 사용하여 애니메이션을 정의하십시오. 규칙에는 두 가지 기능이 있습니다

애니메이션 이름을 설정하십시오 그룹 키 프레임 규칙

const hasAnimations = CSS.supports('animation-duration: 2s');

예를 들어 : 라는 애니메이션을 만듭니다 그런 다음 그런 다음 요소에 애니메이션을 적용하십시오

애니메이션 속성에 대한 자세한 설명 : 애니메이션 효과를 신중하게 제어 @keyframes @keyframes

겨울 속성을 사용하는 것이 더 간단하지만 때로는 긴 형식의 속성을 사용하는 것이 더 명확합니다. 다음은 긴 형식의 애니메이션 속성입니다 특성 설명 초기 값 애니메이션-코드> 애니메이션 실행 전 대기 시간 0s (지금 실행) 애니메이션 기간 애니메이션주기 시간 0s (애니메이션 없음) animation-name 규칙의 이름 없음 애니메이션 타이밍 기능 시작과 끝 상태 사이의 값을 계산하는 방법 Ease 애니메이션-권리-카운트 애니메이션 반복 수 1 애니메이션 지향 애니메이션이 뒤로 재생됩니까? 정상 (역전되지 않음) 애니메이션-플레이-스테이트 는 애니메이션이 실행되거나 일시 정지 입니다 실행 애니메이션 필 모드 애니메이션이 실행되지 않을 때 적용되는 속성 값을 지정합니다 없음 테이블> 루프 애니메이션 : 애니메이션-터레이션-카운트 속성

속성을 ​​

로 설정하면 애니메이션이 무한히 고정 될 수 있습니다.

애니메이션 방향 : 애니메이션 지향 속성 animation-iteration-count infinite

속성은 애니메이션의 재생 방향을 제어하는 ​​데 사용되는 4 가지 값을 수용합니다.

% 키 프레임 :보다 복잡한 애니메이션 시퀀스를 만듭니다 더 복잡한 애니메이션 시퀀스는 백분율 키 프레임을 사용하여 만들 수 있습니다.

애니메이션 채우기 모드 : 애니메이션 필드 모드 속성 animation-direction normal 속성 애니메이션이 시작되기 전후 요소 스타일을 제어합니다. reverse alternate 일시 중지 애니메이션 : 애니메이션-플레이 상태 속성 alternate-reverse

속성을 ​​사용하여 애니메이션을 일시 중지하고 복원하십시오. 애니메이션 이벤트 탐지 : 애니메이션 스타트, 애니메이션 및 애니메이션 이벤트

당신은 javaScript를 사용하여

,

및 이벤트를들을 수 있습니다.

성능 최적화 : 적절한 애니메이션 속성을 선택하십시오

일부 속성은 다른 속성보다 더 잘 수행됩니다. 리플 로우 또는 다시 그리기를 유발하는 속성 애니메이션을 피하십시오. animation-fill-mode

faq

이 기사에는 CSS 애니메이션과 CSS 전환, 애니메이션 속도 제어, 규칙, 레이아웃 애니메이션, 리버스 재생 애니메이션,

속성의 역할의 차이점을 다루는 CSS 애니메이션에 대한 자주 묻는 질문도 포함되어 있습니다. , Infinite Loop Animation, SVG 요소 애니메이션 및

와 animation-play-state의 차이점.

이 기사를 연구함으로써 웹 페이지의 상호 작용과 사용자 경험을 향상시키기 위해보다 세련되고 복잡한 CSS 애니메이션 효과를 만들 수 있습니다. 애니메이션을 사용할 때는 항상 성능과 접근성을 우선시합니다.

위 내용은 CSS 애니메이션을 시작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!