여러 CSS 애니메이션을 동시에 트리거하려면 어떻게 해야 합니까?

여러 CSS 애니메이션을 동시에 트리거

CSS 애니메이션을 처리할 때 여러 애니메이션을 동시에 실행하는 것이 바람직한 경우가 많습니다. 이는 애니메이션 속성을 활용하여 달성할 수 있습니다.

코드 구조

두 개의 애니메이션을 동시에 실행하려면 아래와 같이 애니메이션 선언 내에서 쉼표로 구분된 목록을 사용할 수 있습니다.

animation: rotate 1s, spin 3s;

이 경우 지정된 요소에 회전 및 회전 애니메이션이 모두 적용됩니다. 각 애니메이션은 기간 및 타이밍 기능과 같은 사전 정의된 속성을 유지합니다.

데모 구현

이 개념을 설명하려면 다음 샘플 코드를 고려하세요.

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation: spin 2s linear infinite, scale 4s linear infinite;
}

@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

여기서는 -webkit-animation 속성 내에 쉼표를 사용하여 여러 애니메이션을 정의합니다. 스핀 애니메이션은 2초마다 이미지를 회전하고, 스케일 애니메이션은 4초마다 크기를 두 배로 늘립니다.

실시간 데모

이 효과가 실제로 작동하는 모습을 보려면 다음 URL을 참조하세요. http://jsfiddle.net/Ugc5g/3392/

위 내용은 여러 CSS 애니메이션을 동시에 트리거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!