CSS3 애니메이션을 한번 실행하기 위한 복합작성방법은 무엇인가요?-프런트엔드 Q&A-php.cn

CSS3 애니메이션을 한번 실행하기 위한 복합작성방법은 무엇인가요?

WBOY

풀어 주다： 2022-06-14 15:38:24

원래의

2206명이 탐색했습니다.

css3에서 애니메이션 실행을 1회 설정하는 복합 작성 방법은 "animation : 이름 시간 속도 지연 1 역방향 재생 여부"인데, 여기서 "1"은 애니메이션이 재생되는 횟수, 즉 횟수를 의미합니다. 애니메이션은 약어 속성으로, 동작 키프레임 이름, 애니메이션 시간, 속도 곡선, 애니메이션 지연, 애니메이션 시간 및 요소 애니메이션에 대해 애니메이션을 역방향으로 재생할지 여부를 지정하는 데 사용됩니다.

CSS3 애니메이션을 한번 실행하기 위한 복합작성방법은 무엇인가요?

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 애니메이션이 한 번만 실행되도록 하는 합성 작성 방법은 무엇인가요?

css3에서 애니메이션 속성 이름은 "animation"인데,

이 속성은 바인딩된 키프레임 이름, 애니메이션 시간, 속도를 지정하는 데 사용되는 약어 속성입니다. 곡선, 애니메이션 지연, 애니메이션 시간 및 애니메이션을 역방향으로 재생할지 여부,

구문은 다음과 같습니다.

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

로그인 후 복사

animation-name은 선택기에 바인딩될 키프레임의 이름을 지정합니다.
animation-duration animation은 완료하는 데 몇 초 또는 밀리초를 지정합니다.
animation-timing-function 애니메이션이 한 주기를 완료하는 방법을 설정합니다.
animation-delay 애니메이션이 시작되기 전 지연 간격을 설정합니다.
animation-iteration-count는 애니메이션이 재생되는 횟수를 정의합니다.
animation-direction 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.
animation-fill-mode는 애니메이션이 재생되지 않을 때(애니메이션이 완료될 때 또는 애니메이션 재생이 시작되기 전에 지연이 있을 때) 요소에 적용할 스타일을 지정합니다.
animation-play-state는 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다.

애니메이션이 한 번만 실행되는 복합 글쓰기의 경우 animation-iteration-count 값을 1로 설정하면 됩니다.

예제는 다음과 같습니다.

<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s 1;
/* Safari and Chrome */
-webkit-animation:mymove 3s 1;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。</p>
<div></div>
</body>

로그인 후 복사

출력 결과:

CSS3 애니메이션을 한번 실행하기 위한 복합작성방법은 무엇인가요?