Kursus IT Dasar CSS 027_Animasi dan Transisi

Animasi

Animasi CSS adalah efek yang dapat digunakan untuk mengubah nilai properti elemen secara bertahap. Animasi dapat diterapkan pada properti CSS apa pun, termasuk lebar, tinggi, warna, latar belakang, border, dll.

Sintaks properti animation adalah sebagai berikut:

• name: Menentukan nama animasi.
• duration: Menentukan durasi animasi.
• timing-function: Menentukan kurva kecepatan animasi.
• delay: Menentukan penundaan animasi.
• iteration-count: Menentukan jumlah pemutaran animasi.
• direction: Menentukan arah pemutaran animasi.
• fill-mode: Menentukan gaya elemen setelah animasi selesai atau saat animasi dijeda atau dihentikan.

Contoh:

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* Menerapkan animasi, durasi 2 detik, loop tak terbatas, transisi linear */
14
  }

1
    <div class="example1"></div>

Efek:

• @keyframes rotate mendefinisikan animasi keyframe bernama rotate, dari keadaan awal (rotasi 0 derajat) ke keadaan akhir (rotasi 360 derajat).
• Elemen .animated-box menerapkan animasi ini, menentukan nama animasi, durasi, jenis loop, dll. melalui properti animation.

Animasi CSS dan transisi CSS keduanya adalah efek yang dapat mengubah nilai properti elemen secara bertahap. Perbedaan utamanya adalah:

• Animasi dapat diputar berulang kali, sedangkan transisi hanya diputar sekali.
• Animasi dapat menentukan arah pemutaran, transisi tidak.
• Animasi dapat menentukan gaya elemen setelah selesai atau saat dijeda/dihentikan, transisi tidak.

Transisi

Transisi CSS adalah efek yang dapat mengubah nilai properti elemen secara bertahap. Transisi dapat diterapkan pada properti CSS apa pun, termasuk lebar, tinggi, warna, latar belakang, border, dll. Efek transisi dapat bervariasi tergantung pada browser dan perangkat, performa dapat bervariasi tergantung pada kompleksitas transisi.

Contoh:

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* Mendefinisikan properti dan waktu transisi */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

Efek: