WorksheetsTailwindcss Animaction Pert-8
Total questions: 20
Worksheet time: 10mins
Apa itu TailwindCSS?
TailwindCSS adalah framework CSS utility-first untuk membangun desain kustom.
Sebuah perangkat lunak desain grafis untuk membuat logo.
Sebuah pustaka untuk mengelola status JavaScript.
Sebuah framework untuk membangun aplikasi mobile.
Apa yang dilakukan animasi dalam desain web?
Animasi meningkatkan keterlibatan dan interaksi pengguna dalam desain web.
Animasi tidak memiliki dampak pada pengalaman pengguna.
Animasi hanya digunakan untuk tujuan dekoratif.
Animasi memperlambat waktu pemuatan situs web.
Bagaimana cara menerapkan animasi sederhana di TailwindCSS?
Gunakan keyframes CSS untuk animasi.
Terapkan animasi JavaScript sebagai gantinya.
Manfaatkan kelas animasi Bootstrap.
Gunakan utilitas transisi TailwindCSS seperti `transition`, `duration-{time}`, dan `ease-{type}` untuk menerapkan animasi.
Kelas apa yang akan Anda gunakan untuk efek fade-in?
fade-in
slide-in
zoom-in
fade-out
Bisakah Anda menyebutkan kelas TailwindCSS untuk animasi melompat?
animate-zoom
animate-bounce
animate-slide
animate-fade
Apa tujuan dari kelas 'duration' dalam animasi?
Untuk mendefinisikan lama waktu animasi berjalan.
Untuk menentukan titik awal animasi.
Untuk mengontrol kecepatan pemutaran animasi.
Untuk menentukan warna animasi.
Bagaimana cara membuat elemen meluncur masuk menggunakan TailwindCSS?
Gunakan kelas TailwindCSS seperti 'transition-transform transform translate-x-full' untuk keadaan awal dan hapus 'translate-x-full' saat pemicu untuk meluncur masuk.
Terapkan animasi 'slide-in' dari CSS secara langsung.
Atur 'opacity-0' dan 'translate-y-0' untuk efek meluncur.
Gunakan kelas 'fade-in' untuk membuatnya meluncur masuk.
Apa yang dilakukan kelas 'ease-in' dalam animasi?
Kelas 'ease-in' menciptakan kecepatan konstan sepanjang animasi.
Kelas 'ease-in' menyebabkan animasi berbalik arah secara tiba-tiba.
Kelas 'ease-in' membuat animasi mulai perlahan dan kemudian mempercepat.
Kelas 'ease-in' membuat animasi mulai cepat dan kemudian melambat.
Bagaimana cara membuat animasi berputar di TailwindCSS?
Terapkan animasi keyframe CSS daripada TailwindCSS.
Atur rotasi di atribut style HTML secara langsung.
Gunakan kelas 'animate-fade' di TailwindCSS.
Gunakan kelas 'animate-spin' di TailwindCSS.
Apa fungsi kelas 'animate-spin'?
Ini mengubah warna elemen.
Ini menambahkan efek bayangan pada elemen.
Ini membuat elemen melompat naik dan turun.
Ini menerapkan animasi berputar terus menerus pada elemen.
Apa yang dimaksud dengan kelas 'transition' dalam TailwindCSS?
Kelas 'transition' mengatur ukuran elemen secara otomatis.
Kelas 'transition' digunakan untuk mengatur efek transisi pada elemen.
Kelas 'transition' tidak memiliki efek pada elemen.
Kelas 'transition' hanya berfungsi untuk animasi warna.
Bagaimana cara mengatur animasi untuk elemen yang muncul dan menghilang?
Gunakan kelas 'animate-fade' untuk efek muncul dan menghilang.
Gunakan kombinasi kelas 'opacity' dan 'transition' untuk mengatur efek tersebut.
Gunakan JavaScript untuk mengatur animasi muncul dan menghilang.
Gunakan kelas 'animate-bounce' untuk efek tersebut.
Apa yang dilakukan kelas 'animate-ping' dalam TailwindCSS?
Kelas 'animate-ping' membuat elemen bergetar.
Kelas 'animate-ping' membuat elemen berputar.
Kelas 'animate-ping' membuat elemen berdenyut.
Kelas 'animate-ping' memberikan efek melingkar pada elemen.
Bagaimana cara mengatur animasi untuk elemen yang bergerak ke atas?
Gunakan kelas 'animate-fade' untuk efek tersebut.
Gunakan JavaScript untuk mengatur animasi bergerak ke atas.
Gunakan kombinasi kelas 'translate-y' dan 'transition' untuk mengatur efek tersebut.
Gunakan kelas 'animate-slide-up' untuk efek tersebut.
Bagaimana cara membuat elemen menghilang secara perlahan menggunakan TailwindCSS?
Gunakan kelas 'slide-out' untuk membuatnya menghilang.
Atur 'translate-y-0' dan 'opacity-0' untuk efek menghilang.
Terapkan animasi 'fade-out' dari CSS secara langsung.
Gunakan kelas TailwindCSS seperti 'transition-opacity opacity-100' untuk keadaan awal dan atur 'opacity-0' saat pemicu untuk menghilang.
Apa yang dilakukan kelas 'ease-in-out' dalam animasi?
Kelas 'ease-in-out' membuat animasi mulai perlahan, mempercepat di tengah, dan melambat di akhir.
Kelas 'ease-in-out' menciptakan kecepatan konstan sepanjang animasi.
Kelas 'ease-in-out' menyebabkan animasi berbalik arah secara tiba-tiba.
Kelas 'ease-in-out' membuat animasi mulai cepat dan kemudian melambat.
Apa yang dimaksud dengan kelas 'animate-fade' dalam TailwindCSS?
Kelas 'animate-fade' membuat elemen menghilang secara perlahan.
Kelas 'animate-fade' tidak memiliki efek pada elemen.
Kelas 'animate-fade' mengatur warna elemen.
Kelas 'animate-fade' membuat elemen muncul secara perlahan.
Bagaimana cara menggunakan kelas 'animate-bounce' dalam TailwindCSS?
Kelas 'animate-bounce' membuat elemen menghilang.
Kelas 'animate-bounce' membuat elemen berputar.
Kelas 'animate-bounce' tidak memiliki efek pada elemen.
Kelas 'animate-bounce' membuat elemen bergetar secara vertikal.
Apa yang dilakukan kelas 'transition-all' dalam TailwindCSS?
Kelas 'transition-all' menerapkan transisi pada semua properti CSS yang dapat ditransisikan.
Kelas 'transition-all' hanya berfungsi untuk transisi warna.
Kelas 'transition-all' tidak memiliki efek pada elemen.
Kelas 'transition-all' mengatur ukuran elemen secara otomatis.
Bagaimana cara mengatur durasi animasi menggunakan TailwindCSS?
Gunakan JavaScript untuk mengatur durasi animasi.
Atur durasi di atribut style HTML secara langsung.
Gunakan kelas 'duration-{time}' untuk mengatur durasi animasi.
Gunakan kelas 'transition-duration' untuk mengatur durasi animasi.
