Smooth CSS Fade di On Page Load Animation

sukma
sukma
3 minute read

Sehari yang lalu, kami membuat CSS memudar dalam animasi tetapi hari ini kita akan membuat efek transisi yang serupa pada Pemuatan Halaman. Ini berfungsi setelah pemuatan halaman.

Kami akan menerapkan animasi CSS div elemen di area konten dan akan berfungsi setelah halaman dimuat sepenuhnya.

Anda menemukan jenis animasi serupa di berbagai template premium. Saat pemuatan halaman selesai, elemen-elemen seperti div di situs web mulai datang dari posisi berbeda (atas, kiri, kanan & bawah) dengan animasi yang bagus dan halus.

Salah satu jenis animasi adalah fad-in dan hari ini kita akan melihat cara berbeda untuk memudar dalam animasi.

Kami telah membangun delapan jenis transisi fade-in CSS yang berbeda pada scroll yang termasuk, fade-in left, fade-in di kanan, fade-in di bawah dan fade-in top, dll.

Anda dapat dengan mudah menerapkan animasi pemuatan halaman pada elemen situs web Anda seperti div, gambar, ikon, dan latar belakang.

Untuk membuat efek fade sederhana, kami memerlukan dua jenis properti CSS.

Yang pertama diubah berlaku untuk Transformasi 2D dan 3D ke elemen web. Yang kedua adalah opacity yang membutuhkan translucence.

Cara Membuat Animasi Pemuatan Halaman CSS Fade-in

Sintaks sederhana fade-in berada di bawah di mana dari nilai opacity adalah 0 dan ke nilai opacity adalah 1.

@keyframes fadeIn {   from {     opacity: 0;   }   to {     opacity: 1;   } }

Markup Dasar

Mari kita mulai dengan markup HTML dan melihat langkah demi langkah cara membuat efek fade-in. Kami hanya memiliki div dengan nama kelas yang berbeda.

Kami telah membagi setiap rangkaian kode ke dalam kelas yang berbeda sehingga Anda dapat dengan mudah memahaminya. Kami memiliki empat kelas yang berbeda seperti box, animate, fade, one

<div class="box animate fadeIn one">     Fadein </div>

Gaya

Pertama-tama, kita akan mendesain kotaknya. Itu adalah sesuatu yang tidak perlu jika Anda menerapkan di situs web Anda. Ini hanya untuk tujuan demo saja.

.box {     background: #2ecc71 none repeat scroll 0 0;     color: white;     float: left;     font-family: "Raleway",sans-serif;     font-size: 14px;     font-weight: 600;     height: 150px;     line-height: 150px;     margin: 1%;     padding: 20px;     text-align: center;     text-transform: uppercase;     width: 28%; }

Selanjutnya, kita perlu memicu kotak, dan ini diperlukan untuk semua jenis efek fade.

.animate {   -webkit-animation-duration: 1s;   animation-duration: 1s;   -webkit-animation-fill-mode: both;   animation-fill-mode: both; }

Sekarang kita perlu mengatur pengatur waktu, dan ini adalah penundaan opsional, dan Anda dapat mengubah nilainya sesuai kebutuhan Anda.

.one { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; }

Akhirnya, Kami perlu menggunakan @keyframes Properti CSS3 untuk menambahkan efek fade. Kami hanya akan menerapkan animasi fadeInUp di sini, tetapi Anda akan menemukan semua tipe di bawah demo dengan kode dan contoh.

Seperti yang saya jelaskan di atas dalam Sintaks, kami memiliki nilai opasitas 0 atau 1. Kami menggunakan translate3D dan atur nilai tengah 100% untuk membuat animasi fade-in up.

@keyframes fadeInUp {   from {     opacity: 0;     -webkit-transform: translate3d(0, 100%, 0);     transform: translate3d(0, 100%, 0);   }   to {     opacity: 1;     -webkit-transform: none;     transform: none;   } } @-webkit-keyframes fadeInUp {   from {     opacity: 0;     -webkit-transform: translate3d(0, 100%, 0);     transform: translate3d(0, 100%, 0);   }   to {     opacity: 1;     -webkit-transform: none;     transform: none;   } } .fadeInUp {   -webkit-animation-name: fadeInUp;   animation-name: fadeInUp; }

Itu dia. Kami telah menambahkan semua kemungkinan kelas animasi CSS di stylesheet dan menentukan markup di index.html. Anda hanya perlu memilih dan menerapkan kelas apa pun yang Anda sukai efeknya.