두 개의 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);
    }
}

http://jsfiddle.net/Ugc5g/3388/- 하나의 애니메이션 (마지막으로 선언 된 애니메이션) 만 재생됩니다.

답변

TL; DR

쉼표를 사용하면 아래 CriticalError 답변에 설명 된대로 각각 고유 한 속성이있는 여러 애니메이션을 지정할 수 있습니다.

예:

animation: rotate 1s, spin 3s;

원래 답변

여기에는 두 가지 문제가 있습니다.

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

두 번째 줄은 첫 번째 줄을 대체합니다. 따라서 효과가 없습니다.

# 2

두 키 프레임이 동일한 속성에 적용됩니다. transform

대안으로 이미지를로 감싸고 <div>각각을 개별적 으로 다른 속도로 애니메이션 할 수 있습니다.

http://jsfiddle.net/rnrlabs/x9cu53hp/

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

.spinner {
    position: relative;
    top: 150px;
    animation: spin 2s infinite linear;
}


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

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

<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>

스 니펫 확장

답변

새로운 사람이 와서이 스레드를 잡는 경우 쉼표를 사용하여 각각 고유 한 속성을 가진 여러 애니메이션을 지정할 수 있습니다.

예:

animation: rotate 1s, spin 3s;

답변

실제로 여러 애니메이션을 동시에 실행할 수 있지만 예제에는 두 가지 문제가 있습니다. 첫째, 사용하는 구문은 하나의 애니메이션 만 지정합니다. 두 번째 스타일 규칙은 첫 번째를 숨 깁니다. 다음과 같은 구문을 사용하여 두 개의 애니메이션을 지정할 수 있습니다.

-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s

이 바이올린에서와 같이 (아래에 설명 된 다른 문제로 인해 “스케일”을 “페이드”로 대체했습니다 … 저와 함께 참으 십시오.) : http://jsfiddle.net/rwaldin/fwk5bqt6/

둘째, 두 애니메이션 모두 동일한 DOM 요소의 동일한 CSS 속성 (변환)을 변경합니다. 나는 당신이 그렇게 할 수 있다고 믿지 않습니다. 다른 요소, 이미지 및 컨테이너 요소에 대해 두 개의 애니메이션을 지정할 수 있습니다. 이 바이올린과 같이 애니메이션 중 하나를 컨테이너에 적용하십시오. http://jsfiddle.net/rwaldin/fwk5bqt6/2/

답변

속성은 한 번만 정의 할 수 있으므로 두 개의 애니메이션을 재생할 수 없습니다. 오히려 첫 번째 애니메이션에 두 번째 애니메이션을 포함하고 타이밍을 맞추기 위해 키 프레임을 조정하는 것이 어떻습니까?

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

@-webkit-keyframes spin-scale {
    50%{
        transform: rotate(360deg) scale(2);
    }
    100% {
        transform: rotate(720deg) scale(1);
    }
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

스 니펫 확장

답변

이런 식으로 시도해 볼 수 있습니다

및 시간이 다를 수 있도록 부모를로 설정하고 rotate이미지를 로 설정합니다.scalerotatescale

코드 스 니펫 표시

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 2s linear infinite;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: scale 4s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes scale {
  100% {
    transform: scale(2);
  }
}

<div>
  <img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>

스 니펫 확장