Bagaimana cara menambahkan awalan (mengubah) di dalam awalan (bingkai utama)?

Jika saya menggunakan @keyframes untuk melakukan animasi transformasi, bagaimana cara menata awalan saya?

Jika saya memiliki yang berikut ini:

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

Apakah saya perlu menambahkan semua awalan transformasi saya ke setiap deklarasi keyframe? MISALNYA:

@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);
    }
}

Apakah ini berhasil? Jika ini cara terbaik untuk melakukan ini atau adakah cara singkat/cara yang lebih cepat? Saya membayangkan cara ini akan terlihat besar dan mengerikan dengan sangat cepat bahkan dengan animasi yang agak rumit.


css css-animations cross-browser vendor-prefix
person Mr DC    schedule 23.12.2015    source sumber
comment
Banyak pengembang menggunakan plug-in Javascript atau Pra-prosesor untuk melakukan hal ini. Lihat PrefixFree atau Autoprefixer...ada yang lain.   -  person Paulie_D    schedule 23.12.2015

Jawaban (1)


arrow_upward
2
arrow_downward

Secara umum, awalan berantakan terutama ketika menyangkut animasi dan transformasi CSS. Saya memiliki panduan komprehensif untuk mengelola awalan untuk kedua fitur ini yang dapat Anda temukan di sini.

Apa yang Anda miliki tentu saja berhasil, tetapi tidak diperlukan:

  • Browser selain IE tidak akan mengenali deklarasi -ms-transform, dan versi IE yang mendukung animasi CSS juga mendukung transform tanpa awalan.

    Ini berarti -ms-transform tidak diperlukan sama sekali. Anda harus menghapus semua contohnya. Anda hanya benar-benar memerlukannya di luar animasi CSS di mana Anda ingin transformasi bekerja secara statis di IE9. Lihat tautan di atas untuk detailnya.

  • Animasi dan transformasi baru saja tidak diberi awalan di WebKit. Namun, versi WebKit yang mendukung @keyframes tanpa awalan juga mendukung transformasi tanpa awalan. Anda dapat menghapus deklarasi -webkit-transform dari aturan @keyframes Anda.

  • Saya tidak akan menyentuh deklarasi transform tanpa awalan di kedua aturan. Transformasi tidak diberi awalan sedikit lebih awal dibandingkan animasi, sehingga beberapa versi WebKit yang memerlukan @-webkit-keyframes memang mendukung transformasi tanpa awalan.

Selain itu, aturan tanpa awalan harus berada di urutan terakhir. Hal ini berlaku untuk properti (seperti transform) dan aturan (seperti @keyframes). Inilah CSS Anda dengan optimasi di atas:

@-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
Terima kasih banyak; ini telah menjawab pertanyaan saya dan menjawab pertanyaan tambahan apa pun yang mungkin saya miliki! - person Mr DC; 23.12.2015