동시에 여러 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);
    }
}

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

각각 고유한 속성을 가진 여러 애니메이션을 쉼표로 지정할 수 있습니다.

예:

animation: rotate 1s, spin 3s;

TL;DR

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

예:

animation: rotate 1s, spin 3s;

원답

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

#1

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

두 번째 줄이 첫 번째 줄을 대체합니다.그래서 효과가 없습니다.

#2

두 키프레임이 동일한 속성에 적용됨transform

다른 대안으로 이미지를 a로 포장할 수 있습니다.<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>

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

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

(아래 설명된 다른 문제로 인해 "스케일"을 "페이드"로 대체했습니다.) 이 fiddle에서와 같이...참아주세요.) http://jsfiddle.net/rwaldin/fwk5bqt6/

둘째, 두 애니메이션 모두 동일한 DOM 요소의 동일한 CSS 속성(변환)을 변경합니다.당신이 그렇게 할 수 있다는 것을 믿을 수 없습니다.이미지와 컨테이너 요소 등 서로 다른 요소에 두 개의 애니메이션을 지정할 수 있습니다.이 fiddle에서처럼 애니메이션 중 하나를 컨테이너에 적용합니다. 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그리고 이미지는.scale그렇게 해서rotate그리고.scale시간이 다를 수 있습니다.

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>

다음 두 줄을 돌립니다.

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

대상:

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

언급URL : https://stackoverflow.com/questions/26986129/play-multiple-css-animations-at-the-same-time