Hai teman-teman kemarin kan kita sudah membuat animasi Roll In yah, Nah pada kesempatan kali ini kita akan membuat animasi yang lain yaitu animasi Roll Out.  langkah-langkah nya hampir sama dengan yang kemaren yang berbeda hanya dari transform dan opacitynya saja 🙂 buat lebih jelasnya lagi yuk mening ikutin aja di sini , engga bakalan rugi ko.

Yang pertama-tama kita lakukan yaitu membuat script HTMLnya :

html

nah setelah membuat script HTMLnya, sekarang teman-teman buat script CSSnya seperti ini :

css css2

Saya jelaskan kembali property transform berfungsi untuk transformasi element 2D maupun 3D .

sedangkan property opocity berfungsi untuk menampilkan dan menyembunyikan element .

jika sudah coba teman-teman lihat hasilnya di browser , maka akan ada gambar yang tiba-tiba menghilang menggunakan animasi Roll Out .

oke mungkin sekian untuk artikel hari ini , sampai ketemu di artikel berikutnya , selamat mencoba dan semoga berhasil yah 🙂