CSS3에서 전환을 사용하는 방법에 대한 심층적인 이해

애니메이션은 CSS 수준에서 구현할 수 있습니다. 이때 setInterval() 또는 타이머를 사용하는 대신 렌더링된 애니메이션의 품질과 부드러움이 JS 및 jQuery보다 훨씬 뛰어납니다.

웹 페이지 애니메이션을 만드는 우리의 전통적인 사고 방식을 뒤집기 위해 오늘날의 모바일 페이지에서는 setInterval()로 애니메이션이 완성되는 일이 전혀 없고 모두 전환을 통해 구현됩니다. 앞으로 2~3년 뒤에는 PC 쪽도 이렇게 될 것이고, 그 전환 과정에서 setInterval()과 animate 함수는 사라질 것이다.

구문: ​​전환: 속성 기간 타이밍-함수 지연 시간 단위는 초(s)입니다.

transition-property는 CSS 속성의 이름을 지정하며 전환 효과는 없음입니다. 속성이 없으면 전환 효과를 얻습니다. all 모든 속성은 전환 효과를 받습니다. 속성은 전환 효과를 적용하는 CSS 속성 이름의 쉼표로 구분된 목록을 정의합니다. 전환 지속 시간 전환 효과를 완료하는 데 필요한 시간(초 또는 밀리초)을 지정합니다. 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값은 0이며, 이는 효과가 없음을 의미합니다.

transition-timing-function은 동일한 속도(입방 베지어(0,0,1,1)와 동일)로 시작하고 끝나는 전환 효과

선형 전환 효과의 속도 곡선을 지정합니다.
ease 전환 효과는 천천히 시작했다가 빨라졌다가 천천히 끝납니다(cubic-bezier(0.25,0.1,0.25,1)).
느린 속도(3차 베지어(0.42,0,1,1)와 동일)에서 시작하는 이즈인 전환 효과.
느린 속도로 끝나는 완화 전환 효과(3차 베지어(0,0,0.58,1)와 동일)
느린 속도로 시작하고 끝나는 Ease-In-Out 전환 효과(입방 베지어(0.42,0,0.58,1)와 동일).
cubic-bezier(n,n,n,n)은 큐빅-베지어 함수에서 자체 값을 정의합니다. 가능한 값은 0에서 1 사이입니다.
transition-delay는 전환 효과가 시작되는 시점을 정의합니다. 전환 효과가 시작될 때까지 기다리는 시간(초 또는 밀리초)을 지정하세요.

어떤 속성이 전환에 참여할 수 있나요?

거의 모든 CSS 속성을 전환할 수 있습니다.
JQuery 전환
배경 색상
배경 위치
배경 이미지
모든 변형 변환이 전환 가능

전환 애니메이션의 트리거 조건은 무엇인가요?

CSS를 변경하면 전환이 실행됩니다. 예를 들어 마우스 오버, 카테고리 추가 및 빼기, CSS 직접 설정 등이 있습니다.
예:
CSS를 직접 설정하면 전환 애니메이션이 실행됩니다.

document.getElementById("box").style.width = "300px";

클래스 이름을 변경하면 전환 애니메이션이 실행됩니다.

document.getElementById("box").className = "long";

특별 참고 사항: 전환은 상속될 수 없습니다.

위 내용은 CSS3에서 전환을 사용하는 방법에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!