CSS3에서 전환 애니메이션 시간을 정의하는 데 사용되는 것
- 青灯夜游원래의
- 2022-02-28 13:35:375058검색
CSS3에서는 전환 기간 속성을 사용하여 전환 애니메이션의 시간을 정의할 수 있습니다. 이 속성은 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초 단위)을 지정할 수 있습니다. 설정 구문은 "전환 기간"입니다. : 시간;".
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS3에서는 전환 기간 속성을 사용하여 전환 애니메이션 시간을 정의할 수 있습니다.
전환 소개
전환은 페이드 인, 페이드 아웃, 애니메이션 속도 등과 같은 애니메이션 변환 과정인 전환을 제공합니다.
CSS3 전환의 전환 기능은 "버터"와 비슷하며 몇 가지 간단한 CSS 작업을 통해 스타일의 원활한 전환을 유발합니다.
1. 전환 속성(transition-property) 전환 애니메이션의 CSS 속성 이름을 정의합니다.
IDENT: 지정된 CSS 속성(너비, 높이, 배경색 속성 등)
all: 모든 요소를 지정합니다. 지원 전환 속성 속성의 스타일은 일반적으로 편의를 위해 사용됩니다. 2. 전환에 필요한 시간(전환 기간)은 전환 애니메이션의 길이를 정의합니다
. 이는 이전 속성을 설정하는 데 걸리는 시간입니다. 새 속성을 대체하면 단위는 초(s)
3. 전환 애니메이션 기능(transition-timing-function)
브라우저의 전환 속도와 전환 중 작업 진행 속도를 지정합니다.
| linear: 일정한 속도(균일한 움직임) |
| ease-in: 속도가 점점 빨라짐 Fast(페이딩 효과) |
| ease-out: 속도가 점점 느려지고 있습니다(페이딩 효과) |
| ease-in-out: 속도가 먼저 가속되고 그 다음 느려짐(페이드 효과) |
애니메이션이 실행되기 시작하는 시간과 변경 후 전환 효과를 실행하는 데 걸리는 시간을 지정합니다. 요소 속성 값
- 양수: 요소 전환 효과가 즉시 발생하지 않으며, 설정된 시간 값이 경과한 후에 발생합니다.
- 음수: 이 시점부터 요소 전환 효과가 표시되기 시작합니다. 이전 작업은 잘립니다
- 0: 기본값, 요소 전환 효과 즉시 실행
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>transition-property的使用</title> <style> div{ background-color: red; width: 200px; height: 200px; /*指定动画过渡的CSS属性 过渡时间 过渡动画 延迟时间*/ transition: background-color 2s ease-in-out 3s; -moz-transition: background-color 2s ease-in-out 3s; -webkit-transition: background-color 2s ease-in-out 3s; -o-transition: background-color 2s ease-in-out 3s; } div:hover{ background-color: yellow; } </style> </head> <body> <div></div> </body> </html>전환 트리거 메커니즘
전환을 트리거하는 마우스 이동 효과가 없으면 실제로는 div는 전혀 변경되지 않습니다. 의사 클래스 호버는 일종의 트리거 전환 메커니즘입니다. 다른 트리거 방법에는 어떤 것이 있나요?
- 미디어 쿼리: @media 속성을 통해 장치의 크기, 방향 등을 결정합니다.
- JavaScript 트리거: JavaScript 스크립트로 트리거합니다.
- 다음은 전환을 사용하여 전환 애니메이션을 구현하는 단계를 요약한 것입니다.
css 영상 튜토리얼
,웹 프론트엔드 입문 튜토리얼)
위 내용은 CSS3에서 전환 애니메이션 시간을 정의하는 데 사용되는 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!