Seperti yang kita tahu Css3 transition tidak berfungsi jika pada css hanya bernilai display:none ke display:block atapun visibility:hidden ke visibility:visible.
Seperti pada elemen asli/nyata Elemen palsu pseudo element ini juga bisa diberikan Efek transition dengan menggunakan property visibility:hidden dan tambahan opacity.
Contoh Kode
#elemen::before {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
visibility:hidden;
opacity: 0;
}
/* Saat #elemen di sentuh atau istilahnya hover */
#elemen:hover::before {
visibility:visible;
opacity: 1;
}
Efek
transition tidak akan bekerja bila kodenya hanya visibility:hidden saja, jadi harus ada tambahan kode opacity. Sebenarnya walapun hanya menggunakan kode opacity: 0; ke opacity: 1; bisa, tanpa menggunakan visibility:hidden tapi itu terserah dari anda mau memilih cara yang mana.
