CSS3에서 전환 애니메이션을 사용하는 방법

CSS3에는 애니메이션을 CSS 수준에서 구현할 수 있는 전환 속성이 ​​있다는 것을 알고 있습니다. 이는 setInterval()이나 timer를 사용하지 않지만 기본 C++는 렌더링을 통해 품질과 부드러움을 향상시킵니다. 렌더링된 애니메이션은 JS 및 jQuery보다 훨씬 좋습니다. 오늘은 이 전환 속성의 구체적인 용도를 살펴보겠습니다.

웹 페이지 애니메이션을 만드는 우리의 전통적인 사고 방식을 뒤집기 위해 오늘날의 모바일 페이지에서는 setInterval()로 애니메이션이 완성되는 일이 전혀 없고 모두 전환을 통해 구현됩니다.

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

transition-property는 CSS 속성의 이름을 지정하며 전환 효과는 없습니다. 어떤 속성도 전환 효과를 얻지 못합니다.

모든 속성에는 전환 효과가 적용됩니다.

property는 전환 효과를 적용하는 CSS 속성 이름 목록을 정의합니다. 목록은 쉼표로 구분됩니다.

transition-duration은 전환 효과를 완료하는 데 필요한 시간(초 또는 밀리초)을 지정합니다.

기본값은 0이며, 이는 효과가 없음을 의미합니다.

transition-timing-function

전환 효과의 속도 곡선을 지정합니다

linear 전환 효과는 동일한 속도(입방 베지어(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 직접 설정 등이 있습니다.

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

클래스 이름을 변경하면 전환 애니메이션이 트리거됩니다.

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

Special 참고: 전환은 상속될 수 없습니다.

전환 속성을 사용하는 방법은 매우 다양합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

CSS3에는 어떤 새로운 배경 속성이 있습니까?

CSS3 미디어 쿼리를 사용하는 방법

CSS3 Flexbox를 만드는 방법

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