CSS3 애니메이션을 한번 실행하기 위한 복합작성방법은 무엇인가요?
- WBOY원래의
- 2022-06-14 15:38:242140검색
css3에서 애니메이션 실행을 1회 설정하는 복합 작성 방법은 "animation : 이름 시간 속도 지연 1 역방향 재생 여부"인데, 여기서 "1"은 애니메이션이 재생되는 횟수, 즉 횟수를 의미합니다. 애니메이션은 약어 속성으로, 동작 키프레임 이름, 애니메이션 시간, 속도 곡선, 애니메이션 지연, 애니메이션 시간 및 요소 애니메이션에 대해 애니메이션을 역방향으로 재생할지 여부를 지정하는 데 사용됩니다.
이 튜토리얼의 운영 환경: 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>출력 결과:
(학습 영상 공유: css 영상 튜토리얼, html 영상 튜토리얼)
위 내용은 CSS3 애니메이션을 한번 실행하기 위한 복합작성방법은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!