애니메이션 속성을 사용하여 루프 간 지연 실행을 구현하는 방법에 대한 튜토리얼
- 零下一度원래의
- 2017-05-18 14:37:383420검색
먼저 애니메이션의 정의와 사용법을 소개하겠습니다
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!