Animasi CSS tidak dipicu di IE dan Edge

Animasi CSS saya tidak terpicu dengan benar: opasitasnya dianimasikan tetapi terjemahannya tidak.

Lihat: https://jsfiddle.net/bLxb8k3s/

Tampaknya, ini karena IE dan Edge tidak dapat menganimasikan antara translateY dan translate.

Saya telah melakukan tes di mana saya mengganti translate(0, 0) saya dengan translateY(0): https://jsfiddle.net/gy129xyw/1/

Dan itu berhasil.

Tapi saya ingin menjaga keyframe saya apa adanya (dengan translate(0,0)) karena saya sering menggunakannya di halaman lain, dengan animasi yang berbeda.

Apakah menurut Anda saya melewatkan sesuatu, atau memang itu bug IE dan Edge?

Terima kasih!


css css-animations internet-explorer microsoft-edge
person Quentin D    schedule 17.05.2017    source sumber
comment
Sepertinya itu bug. Saya tidak memiliki konfirmasi 100% tetapi bahkan dengan -ms atau -webkit tidak berhasil.   -  person Emonadeo    schedule 17.05.2017
comment
Jadi mengapa tidak mengubah transform: translateY(100%); menjadi transform: translate(0, 100%); ... Maksud saya, Anda tidak dapat menganimasikan properti yang sama dengan 2 bingkai utama yang berbeda   -  person Ason    schedule 17.05.2017
comment
Dan berikut ini contoh yang berfungsi dengan baik di IE/Edge: jsfiddle.net/LGSon/bLxb8k3s/3   -  person Ason    schedule 17.05.2017

Jawaban (1)


arrow_upward
0
arrow_downward

Saya pikir ada masalah dalam menggunakan persentase dalam terjemahan (%,%). Saya mencoba mengubahnya menjadi px tetap dan berhasil. juga jangan lupa tentang awalannya

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