꼭 마스터해야 할 CSS3 애니메이션(Animation)의 8가지 속성

애니메이션 복합 속성입니다. 개체에 적용된 애니메이션 효과를 검색하거나 설정합니다.

","로 구분된 여러 속성 값이 있는 경우 의사 객체 :after 및 :before를 포함한 모든 요소에 적용됩니다.

1.animation-name 객체에 적용된 애니메이션 이름을 검색하거나 설정합니다.

반드시 함께 사용해야 합니다. @keyframes 규칙 사용, 예:@keyframes animations animation-name:animations;

2.animation-duration 객체 애니메이션의 지속 시간을 검색하거나 설정

animation- 지속 시간:3초; 애니메이션 완료 소요 시간은 3초입니다

3. animation-timing-function 객체 애니메이션의 전환 유형을 검색하거나 설정합니다

선형: 선형 전환. 베지어 곡선과 동일(0.0, 0.0, 1.0, 1.0)

용이성: 부드러운 전환. 베지어 곡선과 동일(0.25, 0.1, 0.25, 1.0)

이지 인: 느린 속도에서 빠른 속도로. 베지어 곡선과 동일(0.42, 0, 1.0, 1.0)

완화: 빠른 것에서 느린 것까지. 베지어 곡선과 동일(0, 0, 0.58, 1.0)

이즈인아웃: 느린 것에서 빠른 것, 그리고 느린 것. 베지어 곡선에 해당(0.42, 0, 0.58, 1.0)

step-start: steps(1, start)에 해당

step-end: steps(1, end )에 해당

steps(<integer>[, [ start | end ] ]?): 두 개의 매개변수를 허용하는 단계 함수입니다. 첫 번째 매개변수는 함수의 단계 수를 지정하는 양의 정수여야 합니다. 두 번째 매개변수의 값은 start 또는 end일 수 있으며 각 단계의 값이 변경되는 시점을 지정합니다. 두 번째 매개변수는 선택사항이며 기본값은 end입니다.

큐빅-베지어(, , , ): 특정 베지어 곡선 유형, 4개의 값은 [0, 1에 있어야 합니다. ] 간격

이내 4.animation-delay 객체 애니메이션 지연 시간을 검색하거나 설정합니다.

animation-delay:0.5s; 애니메이션이 시작되기 전의 지연 시간은 0.5입니다. s

5.animation-iteration-count 객체 애니메이션의 루프

회를 검색하거나 설정합니다.

animation -iteration-count: 무한 | 숫자;

무한: 무한 루프

숫자: 루프 수

6.animation-direction 검색 또는 루프에서 반대 방향으로 움직일지 여부

Normal: 정방향

reverse: 역방향으로 실행

alter: 애니메이션 실행 정상적으로 그리고 반대 방향으로 계속 교대로 실행

교대-역방향: 애니메이션이 먼저 역방향으로 실행된 다음 정방향으로 실행되고 교대로 계속 실행됩니다

7. animation-play-state 객체 애니메이션 상태 검색 또는 설정

animation-play-state:running | Paused;

running: Motion

Paused: Paused

animation-play-state:paused; 마우스가 지나갈 때 애니메이션이 멈추고, 마우스가 멀어지면 애니메이션이 계속됩니다

8. animation-fill-mode 객체 애니메이션 시간 외부의 상태를 검색하거나 설정

없음: 기본값, 애니메이션 외부의 객체 상태를 설정하지 않음

전달: 설정 객체 상태를 애니메이션이 끝날 때의 상태로

거꾸로: 객체 상태를 애니메이션이 시작될 때의 상태로 설정

둘 다: 객체 상태를 애니메이션이 끝날 때의 상태로 설정 애니메이션 시작 또는 종료

[관련 추천]

1. CSS3의 animation-direction 속성 자세히 소개

2. 공유 CSS3 애니메이션의 종료 이벤트 모니터링 예시(animation)

3. animation 속성을 사용하여 루프 간 지연 실행 예시 튜토리얼 구현

4. CSS3의 두 가지 일시정지 방법(전환, 애니메이션)에 대한 자세한 설명

위 내용은 꼭 마스터해야 할 CSS3 애니메이션(Animation)의 8가지 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!