Untuk sobat,yang sudah bisa menggunakan CSS3,terkadang bila kita menggunakan browser tertentu,animasi itu akan berjalan sempurna,tapi terkadang juga,animasi itu gagal.
kenapa bisa begitu????
banyak pertanyaan yang datang kepada saya
-mas,kq animasinya ga jalan,cuma pindah doank gambarnya?
=nah,itu sebenarnya permasalahan yg umum...
masalahnya cuma 1,yaitu dari browser yang kita pakai.
karena banyak browser versi lama,tidak dapat mendukung CSS3 ini
Contoh:
CSS animasi yang kita pakai adalah kode
#tes{-webkit-transition: all 0.6s ease-out;}
#tes:hover{
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
}
Seperti yang kita tahu,bahwa kode "-webkit-transition: all 0.6s ease-out;" agar efek animasinya terlihat dan kode:
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
kode diatas adalah kode yang sangat penting,untuk menampilkan animasinya...
tetapi,kenapa animasi ini tidak berjalan?seperti yang tadi saya katakan,masalahnya dari browser yang kamu pakai...
menurut saya,browser yang mendukung animasi adalah browser google chrome,safari,dan mozilla firefox 4..pantesan pke mozilla versi lama,animasinya ga keluar =.=a...
mozilla4 saat ini,sudah dapat mendukung css3 animation dan untuk text shadow,gradient,css font,rounded corner,juga sudah dapat didukung...
ini script css untuk menambahkan animasi
-webkit-transition: all 0.6s ease-out; =untuk browser google chrome dan safari
-moz-transition: all 0.6s ease-out; =untuk browser mozilla firefox
-o-transition: all 0.6s ease-out; =untuk browser opera
Segeralah update browser kamu ke versi terbaru agar bisa merasakan kehebatan CSS3
Komentar
Posting Komentar