ฉันจะมีภาพเคลื่อนไหว 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/ - มีการเล่นแอนิเมชั่นเพียงเรื่องเดียว (ภาพสุดท้ายที่ประกาศ) เท่านั้น