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

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로 설정하면 됩니다.

예제는 다음과 같습니다.

 
  
注意： Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。
 
 

출력 결과:

(학습 영상 공유:css 영상 튜토리얼,html 영상 튜토리얼)

위 내용은 CSS3 애니메이션을 한번 실행하기 위한 복합작성방법은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!