menambahkan vendor pada animasi

A. Pendahuluan

                                              Assalamualaikum wr.wb

oke bertemu lagi dengan saya kali ini saya akan mensharing tentang vendor prefix


B. latar belakang

     vendor merupakan  sebutan untuk penambahan beberapa karakter khusus di awal penulisan property, terutama untuk property CSS3 terbaru. Sebagai contoh, untuk property column-count, jika menggunakan vendor prefix ditulis menjadi: -webkit-column-count.

C. Maksud dan tujuan

     ingin tahu cara menambahkan vendor , sebagai contoh buat animasi

D.waktu pelaksanaan

         3jam

E. Pembahasan

    Menambahkan Awalan Vendor

Selama masih menjadi working draft, kita butuh menambahakan properti animation dengan awalan khusus untuk memastikan dukungan terbaik browser. Standard awalan ini adalah:

    Chrome & Safari: -webkit-
    Firefox: -moz-
    Opera: -o-
    Internet Explorer: -ms-

Sebuah properti animation dengan menggunakan awalan akan nampak seperit berikut:
   
.element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}
begitu pula dengan @keyframes
@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }

.Agar mudah terbaca, saya akan melanjutkan tutorial ini dengan tanpa menggunakan awalan, namun versi akhir akan menyertakan awalan khusus untuk semua browser dan saya juga mendorong anda untuk menggunakan awalan pada kode CSS anda.

F. alat dan bahan

    -laptop

    -koneksi internet

    -charger laptop

H. referensi

     https://webdesign.tutsplus.com/id/tutorials/a-beginners-introduction-to-css-animation--cms-21068

I. penutup

    oke sekian dari saya bila ada kesalahan saya minta maaf, semoga bermanfaat

                                         Wassalamualaikum wr.wb

Post a Comment

0 Comments