Cara Membuat Efek FadeIn dengan CSS

Cara Membuat Efek FadeIn dengan CSS - Ada yang tau efek fadeIn ? ya, efek fadeIn merupakan efek pada elemen atau objek yang akan tampil pada halaman browser. Pada jQuery kita bisa memanfaatkan metode fadeIn untuk membuat efek ini. Namun kali ini saya tidak akan bermain dengan jQuery, saya akan coba membuat efek fadeIn dengan CSS. Silahkan simak tutorial bagaimana Cara Membuat Efek FadeIn dengan CSS berikut ini.

Pada kasus yang akan saya buat berikut efek fadeIn akan saya terapkan pada elemen teks, Nah silahkan kalian bisa ketikan kode HTML berikut untuk membuat elemen teks nya.

<body>
    <div class="wrapper">
        <div class="box">

            <div class="title">
                <span class="blok"></span>
                <h1>DUMET School<span></span></h1>
            </div>

            <div class="sub-title">
                <div class="blok"></div>
                <p>Kursus Website</p>
            </div>

        </div>
    </div>
</body>

Langkah selanjutnya, setelah membuat kerangka HTML dan membuat elemen teks nya, barulah kita desain dan membuat efek fade pada teks. Silahkan ketikan sintak CSS untuk membuat efek fadeIn berikut ini.

@import url('https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap');
* {
  margin: 0;
  padding: 0;
}
body, html {
  overflow: hidden;
}
.wrapper {
  width: 100%;
  height: 100vh;
  background: #232323;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .box {
  width: 250px;
  height: 250px;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.wrapper .box .title {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
}
.wrapper .box .title .blok {
  width: 0%;
  height: inherit;
  background: #ffb510;
  position: absolute;
  animation: main-blok 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
  display: flex;
}
.wrapper .box .title h1 {
  font-family: 'Poppins';
  color: #fff;
  font-size: 32px;
  animation: main-fade 2s forwards;
  animation-delay: 1.6s;
  opacity: 0;
  display: flex;
  align-items: baseline;
  position: relative;
}
.wrapper .box .title h1 span {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background: #ffb510;
  animation: dot 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
  animation-delay: 2s;
  margin-left: 5px;
  margin-top: -10px;
  position: absolute;
  bottom: 13px;
  right: -12px;
}
.wrapper .box .sub-title {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  margin-top: -10px;
}
.wrapper .box .sub-title .blok {
  width: 0%;
  height: inherit;
  background: #e91e63;
  position: absolute;
  animation: second-blok 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
  animation-delay: 2s;
  display: flex;
}
.wrapper .box .sub-title p {
  animation: second-fade 2s forwards;
  animation-delay: 3.2s;
  opacity: 0;
  font-weight: 400;
  font-family: 'Lato';
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 5px;
}
@keyframes main-blok {
  0% {width: 0%; left: 0;}
  50% {width: 100%; left: 0;}
  100% {width: 0; left: 100%;}
}
@keyframes second-blok {
  0% {width: 0%; left: 0;}
  50% {width: 100%; left: 0;}
  100% {width: 0; left: 100%;}
}
@keyframes main-fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes dot {
  0% {
    width: 0px;
    height: 0px;
    background: #e9d856;
    border: 0px solid #ddd;
    opacity: 0;
  }
  50% {
    width: 10px;
    height: 10px;
    background: #e9d856;
    opacity: 1;
    bottom: 45px;
  }
  65% {
    width: 7px;
    height: 7px;
    bottom: 0px;
    width: 15px;
  }
  80% {
    width: 10px;
    height: 10px;
    bottom: 20px;
  }
  100% {
    width: 7px;
    height: 7px;
    background: #e9d856;
    border: 0px solid #222;
    bottom: 13px;
  }
}
@keyframes second-fade {
  0% {opacity: 0;}
  100% {opacity: 0.5;}
}

Setelah semua sintak HTML dan CSS, langkah terakhir silahkan simpan filenya kemudia buka pada browser masing - masing dan lihat hasil akhir nya. Selesai

Baiklah cukup sekian tutorial tentang CSS yaitu bagaiamana Cara Membuat Efek FadeIn dengan CSS, semoga tutorial ini bermanfaat dan menambah referensi dalam mendesain dan membuat efek dengan CSS. Selamat mencoba dan sampai jumpa lagi di artikel selanjutnya :)

7 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat