Làm cách nào để có hai hoạt ảnh CSS phát ở các tốc độ khác nhau ?

• Hình ảnh phải được xoay và phát triển cùng một lúc.
• Vòng quay sẽ quay sau mỗi 2 giây.
• Sự tăng trưởng sẽ chu kỳ sau mỗi 4 giây.

Mã ví dụ:

.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/ - chỉ một hoạt ảnh (hình ảnh cuối cùng được khai báo) phát.

TL; DR

Với dấu phẩy, bạn có thể chỉ định nhiều hoạt ảnh, mỗi hoạt ảnh có thuộc tính riêng như được nêu trong câu trả lời CriticalError bên dưới.

Thí dụ:

animation: rotate 1s, spin 3s;

Câu trả lời ban đầu

Có hai vấn đề ở đây:

# 1

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

Dòng thứ hai thay thế dòng thứ nhất. Vì vậy, không có hiệu lực.

# 2

Cả hai khung hình chính đều áp dụng trên cùng một thuộc tính transform

Thay vào đó, bạn có thể bọc hình ảnh trong một <div>và tạo hoạt ảnh cho từng hình ảnh riêng biệt và ở các tốc độ khác nhau.

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>

Trong trường hợp bất kỳ ai mới đến và bắt gặp chủ đề này, bạn có thể chỉ định nhiều hoạt ảnh - mỗi hoạt ảnh có thuộc tính riêng - bằng dấu phẩy.

Thí dụ:

animation: rotate 1s, spin 3s;

Bạn thực sự có thể chạy nhiều hoạt ảnh đồng thời, nhưng ví dụ của bạn có hai vấn đề. Đầu tiên, cú pháp bạn sử dụng chỉ xác định một hoạt ảnh. Quy tắc kiểu thứ hai ẩn kiểu đầu tiên. Bạn có thể chỉ định hai hoạt ảnh bằng cú pháp như sau:

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

như trong fiddle này (nơi tôi đã thay thế "scale" bằng "fade" do sự cố khác được giải thích bên dưới ... Chịu đựng với tôi.): http://jsfiddle.net/rwaldin/fwk5bqt6/

Thứ hai, cả hai hoạt ảnh của bạn đều thay đổi cùng một thuộc tính CSS (biến đổi) của cùng một phần tử DOM. Tôi không tin là bạn có thể làm được điều đó. Bạn có thể chỉ định hai hoạt ảnh trên các phần tử khác nhau, có lẽ là hình ảnh và một phần tử vùng chứa. Chỉ cần áp dụng một trong các hoạt ảnh cho vùng chứa, như trong fiddle này: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Bạn không thể phát hai hoạt ảnh vì thuộc tính chỉ có thể được xác định một lần. Thay vào đó, tại sao bạn không đưa hình ảnh động thứ hai vào phần đầu tiên và điều chỉnh khung hình chính để có đúng thời gian?

.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">

bạn có thể thử một cái gì đó như thế này

thiết lập các mẹ để rotatevà hình ảnh để scalesao cho rotatevà scalethời gian có thể khác nhau

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>