CSS 애니메이션 지연. 예 - CSS 역방향 애니메이션
animation-delay 속성은 애니메이션 루프를 시작하기 전에 대기할 시간을 설정합니다. 0s 또는 0ms 값은 애니메이션을 즉시 시작합니다. 음수 값도 지연 없이 애니메이션을 활성화하지만 애니메이션 시작의 모양을 변경할 수 있습니다.
쉼표로 구분하여 나열하여 여러 값을 지정할 수 있습니다.
짧은 정보
통사론
애니메이션 지연:<время> [,<время>]*
표기법
| 설명 | 예시 | |
|---|---|---|
| <тип> | 값의 유형을 지정합니다. | <размер> |
| 에이앤비 | 값은 지정된 순서대로 출력되어야 합니다. | <размер> && <цвет> |
| 에이 | 비 | 제안된 값(A 또는 B) 중 하나만 선택해야 함을 나타냅니다. | 정상 | 작은 모자들 |
| 에이 || 비 | 각 값은 단독으로 사용하거나 임의의 순서로 다른 값과 조합하여 사용할 수 있습니다. | 너비 || 세다 |
| 그룹 값. | [ 자르기 || 가로 질러 가다] | |
| * | 0회 이상 반복합니다. | [,<время>]* |
| + | 한 번 이상 반복합니다. | <число>+ |
| ? | 지정된 유형, 단어 또는 그룹은 선택 사항입니다. | 삽입? |
| (A,B) | 최소한 A를 반복하되 B회 이하로 반복합니다. | <радиус>{1,4} |
| # | 쉼표로 구분하여 한 번 이상 반복합니다. | <время># |
예시
개체 모델
객체.style.animationDelay
메모
Chrome, Safari 및 Android는 -webkit-animation-delay 속성을 지원합니다.
Opera 버전 12.10 이전은 -o-animation-delay 속성을 지원합니다.
Firefox 버전 16 이전은 -moz-animation-delay 속성을 지원합니다.
사양
각 사양은 여러 단계의 승인을 거칩니다.
- Recommendation(권고) - 사양은 W3C에서 승인하고 표준으로 권장합니다.
- 후보자 추천( 가능한 권장 사항) - 표준을 담당하는 그룹이 목표를 충족한다고 만족하지만 표준을 구현하려면 개발 커뮤니티의 지원이 필요합니다.
- 제안된 권장 사항( 추천 추천) - 이 단계에서 문서는 최종 승인을 위해 W3C 자문 위원회에 제출됩니다.
- 작업 초안 - 커뮤니티 검토를 위해 토론 및 수정 후 보다 성숙한 초안입니다.
- 편집자 초안( 편집 초안)는 프로젝트 편집자가 변경한 후 표준의 초안 버전입니다.
- 초안 ( 사양 초안)은 표준의 첫 번째 초안 버전입니다.
브라우저
브라우저
브라우저 표에는 다음 표기법이 사용됩니다.
CSS3 애니메이션웹사이트를 동적으로 만듭니다. 웹 페이지에 생명을 불어넣어 사용자 경험을 개선합니다. CSS3 전환과 달리 애니메이션 생성은 키프레임을 기반으로 하므로 지정된 시간 동안 효과를 자동으로 재생 및 반복하고 루프 내에서 애니메이션을 중지할 수 있습니다.
CSS3 애니메이션은 거의 모든 html 요소와 :before 및 :after 유사 요소에 적용할 수 있습니다. 애니메이션 속성 목록은 페이지에 나와 있습니다. 애니메이션을 만들 때 일부 속성을 변경하려면 많은 리소스가 필요하기 때문에 가능한 성능 문제를 잊어서는 안됩니다.
CSS 애니메이션 소개
브라우저 지원
즉: 10.0
파이어폭스: 16.0, 5.0 -모즈-
크롬: 43.0, 4.0 -웹킷-
원정 여행: 4.0 -웹킷-
오페라: 12.1, 12.0 -o-
iOS 사파리: 9, 7.1 -웹킷-
오페라 미니: —
안드로이드 브라우저: 44, 4.1 -웹킷-
안드로이드용 크롬: 44
1. 키프레임
키프레임은 애니메이션의 다양한 지점에서 애니메이션 속성 값을 지정하는 데 사용됩니다. 키프레임은 단일 애니메이션 주기의 동작을 정의합니다. 애니메이션은 0번 이상 반복될 수 있습니다.
키프레임은 다음과 같이 정의된 @keyframes 규칙을 사용하여 지정됩니다.
@keyframes 애니메이션 이름(규칙 목록)
애니메이션 제작은 설치와 함께 시작됩니다. 핵심 인력@keyframes 규칙. 프레임은 어느 단계에서 애니메이션될 속성을 결정합니다. 각 프레임은 하나 이상의 속성 및 값 쌍의 하나 이상의 선언 블록을 포함할 수 있습니다. @keyframes 규칙에는 규칙과 요소의 선언 블록을 연결하는 요소의 애니메이션 이름이 포함됩니다.
@keyframes shadow ( (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) to (text-shadow: 0 0 3px black;) )
키프레임은 from 및 to(0% 및 100%에 해당) 또는 임의의 숫자로 설정할 수 있는 백분율 포인트를 사용하여 생성됩니다. 키워드와 백분율을 결합할 수도 있습니다. 프레임에 동일한 속성과 값이 있는 경우 하나의 선언으로 결합할 수 있습니다.
@keyframes 이동 ( from, to ( top: 0; left: 0; ) 25%, 75% (top: 100%;) 50% (top: 50%;) )
0% 또는 100% 프레임이 지정되지 않은 경우 사용자의 브라우저는 애니메이션되는 속성의 계산된(원래 설정) 값을 사용하여 프레임을 생성합니다.
여러 @keyframes 규칙이 같은 이름으로 정의되면 문서 순서의 마지막 규칙이 실행되고 이전의 모든 규칙은 무시됩니다.
@keyframes 규칙을 선언한 후 animation 속성에서 이를 참조할 수 있습니다.
H1(글꼴 크기: 3.5em, 색상: darkmagenta, 애니메이션: shadow 2s 무한 이즈 인 아웃, )
브라우저의 결과를 예측할 수 없으므로 숫자가 아닌 값(드문 경우 제외)에 애니메이션을 적용하지 않는 것이 좋습니다. 또한 속성 값 color: pink 및 color: #ffffff , width: auto 및 width: 100px 또는 border-radius: 0 및 border-와 같이 중간점이 없는 속성 값을 키프레임하지 마십시오. 반경: 50%(이 경우 border-radius: 0%를 지정하는 것이 정확합니다).
1.1. 키프레임의 타이밍 기능
키프레임 스타일 규칙은 애니메이션을 다음 키프레임으로 이동할 때 사용할 타이밍 함수를 선언할 수도 있습니다.
예시
@keyframes 바운스 ( from ( top: 100px; animation-timing-function: easy-out; ) 25% ( top: 50px; animation-timing-function: easy-in; ) 50% ( top: 100px; animation-timing- 기능: ease-out; ) 75% ( 상단: 75px; animation-timing-function: ease-in; ) 에서 ( 상단: 100px; ) )
"바운스"라는 애니메이션에 대해 5개의 키프레임이 지정됩니다. 첫 번째와 두 번째 키프레임(즉, 0%~25%) 사이에는 감속 기능이 사용됩니다. 두 번째와 세 번째 키프레임(즉, 25%~50%) 사이에는 부드러운 가속 기능이 사용됩니다. 등. 요소는 페이지 위로 50px 이동하여 가장 높은 지점에 도달하면 속도가 느려지고 100px로 떨어지면 속도가 빨라집니다. 애니메이션의 후반부도 비슷하게 작동하지만 요소를 페이지 위로 25px만 이동합니다.
to 또는 100% 키프레임에 지정된 시간 함수는 무시됩니다.
2. 애니메이션 이름: animation-name 속성
animation-name 속성은 요소에 적용할 애니메이션 목록을 지정합니다. 각 이름은 애니메이션에 대한 속성 값을 제공하는 규칙에서 키프레임을 선택하는 데 사용됩니다. 이름이 규칙의 키 프레임과 일치하지 않으면 애니메이션할 속성이 없고 애니메이션 이름도 없고 애니메이션이 실행되지 않습니다.
여러 애니메이션이 동일한 속성을 변경하려고 하면 이름 목록의 끝에 가장 가까운 애니메이션이 실행됩니다.
애니메이션 이름은 대소문자를 구분하며 none 키워드는 허용되지 않습니다. 애니메이션의 본질을 반영하는 이름을 사용하는 것이 좋으며 하이픈 또는 밑줄 _ 과 함께 나열된 하나 이상의 단어를 사용할 수 있습니다.
속성은 상속되지 않습니다.
통사론
애니메이션 이름: 없음; 애니메이션 이름: test-01; 애니메이션 이름: -슬라이딩; animation-name: 수직으로 이동; 애니메이션 이름: test2; 애니메이션 이름: test3, move4; 애니메이션 이름: 이니셜; 애니메이션 이름: 상속;
3. 애니메이션 지속시간: animation-duration 속성
animation-duration 속성은 한 애니메이션 주기의 지속 시간을 결정합니다. 초 또는 밀리초 ms 단위로 지정됩니다. 요소에 둘 이상의 애니메이션이 설정된 경우 쉼표로 구분된 값을 나열하여 각각에 대해 다른 시간을 설정할 수 있습니다.
속성은 상속되지 않습니다.
통사론
애니메이션 지속 시간: .5초; 애니메이션 지속 시간: 200ms 애니메이션 지속 시간: 2초, 10초 애니메이션 지속 시간: 15초, 30초, 200ms
4. 타이밍 기능: animation-timing-function 속성
animation-timing-function 속성은 각 키프레임 쌍 사이에서 애니메이션이 어떻게 진행되는지 설명합니다. 애니메이션 중에는 지연 시간 기능이 적용되지 않습니다.
속성은 상속되지 않습니다.
| 애니메이션 타이밍 기능 | |
|---|---|
| 값: | |
| 선의 | 선형 기능, 애니메이션은 속도 변동 없이 전체 시간에 걸쳐 균일하게 발생합니다. |
| 베지어 함수 | |
| 쉬움 | 기본 기능인 애니메이션은 느리게 시작하여 빠르게 가속하고 마지막에는 느려집니다. 큐빅 베지어(0.25,0.1,0.25,1) 와 일치합니다. |
| 이즈 인 | 애니메이션은 천천히 시작하다가 마지막에 부드럽게 속도가 빨라집니다. 큐빅 베지어(0.42,0,1,1) 와 일치합니다. |
| 이즈아웃 | 애니메이션이 빠르게 시작되고 마지막에 천천히 느려집니다. 입방 베지어(0,0,0.58,1) 에 해당합니다. |
| 이지 인 아웃 | 애니메이션은 천천히 시작하여 천천히 끝납니다. 큐빅 베지어(0.42,0,0.58,1) 와 일치합니다. |
| 큐빅베지어(x1, y1, x2, y2) | 수동으로 0에서 1 사이의 값을 설정할 수 있습니다. 애니메이션 변경 속도의 모든 궤적을 구축할 수 있습니다. |
| 단계 함수 | |
| 단계 시작 | 애니메이션을 단계별로 설정하여 애니메이션을 세그먼트로 나누고 각 단계의 시작 부분에서 변경 사항이 발생합니다. 단계(1, 시작)로 계산됩니다. |
| 스텝 엔드 | 단계별 애니메이션은 각 단계가 끝날 때마다 변경됩니다. steps(1, end) 에서 계산됩니다. |
| 단계(단계 수, 단계 위치) | 두 개의 매개변수를 사용하는 단계 시간 함수입니다. 첫 번째 매개변수는 함수의 간격 수를 지정합니다. 두 번째 인수가 jump-none이 아닌 경우 0보다 큰 양의 정수여야 하며, 이 경우 1보다 큰 양의 정수여야 합니다. 선택 사항인 두 번째 매개변수는 다음 값 중 하나를 사용하여 애니메이션이 시작되는 지점인 단계의 위치를 지정합니다.
start 값을 사용하면 애니메이션이 각 단계의 시작 부분에서 시작되고 end 값을 사용하면 각 단계가 끝날 때 지연이 발생합니다. 지연은 애니메이션 시간을 단계 수로 나눈 결과로 계산됩니다. 두 번째 매개변수를 지정하지 않으면 기본값인 end가 사용됩니다. |
| 초기의 | |
| 상속하다 | |
통사론
애니메이션 타이밍 기능: 용이성; 애니메이션 타이밍 기능: 이지인(easy-in); 애니메이션 타이밍 기능: 이즈 아웃; 애니메이션 타이밍 기능: 이즈 인 아웃; 애니메이션 타이밍 기능: 선형; 애니메이션 타이밍 기능: 단계 시작; 애니메이션 타이밍 기능: 단계 종료; 애니메이션 타이밍 기능: 입방 베지어(0.1, 0.7, 1.0, 0.1); 애니메이션 타이밍 기능: steps(4, end); 애니메이션 타이밍 기능: 용이함, 단계 시작, 큐빅 베지어(0.1, 0.7, 1.0, 0.1); 애니메이션 타이밍 기능: 초기; 애니메이션 타이밍 기능: 상속;
단계별 애니메이션을 사용하여 텍스트 입력 또는 로딩 표시기와 같은 흥미로운 효과를 생성할 수 있습니다.
5. 애니메이션 반복: animation-iteration-count 속성
animation-iteration-count 속성은 애니메이션 루프가 재생되는 횟수를 지정합니다. 초기 값 1은 애니메이션이 처음부터 끝까지 한 번 재생됨을 의미합니다. 이 속성은 애니메이션이 대체 루프에서 반대로 재생되도록 하는 animation-direction 속성의 대체 값과 함께 사용되는 경우가 많습니다.
속성은 상속되지 않습니다.
통사론
애니메이션 반복 횟수: 무한; 애니메이션 반복 횟수: 3; 애니메이션 반복 횟수: 2.5; 애니메이션 반복 횟수: 2, 0, 무한;
6. 애니메이션 방향: animation-direction 속성
animation-direction 속성은 애니메이션이 일부 또는 모든 루프에서 반대로 재생되어야 하는지 여부를 결정합니다. 애니메이션이 반대로 재생되면 타이밍 기능도 반대로 됩니다. 예를 들어, 뒤로 재생하는 경우, easy-in 기능은 easy-out 처럼 작동합니다.
속성은 상속되지 않습니다.
| 애니메이션 연출 | |
|---|---|
| 값: | |
| 정상 | 모든 애니메이션은 지정된 대로 재생을 반복합니다. 기본값. |
| 역전 | 모든 애니메이션 반복은 정의된 방식에서 역방향으로 재생됩니다. |
| 번갈아 하는 | 애니메이션 루프의 모든 홀수 반복은 일반 방향으로 재생되고 모든 짝수 반복은 반대 방향으로 재생됩니다. |
| 교대 역 | 애니메이션 루프의 모든 홀수 반복은 반대로 재생되고 모든 짝수 반복은 일반 방향으로 재생됩니다. |
| 초기의 | 속성 값을 기본값으로 설정합니다. |
| 상속하다 | 부모 요소에서 속성 값을 상속합니다. |
애니메이션 루프 반복이 짝수인지 홀수인지 확인하기 위해 반복 횟수는 1부터 시작합니다.
통사론
애니메이션 방향: 정상; 애니메이션 방향: 역방향; 애니메이션 방향: 대체; 애니메이션 방향: 대체-역방향; 애니메이션 방향: 일반, 역방향; 애니메이션 방향: 대체, 역방향, 정상; 애니메이션 방향: 초기; 애니메이션 방향: 상속;
7. 애니메이션 재생: animation-play-state 속성
animation-play-state 속성은 애니메이션을 시작하거나 일시 중지할지 여부를 결정합니다. 루프 내에서 애니메이션을 중지하는 것은 JavaScript 스크립트에서 이 속성을 사용하여 가능합니다. state:hover 객체 위로 마우스를 가져가면 애니메이션을 중지할 수도 있습니다.
속성은 상속되지 않습니다.
통사론
애니메이션 재생 상태: 실행 중; 애니메이션 재생 상태: 일시 중지됨; animation-play-state: 일시 중지됨, 실행 중, 실행 중; 애니메이션 재생 상태: 초기; 애니메이션 재생 상태: 상속;
8. 애니메이션 지연: animation-delay 속성
animation-delay 속성은 애니메이션이 시작되는 시기를 결정합니다. 초 또는 밀리초 ms 단위로 지정됩니다.
속성은 상속되지 않습니다.
통사론
애니메이션 지연: 5초; 애니메이션 지연: 3초, 10ms
9. 애니메이션 재생 전후의 요소 상태: animation-fill-mode 속성
animation-fill-mode 속성은 실행 시간 외에 애니메이션에 의해 적용되는 값을 결정합니다. 애니메이션이 끝나면 요소가 원래 스타일로 돌아갑니다. 기본적으로 animation-name 및 animation-delay 요소에 애니메이션이 적용될 때 애니메이션은 속성 값에 영향을 미치지 않습니다. 또한 기본적으로 애니메이션은 종료 후 animation-duration 및 animation-iteration-count 속성 값에 영향을 미치지 않습니다. animation-fill-mode 속성은 이 동작을 재정의할 수 있습니다.
속성은 상속되지 않습니다.
| 애니메이션 채우기 모드 | |
|---|---|
| 값: | |
| 없음 | 기본값. 요소의 상태는 애니메이션 재생 전후에 변경되지 않습니다. |
| 전달 | 애니메이션이 종료된 후(animation-iteration-count 값에 의해 결정됨) 애니메이션은 애니메이션이 종료될 때까지 속성 값을 적용합니다. animation-iteration-count가 0보다 크면 애니메이션의 마지막으로 완료된 반복의 끝 값이 적용됩니다(다음 반복의 시작 값이 아닌). animation-iteration-count가 0이면 적용되는 값은 첫 번째 반복을 시작하는 값이 됩니다(animation-fill-mode와 동일: 거꾸로;). |
| 뒤로 | animation-delay 로 지정된 기간 동안 애니메이션은 키프레임에 정의된 속성 값을 적용하여 애니메이션의 첫 번째 반복을 시작합니다. 이는 키프레임 값에서(애니메이션 방향: 일반 또는 애니메이션 방향: 대체일 때) 또는 키프레임 값(애니메이션 방향: 역방향 또는 애니메이션 방향: 대체일 때)입니다. |
| 둘 다 | 요소가 애니메이션이 시작될 때까지 첫 번째 키프레임에 유지되고(양수 지연 값 무시) 마지막 애니메이션이 끝날 때까지 마지막 프레임에 유지되도록 합니다. |
통사론
애니메이션 채우기 모드: 없음; 애니메이션 채우기 모드: 앞으로; 애니메이션 채우기 모드: 뒤로; 애니메이션 채우기 모드: 둘 다; 애니메이션 채우기 모드: 없음, 뒤로; 애니메이션 채우기 모드: 둘 다, 앞으로, 없음;
10. 애니메이션 속기: animation 속성
모든 애니메이션 재생 옵션은 하나의 속성으로 결합할 수 있습니다. animation 은 공백으로 구분하여 나열합니다.
애니메이션: 애니메이션 이름 애니메이션 지속 시간 애니메이션 타이밍 기능 애니메이션 지연 애니메이션 반복 횟수 애니메이션 방향;
애니메이션을 재생하려면 animation-name 및 animation-duration의 두 가지 속성만 지정하면 됩니다. 나머지 속성은 기본값을 사용합니다. 속성의 순서는 중요하지 않습니다. 유일한 것은 animation-duration이 animation-delay 앞에 와야 한다는 것입니다.
11. 여러 애니메이션
하나의 요소에 대해 쉼표로 구분된 이름을 나열하여 여러 애니메이션을 설정할 수 있습니다.
Div(애니메이션: 섀도우 1초, 0.5초 이지인아웃, 5초 선형 2초 이동;)
CSS 애니메이션은 초기화된 직후에 시작할 필요가 없습니다. transition-delay 속성으로 시작하는 시점을 제어할 수 있습니다. 특정 시간 동안 전환을 지연하려면 속성 값에 지정합니다.
전환 지연: 1초; /* 애니메이션 시작을 1초 지연 */
이 속성은 사이트에서 간단한 상호 작용을 구현할 때 거의 사용되지 않지만 더 복잡한 효과를 만들어야 하는 경우에는 매우 유용할 수 있습니다. transition-duration과 유사하게 transition-property에 지정된 각 속성에 대한 지연 시간을 작성할 수 있습니다(열거 순서를 따르는 것도 중요합니다).
전환 속성: 색상, 배경색, 문자 간격; 전환 시간: 1초, 0.5초, 2초 전환 지연: 0초, 0초, 2초 /* 글자 간격 애니메이션을 2초 지연 */
브라우저 간 호환성을 잊지 마십시오 - 절대적으로 가족의 모든 속성 이행공급업체 접두사를 사용해야 합니다.
웹킷 전환 지연: 1초; -moz-전환-지연: 1초; -o-전환-지연: 1초; 전환 지연: 1초;
실용
실제로 transition-delay 속성은 마우스를 가져가면 펼쳐지는 드롭다운 메뉴를 만들 때 자주 사용됩니다. 이 경우 초기 상태 뿐만 아니라 최종 상태에 대해서도 작성합니다.
일부 사이트에서는 드롭다운 하위 메뉴가 너무 빨리 사라져 원하는 링크를 찾아 클릭하기 어렵다는 것을 눈치채셨을 것입니다. 일반 요소 및 유사 클래스:hover가 있는 요소에 설정된 transition-delay 속성은 이러한 동작을 방지하는 데 도움이 됩니다. 값은 다릅니다. 일반 상태의 경우 transition-delay 속성을 0보다 큰 값으로 설정해야 하며, hover 상태의 경우 0으로 설정해야 합니다. 예:
하위 메뉴( 불투명도: 0, 전환 속성: 모두, 전환 기간: .5초, 전환 지연: 1초, ) .menu:hover .submenu( 불투명도: 1, 전환 지연: 0초, )
이 코드는 마우스를 가져가면 메뉴가 지연 없이 나타나며 사라지는 시간은 1초 지연됩니다. 이 트릭은 확실히 메뉴를 더 사용자 친화적으로 만들 것입니다.
CSS 애니메이션 반복 지연 (5)
다음은 75%의 시간 동안 동일한 것을 보여주는 작은 스니펫입니다. 이 반복 패턴은 대기 시간을 잘 에뮬레이트합니다.
@-webkit-keyframes 슬라이드 ( 0% (배경 위치: 0 0;) 25% (배경 위치: 0 0;) 50% (배경 위치: 0 0;) 75% (배경 위치: 0 0; ) 100% (배경 위치: 13em 0;) ) @-moz-keyframes 슬라이드 ( 0% (배경 위치: 0 0;) 25% (배경 위치: 0 0;) 50% (배경 위치: 0 0;) 75% (배경 위치: 0 0;) 100% (배경 위치: 13em 0;) ) @keyframes 슬라이드 ( 0% (배경 위치: 0 0;) 25% (배경 위치: 0 0) ;) 50% (배경 위치: 0 0;) 75% (배경 위치: 0 0;) 100% (배경 위치: 13em 0;) )
최근에 CSS 애니메이션을 "올바르게" 사용하는 방법을 발견했습니다(이전에 JavaScript에서와 같이 복잡한 시퀀스를 생성할 수 없다고 무시했습니다). 그래서 지금은 그들에 대해 배우고 있습니다.
이 효과를 위해 그라디언트 "플레어"가 진행 상황과 유사한 요소를 덮도록 하려고 합니다. 기본 Windows Vista/7 진행률 표시줄에 대한 효과와 유사합니다.
@keyframes 바샤인 -image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) (1s) animations:4 선형 막대 )
보시다시피, 저는 4초 지연 후 1초 반짝임을 반복하려고 합니다.
그러나 animation-delay는 첫 번째 반복에만 적용되고 그 이후에는 반짝이가 계속 흔들리는 것 같습니다.
나는 다음과 같은 방식으로 이 질문을 "해결"했습니다.
@keyframes expbarshine ( from (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255),0) 80% background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);) to (background-image:linear-gradient (120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) ) .progbar ) 5개 애니메이션: 선형 무한;
from 및 80%는 정확히 동일하므로 애니메이션 길이의 80%가 "지연"됩니다.
이것은 작동하지만 다음 애니메이션에서는 애니메이션 자체가 동일한 길이로 유지되는 동안 지연이 가변적이어야 합니다(특정 요소에서는 일정하지만 애니메이션을 사용하는 요소 간에는 가변적임).
위의 "해결책"을 사용하면 더 긴 지연이 필요한 경우 더 느린 애니메이션으로 끝납니다.
첫 번째 반복뿐만 아니라 모든 반복에 애니메이션 지연을 적용할 수 있습니까?
minitech는 animation-delay가 애니메이션이 시작되기 전에 지연을 지정하고 아니다반복 사이의 지연. 사양 초안 편집기는 이것을 잘 설명하고 있으며 이 반복 지연 기능을 제공하는 이 기능에 대해 설명했습니다.
JS에 해결 방법이 있을 수 있지만 CSS만 사용하여 진행률 표시줄 플래시에 대해 이 반복적인 지연을 가짜로 만들 수 있습니다.
토치 분할 position:absolute 및 overflow: hidden 의 상위 div overflow: hidden 위치 선언, 100% 상태 설정 키 프레임진행률 표시줄의 너비보다 크고 왼쪽에 있는 큐빅 베지어 시간 기능과 오프셋 값을 사용하여 "지연"이 있는 가벼운 이즈 인 아웃 또는 선형 시간 모드를 에뮬레이트할 수 있습니다.
이것을 정확하게 얻기 위해 왼쪽 오프셋과 시간 함수를 정확하게 계산하기 위해 더 작은/scss 믹스인을 작성하는 것은 흥미로울 것입니다. 하지만 지금은 그것을 가지고 놀 시간이 없습니다. 이런 걸 보고 싶어!
여기에 내가 그것을 보여주기 위해 함께 만든 데모가 있습니다. (Windows 7 진행률 표시줄을 에뮬레이트하려고 하다가 약간 떨어졌지만 내가 말하는 내용을 보여줍니다)
/* CSS */ @keyframes progress ( from ( width: 0px; ) to ( width: 600px; ) ) @keyframes barshine ( 0% ( left: -100px; ) 100% ( left: 1000px; ) ) .flare ( animation -이름: 바샤인, 애니메이션 지속 시간: 3초, 애니메이션 방향: 일반, 애니메이션 채우기 모드: 앞으로, 애니메이션 타이밍 기능: 큐빅 베지어(.14, .75, .2, 1.01), 애니메이션 반복 -count: 무한; 왼쪽: 0; 상단: 0; 높이: 40px; 너비: 100px; 위치: 절대; 배경: -moz-radial-gradient(center, 타원 커버, rgba(255,255,255,0.69) 0%, rgba( 255,255,255,0) 87%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)) , color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, 타원 커버, rgba(255,255,255,0.69) 0%,rgba(255,255,52) ,0) 87%); /* Chrome10+,Safari5.1+ */ 배경: -o-radial-gradient(center, 타원 커버, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /*영형 pera 12+ */ 배경: -ms-radial-gradient(중앙, 타원 커버, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ 배경: 방사형 그래디언트(중앙에 타원, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */ 필터: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* 수평 기울기에 대한 IE6-9 폴백 */ z-index: 10; ) .progress ( 애니메이션 이름: 진행, 애니메이션 지속 시간: 10초, 애니메이션 지연: 1초, 애니메이션 타이밍 기능: 선형, 애니메이션 반복 횟수: 무한, 오버플로: 숨김, 위치: 상대, z-인덱스: 1; 높이: 100%; 너비: 100%; 오른쪽 테두리: 1px solid #0f9116; background: #caf7ce; /* 구형 브라우저 */ background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color- stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome, Safari4+ */ 배경: -webkit-linear-gradient(상단, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ 배경: -o-linear-gradient(상단, #caf7ce 0%,#caf7ce 18 %,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ 배경: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96% ); /* IE10+ */ 배경: 선형 그라데이션(아래로, #caf7ce 0%,#caf7ce 18%,#3fe81e 4 5%, #2ab22a 96%); /* W3C */ 필터: progid:DXImageTransform. Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ ).progress:after ( 내용: ""; 너비: 100%; 높이: 29px; 오른쪽: 0; 아래쪽: 0; 위치: 절대; z-인덱스: 3; 배경: -moz- linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, 왼쪽 상단, 오른쪽 상단, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* 크롬, 사파리4+ */ 배경: -webkit-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ 배경: -o-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Opera 11.10+ */ 배경: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* IE10+ */ 배경: 선형 그래디언트(오른쪽으로, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */ 필터: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ ).bar ( margin-top: 30px; height: 40px; width: 600px; position: relative; border: 1px solid #777; border-radius: 3px; )
나는 비슷한 문제가 있었고 사용했습니다
@-webkit-keyframes 팬 ( 0%, 10% ( -webkit-transform: translate3d(0%, 0px, 0px); ) 90%, 100% ( -webkit-transform: translate3d(-50%, 0px, 0px) ; ) )
양쪽 끝의 "지연"을 설명하기 위해 지속 시간을 속여야 한다는 것은 약간 성가신 일입니다.
이것이 당신이 해야 할 일입니다. 1초 애니메이션이 있고 반복 사이에 4초 지연이 있도록 작동해야 합니다.
@keyframes barshine( 0% ( 배경 이미지:선형 그래디언트(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%); background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%); ) . ; )
그래서 나는 이것을 많이 다루었고 당신은 아주 해키하지 않고 그것을 할 수 있습니다. 이것은 애니메이션 반복 사이에 지연을 설정하는 가장 쉬운 방법입니다. 1. SUPER EASY 및 2. 약간의 논리만 있으면 됩니다. 내가 만든 이 댄스 애니메이션을 확인하세요.
Dance( animation-name: dance; -webkit-animation-name: dance; animation-iteration-count: 무한; -webkit-animation-iteration-count: 무한; animation-duration: 2.5s; -webkit-animation-duration: 2.5s, -webkit-animation-delay: 2.5s, animation-delay: 2.5s, animation-timing-function: easy-in, -webkit-animation-timing-function: easy-in, ) @keyframes dance( 0% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg), -ms-transform: 회전(0deg), 변환: 회전(0deg), ) 25 % ( -webkit-transform: 회전(-120deg), -moz-transform: 회전(-120deg), -o-transform: 회전(-120deg), -ms-transform: 회전(-120deg), 변형: 회전( -120deg); ) 50% ( -webkit-transform: 회전(20deg), -moz-transform: 회전(20deg), -o-transform: 회전(20deg), -ms-transform: 회전(20deg), 변환: 회전(20deg); ) 100% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg), -ms-transform: 회전(0deg), 변환: 회전(0deg); ) ) @-webkit-keyframes 춤 ( 0% ( -webkit-transform: 회전(0deg); -moz-transform: 회전(0deg); -o-transform: 회전(0deg); -ms-transform: 회전(0deg) ), 변형: 회전(0deg), ) 20% ( -webkit-transform: 회전(20deg), -moz-transform: 회전(20deg), -o-transform: 회전(20deg), -ms-transform: 회전( 20deg); 변환: 회전(20deg); ) 40% ( -webkit-transform: 회전(-120deg), -moz-transform: 회전(-120deg), -o-transform: 회전(-120deg), -ms- 변형: 회전(-120deg), 변형: 회전(-120deg), ) 60% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg), -ms-transform: 회전(0deg), 변환: 회전(0deg), ) 80% ( -webkit-transform: 회전(-120deg), -moz-transform: 회전(-120deg), -o-transform: 회전( -120deg), -ms-transform: 회전(-120deg), 변형: 회전(-120deg), ) 95% ( -webkit-transform: 회전(20deg), -moz-transform: 회전(20deg), -o- 변환: 회전(20deg), -ms-변환: 회전(20deg); 변환: 회전(20deg); ) )
저는 실제로 애니메이션을 지연시키는 방법을 알아내려고 여기 왔습니다. 1. 애니메이션의 지속 시간을 연장하고 각 애니메이션에 대한 시간의 일정 비율을 얻으면 됩니다. Beore에서는 총 2.5초 동안 각각 0.5초씩 사용했습니다. 이제 총 지속 시간과 동일한 지연 시간을 추가하고 싶었기 때문에 지연 시간은 2.5초라고 가정해 보겠습니다.
애니메이션 시간은 2.5초이고 지연은 2.5이므로 지속 시간을 5초로 변경합니다. 그러나 전체 지속 시간을 두 배로 늘렸으므로 애니메이션 부분을 절반으로 줄여야 합니다. 아래에서 최신 정보를 확인하세요. 이것은 저에게 효과적이었습니다.
@-webkit-keyframes 춤 ( 0% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg), -ms-transform: 회전(0deg), 변환: 회전(0deg); ) 10% ( -webkit-transform: 회전(20deg); -moz-transform: 회전(20deg); -o-transform: 회전(20deg); -ms-transform: 회전(20deg) ; 변환: 회전(20deg); ) 20% ( -webkit-transform: 회전(-120deg), -moz-transform: 회전(-120deg), -o-transform: 회전(-120deg), -ms-transform: 회전(-120deg); 변환: 회전(-120deg); ) 30% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg), -ms -변환: 회전(0deg); 변환: 회전(0deg); ) 40% ( -webkit-transform: 회전(-120deg); -moz-transform: 회전(-120deg); -o-transform: 회전(-120deg) ), -ms-transform: 회전(-120deg), 변환: 회전(-120deg), ) 50% ( -webkit-transform: 회전(0deg), -moz-transform: 회전(0deg), -o-transform: 회전(0deg); -ms-변환: 회전(0deg); 변환 rm: 회전(0도); ) )
이것은 애니메이션의 지속 시간과 각 부분의 %를 변경하는 방법을 파악하는 데 사용하는 계산입니다.
희망 기간 = x
Wish_duration = animation_part_duration1 + animation_part_duration2 + ... (등)
총 기간 = x + y
animation_part_duration1_actual = animation_part_duration1 * Wish_duration / total_duration
간격을 두고 좌우로 움직이는 포스터를 벽에 만들었습니다. 나를 위해 이것은 작동합니다.
Div-animation( -webkit-animation: 바운스 2000ms 이즈아웃, -moz-animation: 바운스 2000ms 이즈아웃, -o-animation: 바운스 2000ms 이즈아웃, 애니메이션: 바운스 2000ms 이즈아웃 무한; -webkit-animation -delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55% 10%; ) @-webkit-keyframes 바운스( 0% ( transform: rotate(0deg); ) 3% ( 변환: 회전(1deg); ) 6% ( 변환: 회전(2deg); ) 9% ( 변환: 회전(3deg); ) 12% ( 변환: 회전(2deg); ) 15% ( 변환: 회전(1deg) ); ) 18% ( 변환: 회전(0deg); ) 21% ( 변환: 회전(-1deg); ) 24% ( 변환: 회전(-2deg); ) 27% ( 변환: 회전(-3deg); ) 30% ( 변환: 회전(-2deg); ) 33% ( 변환: 회전(-1deg); ) 36% ( 변환: 회전(0deg); ) 100% ( 변환: 회전(0deg); ) )
| 초기 값 | 0초 |
|---|---|
| 에 적용 | 모든 요소, ::before 및 ::after 의사 요소 |
| 상속 | 아니요 |
| 미디어 | 시각적인 |
| 계산된 값 | 지정된 대로 |
| 애니메이션 유형 | 이산 |
| 정식 주문 | 형식 문법에 의해 정의된 고유하고 모호하지 않은 순서 |
브라우저 호환성
이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 데이터에 기여하고 싶다면 https://github.com/mdn/browser-compat-data를 확인하고 풀 리퀘스트를 보내주세요.
GitHub에서 호환성 데이터 업데이트
| 데스크탑 | 이동하는 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 크롬 | 가장자리 | 파이어폭스 | 인터넷 익스플로러 | 오페라 | 원정 여행 | 안드로이드 웹뷰 | 안드로이드용 크롬 | 안드로이드용 파이어폭스 | 안드로이드용 오페라 | iOS의 사파리 | 삼성인터넷 | |
| 애니메이션 지연 | Chrome 전체 지원 43 전체 지원 43 전체 지원 3 접두사 접두사 | 에지 전체 지원 12 | 파이어폭스 전체 지원 16 메모 전폭적인 지원 16메모 메모 Firefox 57 이전에는 Firefox가 뷰포트에 애니메이션이 적용된 뷰포트 외부의 요소를 지연으로 다시 그리지 않았습니다. 이 버그는 Windows와 같은 일부 플랫폼에만 영향을 줍니다. 전폭적인 지원 49접두사 접두사 공급업체 접두사로 구현됨: -webkit- 전체 지원 44접두사 장애가있는 접두사 공급업체 접두사로 구현됨: -webkit- 비활성화됨 버전 44부터: 이 기능은 layout.css.prefixes.webkit 기본 설정 뒤에 있습니다(true로 설정해야 함). Firefox에서 기본 설정을 변경하려면 about:config를 방문하십시오. 전체 지원 5접두사 접두사 공급업체 접두사로 구현됨: -moz- | IE 전체 지원 10 | Opera 전체 지원 30 전체 지원 30 전체 지원 15 접두사 접두사 공급업체 접두사로 구현됨: -webkit- 지원 안 함 12.1 - 15 지원 안함 12 - 15접두사 접두사 공급업체 접두사로 구현됨: -o- | Safari 전체 지원 9 전체 지원 9 전체 지원 4 접두사 접두사 공급업체 접두사로 구현됨: -webkit- | WebView Android 전체 지원 43 전체 지원 43 전체 지원 ≤37 접두사 접두사 공급업체 접두사로 구현됨: -webkit- | Chrome Android 전체 지원 43 전체 지원 43 전체 지원 18 접두사 접두사 공급업체 접두사로 구현됨: -webkit- | Firefox Android 전체 지원 16 전체 지원 16 전체 지원 49 | |||
관련 출판물
-
연결 오류 코드 및 설명
VPN 연결을 시작할 때 오류가 발생하면 세 자리 코드를 기억하거나 적어 두어야 합니다. 일반적으로 오류는 ...
-
4x100 휠이 VAZ 이전에 맞을까요?
4는 볼트 구멍의 수입니다. 98과 100은 원의 지름(mm)입니다. 거리를 계산해보면...