CSS3 애니메이션 속성을 사용하는 방법

모든 사람을 위한 @keyframes 규칙과 모든 animation속성을 수집하세요. @keyframes가 규정된 애니메이션을 의미한다는 것을 모두가 이해할 수 있도록 실제 사례를 만들어 보겠습니다.

속성 설명 CSS

@keyframes 애니메이션을 지정합니다.

animation animation-play-state 속성을 제외한 모든 애니메이션 속성에 대한 약식 속성입니다.

animation-name은 @keyframes 애니메이션의 이름을 지정합니다.

animation-duration은 애니메이션이 한 주기를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값은 0입니다. ​​​​

animation-timing-function​​​애니메이션의 속도 곡선을 지정합니다. 기본값은 "쉽게"입니다.

animation-delay는 애니메이션이 시작되는 시기를 지정합니다. 기본값은 0입니다.

animation-iteration-count는 애니메이션이 재생되는 횟수를 지정합니다. 기본값은 1입니다.​

animation-direction ​ 다음 주기에 애니메이션을 역방향으로 재생할지 여부를 지정합니다. 기본값은 "정상"입니다.

animation-play-state는 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다. 기본값은 "실행 중"입니다.

다음 두 예제는 모든 애니메이션 속성을 설정합니다.

OperaSafariChromeFirefoxInternet Explorer

Example

첫 번째 애니메이션을 실행하고 모든 속성을 설정합니다.

div

{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

이 내용을 읽고 나면 마스터하신 것 같습니다. 사례 방법, 더 흥미로운 다른 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!

관련 읽기:

html에서 3D 서스펜션 효과를 구현하는 단계

H5로 불꽃놀이 입자 특수 효과를 만드는 방법

CSS를 사용하지 않고 마우스 호버 스타일을 변경하는 방법

위 내용은 CSS3 애니메이션 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!