The My Project

Beranda
CSS

CSS | BAB 8 Animasi dan Transisi

 


Properti Transisi CSS
Definisi

Transisi CSS adalah teknik untuk membuat perubahan visual pada elemen HTML secara halus dan terkontrol selama periode waktu tertentu. Transisi memungkinkan perubahan properti CSS, seperti warna, latar belakang, dan posisi, terjadi secara bertahap, bukan secara tiba-tiba.

Fungsi

Transisi CSS memiliki beberapa fungsi, antara lain:

  • Meningkatkan interaktivitas : Transisi dapat membuat interaksi pengguna dengan website lebih menarik dan responsif. Contohnya, saat pengguna mengarahkan kursor ke tombol, tombol dapat berubah warna secara halus.
  • Meningkatkan estetika : Transisi dapat menambahkan efek visual yang menarik pada website dan membuatnya lebih estetis. Contohnya, saat pengguna menggulir halaman, gambar dapat muncul secara bertahap.
  • Memperjelas perubahan : Transisi dapat membantu pengguna memahami perubahan yang terjadi pada website. Contohnya, saat pengguna mengubah pilihan pada formulir, elemen yang dipilih dapat berubah warna secara halus.
Cara Penggunaan

Transisi CSS dapat digunakan dengan menggunakan properti transition pada elemen HTML. Properti transition memiliki beberapa sub-properti, antara lain:

Properti Wajib:

  • transition-property : Menentukan properti CSS yang ingin ditransisikan.
  • transition-duration : Menentukan lama waktu transisi berlangsung.

Properti Opsional:

  • transition-timing-function : Menentukan kurva animasi transisi.
  • transition-delay : Menentukan waktu tunda sebelum transisi dimulai.
Contoh 

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Transition</title>
    <style>
      /* CSS untuk elemen yang akan diberi efek transition */
      .box {
        width: 200px;
        height: 200px;
        background-color: dodgerblue;
        transition: width 0.5s, height 0.5s, background-color 0.5s; /* properti yang akan diberi efek transition dan durasinya */
      }

      /* CSS untuk mengubah properti saat hover */
      .box:hover {
        width: 300px;
        height: 300px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <!-- Elemen yang akan diberi efek transition -->
    <div class="box"></div>
  </body>
</html>

CSS Transition

Penjelasan singkat mengenai script di atas:

  1. Kita memiliki sebuah 'div' dengan claas 'box', yang akan diberi efek transition saat propertinya berubah.
  2. Di dalam CSS, kita mendefinisikan efek transition pada '.box' dengan menggunakan properti 'transition'. Properti ini memungkinkan kita untuk menentukan properti yang akan memiliki efek transition dan durasinya. Dalam contoh di atas, kita memberi efek transition pada 'width', 'height', dan 'background-color' dengan durasi 0.5 detik.
  3. Ketika mouse diarahkan ke atas elemen '.box', properti 'width', 'height', dan 'background-color' akan berubah, menghasilkan efek transition karena kita telah mendefinisikan properti tersebut dalam aturan '.box:hover'.

Dengan demikian, saat kita mengarahkan mouse ke atas .box, kita akan melihat perubahan ukuran dan warna latar belakang dengan efek transisi yang mulus.

Properti Animasi CSS
Definisi

Animasi CSS adalah fitur CSS yang memungkinkan Anda untuk membuat perubahan gaya pada elemen HTML secara berurutan, menghasilkan efek animasi yang dinamis dan menarik. Animasi ini dapat diterapkan pada berbagai elemen, seperti teks, gambar, div, dan lainnya, untuk meningkatkan interaksi dan estetika website.

Fungsi
  • Meningkatkan Interaksi Pengguna : Animasi dapat menarik perhatian pengguna dan membuat website lebih interaktif. Contohnya, animasi tombol saat diklik atau animasi loading bar.
  • Menyajikan Informasi : Animasi dapat membantu pengguna memahami informasi dengan lebih mudah. Contohnya, animasi grafik atau diagram yang menunjukkan tren data.
  • Meningkatkan Estetika : Animasi dapat membuat website lebih menarik dan profesional. Contohnya, animasi banner website atau animasi background.
Cara Penggunaan

1. Mendefinisikan Keyframes:

  1. Gunakan aturan @keyframes untuk mendefinisikan tahapan animasi.
  2. Di dalam aturan @keyframes, tentukan nama animasi dan keyframes (titik-titik perubahan) dengan persentase.
  3. Pada setiap keyframe, tentukan gaya elemen yang ingin diubah, seperti posisi, warna, atau opacity.

2. Menerapkan Animasi pada Elemen:

  1. Gunakan properti animation-name
    Properti ini digunakan untuk menghubungkan elemen dengan aturan @keyframes.
  2. Atur properti animation-duration
    Properti ini menentukan durasi animasi dalam detik atau milidetik.
  3. Properti lain ( Opsional)
    • animation-timing-function : Menentukan kurva timing animasi.
    • animation-iteration-count : Menentukan berapa kali animasi akan diulang.
    • animation-direction : Menentukan arah animasi.
    • animation-fill-mode : Menentukan bagaimana elemen akan ditampilkan sebelum dan setelah animasi.
    • animation-delay : Menentukan penundaan sebelum animasi dimulai.
Contoh 

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation-name: example;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }

      @keyframes example {
        0% {
          background-color: red;
          left: 0px;
          top: 0px;
        }
        25% {
          background-color: yellow;
          left: 200px;
          top: 0px;
        }
        50% {
          background-color: blue;
          left: 200px;
          top: 200px;
        }
        75% {
          background-color: green;
          left: 0px;
          top: 200px;
        }
        100% {
          background-color: red;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <p>CSS Animation</p>

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

CSS Animation










Pada contoh yang diberikan, kita menggunakan CSS Animation untuk menganimasikan sebuah elemen `<div>`.

Berikut adalah penjelasan penggunaan animasi CSS dalam contoh tersebut:

  1. Mendefinisikan Keyframes (`@keyframes example`) :
    • Dalam aturan `@keyframes`, kita mendefinisikan animasi dengan nama "example".
    • Setiap keyframe didefinisikan dengan persentase, mulai dari 0% hingga 100%.
    • Pada setiap keyframe, kita menentukan perubahan gaya elemen seperti warna latar belakang (`background-color`) dan posisi (`left` dan `top`).
  2. Menerapkan Animasi pada Elemen (`div`) :
    • Elemen `<div>` propeseperti `width`, `height`, dan `background-color`.
    • Properti `position : relative;` digunakan agar animasi berdasarkaporelatif terhadap posisi awal elemen.
    • Properti `animation-name : example;` menghubungkan elemen dengan aturan `@keyframes example`, sehingga mengaplikasikan animasi yang telah didefinisikan.
    • Properti `animation-duration : 5s;` menetapkan durasi animasi selama 5 detik.
    • Properti `animation-timing-function : linear;` menetapkan kurva timing animasi menjadi linear.
    • Properti `animation-delay : 2s;` menunda animasi selama 2 detik sebelum dimulai.
    • Properti `animation-iteration-count : infinite;` mengatur agar animasi diulang secara tak terbatas.
    • Properti `animation-direction : alternate;` mengatur arah animasi agar berubah secara bergantian antara maju dan mundur.

Dengan pengaturan tersebut, elemen `<div>` akan mengalami animasi yang telah didefinisikan dengan perubahan warna latar belakang dan perpindahan posisi sesuai dengan keyframes yang telah ditetapkan. Animasi ini akan berlangsung selama 5 detik, dengan penundaan selama 2 detik sebelum animasi dimulai, dan akan berulang secara terus-menerus.