CSS의 애니메이션이란 무엇입니까?

CSS의 애니메이션은 애니메이션을 완료하는 데 걸리는 시간을 지정하는 [animation-duration]과 같은 애니메이션 속성을 설정하는 데 사용되는 축약된 속성입니다. 그렇지 않으면 애니메이션 지속 시간이 0이 되며 지정할 수 없습니다. 재생됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3, 이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.

animation 속성은 6개의 애니메이션 속성을 설정하기 위한 단축 속성입니다:

(학습 비디오 권장 사항: css 비디오 튜토리얼)

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

참고: 항상 animation-duration 속성을 지정하십시오. 그렇지 않으면 지속 시간이 0이 됩니다. 애니메이션이 재생되지 않습니다.

구문: ​​

animation: name duration timing-function delay iteration-count direction;

animation-name은 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다. .​

animation-duration ​ 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.

animation-timing-function은 애니메이션의 속도 곡선을 지정합니다.

animation-delay 애니메이션이 시작되기 전의 지연 시간을 지정합니다.

animation-iteration-count 애니메이션을 재생해야 하는 횟수를 지정합니다.

animation-direction 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

예:

약식 속성을 사용하여 애니메이션을 div 요소에 바인딩:

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

관련 권장 사항: CSS 튜토리얼

위 내용은 CSS의 애니메이션이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!