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

다양한 속도로 여러 CSS 애니메이션을 동시에 트리거

귀하의 예에서는 회전 및 크기 조정 효과와 관련된 두 개의 CSS 애니메이션을 동시에 트리거하는 것을 목표로 했습니다. 그런데 후자의 애니메이션만 재생되는 문제가 발생했습니다.

이를 해결하려면 쉼표를 활용하여 단일 애니메이션 속성 내에서 여러 애니메이션을 지정하는 것이 적절한 해결책입니다. 각 애니메이션은 지속 시간과 속도를 포함하여 고유한 속성 세트를 가질 수 있습니다.

수정된 예:

.image {
    ...
    animation: spin 2s linear infinite, scale 4s linear infinite;
}

설명:

이 수정된 코드에서는 '스핀' 애니메이션과 '스케일' 애니메이션을 모두 포함하도록 애니메이션 속성을 정의합니다. 쉼표. 회전 애니메이션은 2초마다 주기를 완료하고, 스케일 애니메이션은 4초마다 주기를 완료합니다.

단일 애니메이션 속성 내에서 속도가 다른 여러 애니메이션을 통합하면 원하는 효과를 얻을 수 있습니다. 회전 애니메이션과 성장 애니메이션이 각각의 속도로 동시에 재생되도록 합니다.

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