CSS3에서 전환 애니메이션 시간을 정의하는 데 사용되는 것

CSS3에서는 전환 기간 속성을 사용하여 전환 애니메이션의 시간을 정의할 수 있습니다. 이 속성은 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초 단위)을 지정할 수 있습니다. 설정 구문은 "전환 기간"입니다. : 시간;".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3에서는 전환 기간 속성을 사용하여 전환 애니메이션 시간을 정의할 수 있습니다.

전환 소개

전환은 페이드 인, 페이드 아웃, 애니메이션 속도 등과 같은 애니메이션 변환 과정인 전환을 제공합니다.

CSS3 전환의 전환 기능은 "버터"와 비슷하며 몇 가지 간단한 CSS 작업을 통해 스타일의 원활한 전환을 유발합니다.

1. 전환 속성(transition-property) 전환 애니메이션의 CSS 속성 이름을 정의합니다.

IDENT: 지정된 CSS 속성(너비, 높이, 배경색 속성 등)

all: 모든 요소를 지정합니다. 지원 전환 속성 속성의 스타일은 일반적으로 편의를 위해 사용됩니다. 2. 전환에 필요한 시간(전환 기간)은 전환 애니메이션의 길이를 정의합니다

. 이는 이전 속성을 설정하는 데 걸리는 시간입니다. 새 속성을 대체하면 단위는 초(s)

3. 전환 애니메이션 기능(transition-timing-function)

브라우저의 전환 속도와 전환 중 작업 진행 속도를 지정합니다.

일반적인 전환 애니메이션 ease: 빠른 속도에서 느린 속도(기본값) linear: 일정한 속도(균일한 움직임) ease-in: 속도가 점점 빨라짐 Fast(페이딩 효과) ease-out: 속도가 점점 느려지고 있습니다(페이딩 효과) ease-in-out: 속도가 먼저 가속되고 그 다음 느려짐(페이드 효과) 4. 전환 지연 시간(transition-delay)

애니메이션이 실행되기 시작하는 시간과 변경 후 전환 효과를 실행하는 데 걸리는 시간을 지정합니다. 요소 속성 값

• 양수: 요소 전환 효과가 즉시 발생하지 않으며, 설정된 시간 값이 경과한 후에 발생합니다.

• 음수: 이 시점부터 요소 전환 효과가 표시되기 시작합니다. 이전 작업은 잘립니다

• 0: 기본값, 요소 전환 효과 즉시 실행

• 로그인 후 복사
  전환 트리거 메커니즘

전환을 트리거하는 마우스 이동 효과가 없으면 실제로는 div는 전혀 변경되지 않습니다. 의사 클래스 호버는 일종의 트리거 전환 메커니즘입니다. 다른 트리거 방법에는 어떤 것이 있나요?

의사 클래스 트리거: :hover, :active, :focus,checked 등

• 미디어 쿼리: @media 속성을 통해 장치의 크기, 방향 등을 결정합니다.

• JavaScript 트리거: JavaScript 스크립트로 트리거합니다.

• 다음은 전환을 사용하여 전환 애니메이션을 구현하는 단계를 요약한 것입니다.

(1) 기본 스타일에서 요소의 초기 상태 스타일을 선언합니다.

(2) 정지 상태 등 전환 요소의 최종 상태 스타일을 선언합니다.

(3) 기본 스타일에 전환 기능을 추가하여 다양한 스타일을 추가하세요.

(학습 영상 공유:

css 영상 튜토리얼

,

웹 프론트엔드 입문 튜토리얼)

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