CSS Animation ไม่ถูกทริกเกอร์ใน IE และ Edge

ภาพเคลื่อนไหว CSS ของฉันไม่ได้ทำงานอย่างถูกต้อง: ความทึบเป็นภาพเคลื่อนไหว แต่ไม่ใช่การแปล

ดู: https://jsfiddle.net/bLxb8k3s/

เห็นได้ชัดว่าเป็นเพราะ IE และ Edge ไม่สามารถเคลื่อนไหวระหว่าง translateY และ translate

ฉันได้ทำการทดสอบโดยแทนที่ translate(0, 0) ด้วย translateY(0): https://jsfiddle.net/gy129xyw/1/

และมันก็ได้ผล

แต่ฉันอยากจะเก็บคีย์เฟรมของฉันไว้เหมือนเดิม (ด้วย translate(0,0)) เพราะฉันใช้มันบ่อยในหน้าอื่นๆ โดยมีภาพเคลื่อนไหวที่แตกต่างกัน

คุณคิดว่าฉันพลาดอะไรบางอย่างไปหรือเป็นข้อบกพร่องของ IE และ Edge จริงๆ

ขอบคุณ!


css css-animations internet-explorer microsoft-edge
person Quentin D    schedule 17.05.2017    source แหล่งที่มา
comment
ดูเหมือนว่ามันจะเป็นแมลง ฉันไม่มีการยืนยัน 100% แต่ถึงแม้จะมี -ms หรือ -webkit ก็ใช้งานไม่ได้   -  person Emonadeo    schedule 17.05.2017
comment
แล้วทำไมไม่เปลี่ยน transform: translateY(100%); เป็น transform: translate(0, 100%); ... ฉันหมายถึงอย่างใดอย่างหนึ่ง คุณไม่สามารถทำให้คุณสมบัติเดียวกันเคลื่อนไหวด้วยคีย์เฟรมที่ต่างกัน 2 อันอยู่แล้ว   -  person Ason    schedule 17.05.2017
comment
และนี่คือตัวอย่างที่ทำงานได้ดีใน IE/Edge: jsfiddle.net/LGSon/bLxb8k3s/3< /ก>   -  person Ason    schedule 17.05.2017

คำตอบ (1)


arrow_upward
0
arrow_downward

ฉันคิดว่ามีปัญหาในการใช้เปอร์เซ็นต์ในการแปล (%, %) ฉันพยายามเปลี่ยนเป็น px แบบคงที่และใช้งานได้ อย่าลืมเกี่ยวกับคำนำหน้าด้วย

https://jsfiddle.net/bLxb8k3s/1/

span {
    display: block;
    position: relative;
    transform: translateY(200px);
    -webkit-transform: translateY( 200px );
    -ms-transform: translateY( 200px );
    animation: slideIn .7s .7s both;
}
person Yudi Chang    schedule 17.05.2017