Cara menggunakan fade-in image 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.

                
                DUMET School
            

Kursus Website

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 :)