먼저 애니메이션의 정의와 사용법을 소개하겠습니다
animation속성은 축약된 속성으로 6가지 애니메이션 속성을 설정하는데 사용됩니다:
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
기본값: none 0easing 0 1 Normal
참고: 항상 animation-duration 속성을 지정하십시오. 그렇지 않으면 지속 시간이 0이 되고 애니메이션이 재생되지 않습니다.
구문
animation: name duration timing-function delay iteration-count direction;
animation-name은 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다. .
animation-duration 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.
애니메이션 타이밍 기능은 애니메이션의 속도 곡선을 지정합니다.
animation-delay 애니메이션이 시작되기 전의 지연 시간을 지정합니다.
animation-iteration-count 애니메이션을 재생해야 하는 횟수를 지정합니다. (값: n회, 무한 루프)
animation-direction 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.
요약:
위 속성을 바탕으로 특정 상황에 맞게 animation-delay와 animation-iteration-count만 설정하면 됩니다.
예:
p { animation:mymove 5s 5s infinite; -webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */ }
해결 예:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .item1{ list-style: none; -webkit-animation: revolving 4s 0s infinite; animation: revolving 4s 0s infinite; } @-webkit-keyframes revolving{ 0,75%{ -webkit-transform: perspective(700px) rotateX(90deg); } 87.5%{ -webkit-transform: perspective(700px) rotateX(0deg); } 100%{ -webkit-transform: perspective(700px) rotateX(-90deg); } } </style> </head> <body> <ul> <li class="item1">梅西与美洲杯失之交臂</li> </ul> </body> </html>
전체 애니메이션을 4초로 설정한 다음 처음 75%인 3초가 남습니다. 변경되지 않고(0~75%), 다음 25%는 애니메이션의 1초에 불과합니다.
【관련 추천】
1. CSS3의 animation-direction 속성에 대한 자세한 소개
CSS3 애니메이션을 마스터해야 합니다( 애니메이션)의 8가지 주요 속성
3. css3 애니메이션 종료 이벤트 모니터링 예시 공유(애니메이션)
4. CSS3 방식의 두 가지 일시정지 방법(전환, 애니메이션) 설명
위 내용은 애니메이션 속성을 사용하여 루프 간 지연 실행을 구현하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!