여러 CSS 애니메이션을 동시에 다른 속도로 재생할 수 있나요?

다양한 속도로 동시에 여러 CSS 애니메이션 재생

해당 코드는 잘못된 구문으로 인해 여러 CSS 애니메이션을 동시에 실행하지 못합니다. 여러 애니메이션으로 요소에 애니메이션을 적용하려면 애니메이션 속성 내에서 각 애니메이션을 쉼표로 구분하여 별도로 선언해야 합니다.

요소를 비동기식으로 회전하고 크기를 조정하는 원하는 효과를 얻으려면:

1. 애니메이션 속성 선언:

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

2. 정의 회전을 위한 회전 애니메이션:

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

3. 성장을 위한 크기 조정 애니메이션 정의:

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

수정된 코드는 두 애니메이션을 모두 허용합니다. 동시에 플레이하여 다양한 속도로 요소를 회전하고 성장시키는 원하는 효과를 얻을 수 있습니다.

위 내용은 여러 CSS 애니메이션을 동시에 다른 속도로 재생할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!