Animasi Fade In dan Fade Out dengan Pure Style CSS Standar

agung wisudhatama August 15, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Animasi Fade In dan Fade Out dengan Pure Style CSS Standar

ANIMASI dengan style CSS diperlukan oleh beberapa pengembang website guna mempercantik halaman websitenya. Keyframe yang digunakan pada bahasa pemrogramannya adalah style Fade In dan Fade Out. Kesan yang timbul dan tenggelam diberlakukan seolah-olah obyek bergerak. Animasi yang dipergunakan dengan CSS sangat menunjang tampilan web untuk lebih atraktif dan terkesan profesional.

Teknik animasi yang sangat populer di era sekarang bahkan di era blogger juga sudah banyak yang menggunakannya. Bila menggunakan efek-efek CSS yang ramah terhadap loading blog, memang bisa dikatakan sungguh mengesankan. Dalam perkembangannya, CSS yang menjadi urat nadi utama keindahan tampilan website menjadi pokok bahasan utama pilar sebuah website supaya menarik. Ringan, handal dan mudah dimodifikasi adalah ciri khas CSS yang saat ini menjadi salah satu bahasa utama pemrograman website.

Baca Juga :

Seperti kita tahu, penulisan CSS (Cascading Style Sheet, red) telah menjadi standar pembuatan dan pemakaian style untuk dokumen terstruktur. CSS sendiri digunakan untuk mempersingkat penulisan tag HTML \ seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.

Penggunaan paling umum dari CSS adalah memformat halaman web yang ditulis dengan HTML maupun XHTML. Meski demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk juga SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C, red).

Dibawah ini adalah beberapa kelebihan CSS :

KELEBIHAN CSS
1. CSS mudah untuk dipelajari dan digunakan
2. CSS memisahkan Desain dan Konten Web/Blog
3. Pengaturan Desain dapat dilakukan efisien
4. Satu css dapat dipakai beberapa kali sehingga dapat menghemat penulisan kode
5. Mempersingkat waktu kerja, baik saat membuat maupun saat modifikasi halaman Web/Blog
6. Ukuran file HTML jadi lebih kecil, karena biasanya CSS disimpan di file terpisah (External Stylesheet, red).

Baca Juga :

Dapat dibilang, bahwa CSS merupakan tonggak kelahiran desain unggulan dari sebuah bahasa pemrograman tanpa mengurangi rasa hormat kepada bahasa pengembang website lain yang telah ada sebelumnya. Demikian riuhnya, CSS menopang sebuah tampilan website. Secara lebih lanjut dikatakan, pemisahan dari bahasa CSS dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

Berikut dibawah ini adalah struktur tampilan CSS Animasi :

<!DOCTYPE html>
<title>Example</title>
<style>
.animation {
  width: 200px;
  padding: 20px;
  text-align: center;
  font: 24px sans-serif;
  color: white;
  background: orange;
  border: 0px dotted red;
  animation: myAnimation 6s linear 1s 3 backwards;
}

@keyframes myAnimation {
  50% {
    border: 60px dashed black;
  } 
}
</style>

<div class="animation">alifacode.com</div>

Rendering dengan browser Mozilla Firefox :

Sekian artikel kali ini semoga bermanfaat dan dapat menambah wawasan baru bagi kalian semua yang sedang mempelajari dan mendalami CSS, dan jika kalian berminat dengan CSS, bisa deh sering-sering mampir ke website ini. Karena kita akan membuka wawasan baru dan pelajaran baru tentang CSS. Siapa tau kalian yang ingin memulai membangun website maupun blog dan digital marketing bisa memajukan bisnis kamu dikemudian hari.

Sampai disini dulu tutorial kali ini, semoga bermanfaat dan berfaedah untuk kalian. Sudah malam dan sekarang saatnya istirahat sejenak. Karena besok pagi kita semua akan memulai aktivitas pagi di tempat kerja. Selalu ingat motivasi hidup kali ini ya, "Fokuslah pada hal-hal yang bisa kamu kontrol, selebihnya dari itu bukanlah urusanmu." Memotivasi supaya kita tetap fokus dalam tujuan hidup kita, bukan fokus pada omongan orang lain yang merendahkan kita dan menghina kita. Tetap semangat. Salam Blogger.

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Animasi Fade In dan Fade Out dengan Pure Style CSS Standar . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.