ฉันจะเพิ่มคำนำหน้า (แปลง) ภายในคำนำหน้า (คีย์เฟรม) ได้อย่างไร

หากฉันใช้ @keyframes เพื่อทำแอนิเมชั่นการแปลงร่าง ฉันจะจัดวางคำนำหน้าอย่างไร

หากฉันมีสิ่งต่อไปนี้:

@keyframes animation {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

ฉันจำเป็นต้องเพิ่มคำนำหน้าการแปลงทั้งหมดลงในการประกาศคีย์เฟรมแต่ละรายการหรือไม่ เช่น:

@keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@-webkit-keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

มันใช้ได้ไหม? หากนี่เป็นวิธีที่ดีที่สุดหรือมีวิธีชวเลข / เร็วกว่านี้? ฉันคิดว่าวิธีนี้จะดูเทอะทะและน่ากลัวอย่างรวดเร็วด้วยแอนิเมชั่นที่ซับซ้อนเล็กน้อย


css css-animations cross-browser vendor-prefix
person Mr DC    schedule 23.12.2015    source แหล่งที่มา
comment
นักพัฒนาจำนวนมากใช้ปลั๊กอิน Javascript หรือ Pre-processor ในการดำเนินการนี้ ลองดู PrefixFree หรือ ตัวเติมคำอัตโนมัติ...ยังมีอื่นๆ อีก   -  person Paulie_D    schedule 23.12.2015

คำตอบ (1)


arrow_upward
2
arrow_downward

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

สิ่งที่คุณมีได้ผลอย่างแน่นอน แต่ไม่จำเป็น:

  • เบราว์เซอร์อื่นที่ไม่ใช่ IE จะไม่รู้จักการประกาศ -ms-transform อยู่แล้ว และเวอร์ชันของ IE ที่รองรับภาพเคลื่อนไหว CSS นอกกรอบก็รองรับ transform ที่ไม่มีคำนำหน้าด้วยเช่นกัน

    ซึ่งหมายความว่า -ms-transform ไม่จำเป็นเลย คุณควรลบอินสแตนซ์ทั้งหมดออก คุณต้องการมันจริงๆ นอกภาพเคลื่อนไหว CSS ที่คุณต้องการให้การแปลงทำงานแบบคงที่ใน IE9 ดูลิงค์ด้านบนเพื่อดูรายละเอียด

  • แอนิเมชันและการแปลงไม่มีคำนำหน้าใน WebKit เพียงไม่นานนี้เท่านั้น อย่างไรก็ตาม เวอร์ชันของ WebKit ที่รองรับ @keyframes ที่ไม่มีคำนำหน้าก็รองรับการแปลงที่ไม่มีคำนำหน้าด้วย คุณสามารถลบการประกาศ -webkit-transform ออกจากกฎ @keyframes ของคุณได้

  • ฉันจะไม่แตะต้องการประกาศ transform ที่ไม่มีคำนำหน้าในกฎทั้งสอง การแปลงไม่มีคำนำหน้าเร็วกว่าภาพเคลื่อนไหวเล็กน้อย ดังนั้น WebKit บางเวอร์ชันที่ต้องใช้ @-webkit-keyframes จึงรองรับการแปลงที่ไม่มีคำนำหน้า

นอกจากนี้ กฎที่ไม่มีคำนำหน้าควรอยู่ลำดับสุดท้าย สิ่งนี้ใช้ได้กับทั้งคุณสมบัติ (เช่น transform) และกฎ (เช่น @keyframes) นี่คือ CSS ของคุณที่มีการเพิ่มประสิทธิภาพข้างต้น:

@-webkit-keyframes animation {
    0%   {
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% { 
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@keyframes animation {
    0%   {
        transform:rotate(0deg);
    }
    100% { 
        transform:rotate(360deg);
    }
}
person BoltClock    schedule 23.12.2015
comment
ขอบคุณมาก ๆ; สิ่งนี้ได้ตอบคำถามของฉันและเคลียร์ข้อสงสัยเพิ่มเติมใด ๆ ที่ฉันอาจมี! - person Mr DC; 23.12.2015