Apa itu Transisi CSS dan Bagaimana Cara Menggunakannya

Diterbitkan: 2022-02-16

Pada artikel sebelumnya, Anda telah mempelajari konsep dasar animasi CSS dan cara menggunakannya. Kita dapat mengatakan bahwa transisi adalah bentuk animasi yang disederhanakan dengan beberapa perbedaan di antara mereka, bentuk pemicu animasi adalah yang paling relevan.

Perbedaan lainnya adalah transisi hanya memiliki dua status (status awal dan akhir), sedangkan Anda dapat menentukan beberapa status untuk elemen animasi dengan aturan @keyframes . Transisi dipicu pada suatu tindakan, misalnya saat mengarahkan kursor ke suatu elemen, tetapi animasi dapat terjadi tanpa tindakan tertentu, misalnya dengan penundaan animasi setelah pemuatan halaman.

Dalam tutorial ini, kita akan mempelajari konsep dasar Transisi CSS dengan contoh praktis. Selain itu, Anda juga akan belajar cara menggunakan sprite gambar dengan CSS.

Ayo mulai!

Langkah 1. - Tata Letak yang Diusulkan

Transisi CSS & Cara Menggunakannya

Kami memiliki 4 kartu yang mempromosikan layanan reguler agen web. Saat melayang di atasnya, masing-masing elemen di dalam kartu akan memiliki transisi yang berbeda untuk mencapai efek yang diinginkan.

Langkah # 2. - HTML

  • Buka editor kode pilihan Anda
  • Buat file HTML bernama index.html
  • Salin dan tempel kode ini:
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
BUKA DI POPUP
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 transisi css 001

Service-card-container memiliki 4 kartu yang berbeda. Setiap kartu terdiri dari ikon, judul, beberapa teks, dan tautan ke informasi terkait di situs. Teks dan tautan akan ditampilkan saat mengarahkan kursor ke kartu, jika tidak, mereka akan disembunyikan.

Langkah #3. - Gaya Dasar CSS

  • Buat file CSS dan beri nama style.css — dalam kode HTML sudah ada tautan ke file ini dan ke Google Font
  • Salin dan tempel gaya ini untuk mengubah gaya tipografi dan warna latar belakang kartu:
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }
BUKA DI POPUP
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 css transisi 002

Langkah #4. - Gaya Tata Letak

Mari gunakan CSS Grid untuk membuat kartu dan mengaturnya secara horizontal.

  • Mengedit kode CSS:
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Wadah kartu layanan adalah kotak horizontal dengan 4 kolom. Setiap kartu telah dinyatakan juga sebagai wadah kotak dengan 2 baris. Perhatikan, bahwa kami telah mendeklarasikan ketinggian tetap untuk setiap kartu.

191125 css transisi 003

Langkah #5. - Sprite Gambar

Menurut W3Schools, sprite gambar adalah kumpulan gambar yang dimasukkan ke dalam satu gambar. Anda menghemat bandwidth karena halaman tidak perlu membuat permintaan server untuk setiap gambar yang harus dimuat. Ini akan meminta gambar sekali, dan kemudian Anda memetakan bagian gambar yang diperlukan dalam kode CSS.

191125 css transisi 004

Gambar memiliki lebar 240px dan tinggi 480px. Masing-masing ikon mencakup area 120x120px. Untuk memetakan masing-masing gambar, kita mulai dari sudut kiri atas gambar dengan koordinat (0px 0px) — mengikuti urutan 'kiri - atas'.

Dengan begitu, gambar di kolom kiri sprite berada di:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Ini adalah gambar yang akan digunakan sebelum melayang.

Gambar di kolom kanan sprite terletak di:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Mengedit kode CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }
BUKA DI POPUP
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Wadah kartu layanan adalah kotak horizontal dengan 4 kolom. Setiap kartu telah dinyatakan juga sebagai wadah kotak dengan 2 baris. Perhatikan, bahwa kami telah mendeklarasikan ketinggian tetap untuk setiap kartu.

191125 css transisi 003

Langkah #5. - Sprite Gambar

Menurut W3Schools, sprite gambar adalah kumpulan gambar yang dimasukkan ke dalam satu gambar. Anda menghemat bandwidth karena halaman tidak perlu membuat permintaan server untuk setiap gambar yang harus dimuat. Ini akan meminta gambar sekali, dan kemudian Anda memetakan bagian gambar yang diperlukan dalam kode CSS.

191125 css transisi 004

Gambar memiliki lebar 240px dan tinggi 480px. Masing-masing ikon mencakup area 120x120px. Untuk memetakan masing-masing gambar, kita mulai dari sudut kiri atas gambar dengan koordinat (0px 0px) — mengikuti urutan 'kiri - atas'.

Dengan begitu, gambar di kolom kiri sprite berada di:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Ini adalah gambar yang akan digunakan sebelum melayang.

Gambar di kolom kanan sprite terletak di:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Mengedit kode CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 css transisi 005

Tidak buruk, kan? Mari tambahkan beberapa sentuhan kosmetik untuk menyelesaikan bagian ini dengan beberapa bantalan.

  • Mengedit kode CSS:
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }
BUKA DI POPUP
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 css transisi 006

Langkah #6. - Transisi CSS

Properti transisi CSS memiliki 4 properti turunan yang berbeda:

  • transisi-properti (properti elemen, yang transisi akan diterapkan)
  • transisi-durasi
  • transisi-waktu-fungsi
  • transisi-tunda

Singkatannya adalah:

transisi: [transisi-properti] [transisi-durasi] [transisi-waktu-fungsi] [transisi-tunda]

  • Mengedit kode CSS:
 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }


Seperti yang Anda perhatikan, dimungkinkan untuk menerapkan beberapa transisi ke properti elemen yang berbeda, dengan memisahkannya dengan koma. Tak satu pun dari transisi ini memiliki penundaan.

Untuk membuat kartu berguling ke atas, Anda menetapkan margin negatif di bagian atas dan menambahkan nilai absolut margin ini ke ketinggian elemen (320px == 20em).

191125 css transisi 008

Sekarang saatnya untuk menargetkan gambar dan membuatnya berubah dengan transisi.

  • Mengedit kode CSS:
 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

Sekali lagi:

  • properti transisi: latar belakang
  • durasi transisi: 0.4s
  • fungsi waktu transisi: akhir langkah

Sisanya hanya pemetaan ke koordinat yang tepat (rinci di atas) pada sprite gambar.

191125 css transisi 009

Terakhir, mari kita targetkan wadah .hidden .

  • Mengedit kode CSS:
 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

Ada dua detail di sini yang perlu diperhatikan:

  • Transisi pada warna teks memiliki transisi-delay 0.2s
  • Properti ketinggian elemen berubah saat melayang tanpa transisi 
191125 css transisi 010

Transisi didukung oleh semua browser utama.

191125 css transisi 011

Saya harap Anda menyukai latihan ini. Terima kasih sudah membaca!

Kode dapat ditemukan di sini.