두 개의 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;
원래 답변
여기에는 두 가지 문제가 있습니다.
#1
-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">
