เล่นภาพเคลื่อนไหว CSS หลายภาพในเวลาเดียวกัน


120

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


ภาพควรปรับขนาดในขณะที่หมุนหรือไม่ คำตอบที่ฉันให้ไว้ไม่ได้ แต่ถ้านั่นคือสิ่งที่คุณต้องการก็สามารถปรับแต่งให้ทำเช่นนั้นได้
Ram G Athreya

คำตอบ:


154

TL; ดร

ด้วยเครื่องหมายจุลภาคคุณสามารถระบุภาพเคลื่อนไหวหลายภาพพร้อมคุณสมบัติของตัวเองตามที่ระบุไว้ในคำตอบของ 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>


216

ในกรณีที่มีใครใหม่ ๆ เข้ามาและดูชุดข้อความนี้คุณสามารถระบุภาพเคลื่อนไหวหลายภาพโดยแต่ละภาพมีคุณสมบัติเป็นของตัวเองด้วยเครื่องหมายจุลภาค

ตัวอย่าง:

animation: rotate 1s, spin 3s;

3
ขอบคุณนี่เป็นวิธีแก้ปัญหาที่ง่ายกว่ามาก
Sergey Rotbart

12
นรกใช่ลูกน้ำ!
Zachary Dahan

4
แล้วความล่าช้าของภาพเคลื่อนไหวต่างกันอย่างไร
ชายร่างเล็ก

1
@ little-tiny-man คุณสามารถระบุจำนวนมากanimation-delayผ่านโคม่าได้เช่นกันดูคำตอบนี้
Klesun

35

คุณสามารถเรียกใช้ภาพเคลื่อนไหวหลายภาพพร้อมกันได้ แต่ตัวอย่างของคุณมีปัญหาสองประการ ขั้นแรกไวยากรณ์ที่คุณใช้ระบุเพียงหนึ่งภาพเคลื่อนไหว กฎลักษณะที่สองซ่อนกฎลักษณะแรก คุณสามารถระบุภาพเคลื่อนไหวสองภาพโดยใช้ไวยากรณ์ดังนี้:

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

เช่นเดียวกับในซอนี้ (ที่ฉันแทนที่ "มาตราส่วน" ด้วย "จาง" เนื่องจากปัญหาอื่น ๆ ที่อธิบายไว้ด้านล่าง ... ทนอยู่กับฉัน): http://jsfiddle.net/rwaldin/fwk5bqt6/

ประการที่สองภาพเคลื่อนไหวของคุณทั้งสองจะเปลี่ยนคุณสมบัติ CSS เดียวกัน (การแปลง) ขององค์ประกอบ DOM เดียวกัน ฉันไม่เชื่อว่าคุณจะทำได้ คุณสามารถระบุสองภาพเคลื่อนไหวในองค์ประกอบที่แตกต่างกันอาจจะเป็นรูปภาพและองค์ประกอบคอนเทนเนอร์ เพียงใช้หนึ่งในแอนิเมชั่นกับคอนเทนเนอร์ดังในซอนี้: http://jsfiddle.net/rwaldin/fwk5bqt6/2/


ขอขอบคุณที่ระบุว่าเราสามารถสร้างภาพเคลื่อนไหวหลายภาพได้เนื่องจากเราแยกชื่อด้วยเครื่องหมายจุลภาค
Zachary Dahan

3

คุณไม่สามารถเล่นสองภาพเคลื่อนไหวเนื่องจากสามารถกำหนดแอตทริบิวต์ได้เพียงครั้งเดียว แต่ทำไมคุณไม่รวมภาพเคลื่อนไหวที่สองไว้ในภาพแรกและปรับคีย์เฟรมเพื่อให้ได้เวลาที่เหมาะสม

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


2
ผู้ใช้ถาม "ด้วยความเร็วที่แตกต่างกัน"
rnrneverdies

ด้วยความเร็วที่ต่างกันการหมุนจะเกิดขึ้นใน 2 วินาทีในขณะที่สเกลจะเกิดขึ้นใน 4 วินาทีเนื่องจากการเขียนคำสั่งแอนิเมชันสองคำไม่ได้ผลฉันดูแลเวลาผ่านคีย์เฟรม
Ram G Athreya

แม้ว่าจะเป็นความจริงที่คุณไม่สามารถเล่นแอนิเมชั่นการแปลงร่างสองภาพในเวลาเดียวกันได้ (เนื่องจากการแปลงหนึ่งจะเขียนทับอีกภาพหนึ่ง) การพูดว่า "คุณไม่สามารถเล่นสองภาพเคลื่อนไหวได้เนื่องจากสามารถกำหนดแอตทริบิวต์ได้เพียงครั้งเดียว" ดูคำตอบที่ยอมรับเกี่ยวกับการใช้ค่าที่คั่นด้วยจุลภาคกับภาพเคลื่อนไหว
Justin

2

คุณสามารถลองสิ่งนี้

ตั้งค่าพาเรนต์เป็นrotateและรูปภาพเพื่อscaleให้rotateและscaleเวลาแตกต่างกัน

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.