다양한 속도로 여러 CSS 애니메이션을 동시에 트리거하는 방법은 무엇입니까?

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

질문:

두 개의 서로 다른 CSS 애니메이션을 시작하는 방법 동시에 서로 다른 속도로 작동하는지 확인하시겠습니까?

예를 들어, 2초마다 회전을 순환하고 4초마다 크기를 조정하는 방식으로 이미지를 동시에 회전하고 크기를 조정합니다.

코드 예:

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

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

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

이전 시도 이 코드를 사용하면 단 하나의 애니메이션만 재생됩니다(후자는 one).

답변:

속성이 다른 여러 애니메이션을 재생하려면 쉼표로 연결하세요.

업데이트된 예:

.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;
}

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