Articles
Pengenalan ke CSS
Properti CSS yang Terkait Animasi

Properti CSS yang Terkait Animasi

Artikel ini menjelaskan properti CSS yang terkait dengan animasi.

Anda dapat mempelajari penggunaan dan sintaks dari properti @keyframes, animation, dan transition.

YouTube Video

HTML untuk Pratinjau

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animasi & Transisi

Aturan @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes digunakan dalam animasi CSS untuk menentukan bagaimana gaya berubah selama animasi. Dalam @keyframes, perubahan gaya dari awal hingga akhir animasi ditentukan oleh persentase waktu atau kata kunci (from dan to).

  • Ini adalah contoh animasi di mana sebuah elemen bergeser dari kiri ke kanan dan kembali ke posisi semula.
  • Dalam contoh ini, slide ditulis setelah @keyframes, mendefinisikan sebuah animasi bernama slide.
  • 0% adalah awal dari animasi, dengan translateX(0) memposisikan elemen di lokasi aslinya.
  • 50% adalah pertengahan animasi, di mana elemen bergeser 200px ke kanan menggunakan translateX(200px).
  • 100% adalah akhir dari animasi, di mana elemen kembali ke posisi semula.
  • Dalam kelas box-animation-slide, properti animation digunakan untuk menerapkan animasi slide pada interval 3 detik.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Anda dapat mengontrol gaya secara detail selama animasi berlangsung. Dengan menentukan persentase, Anda dapat menerapkan gaya yang berbeda pada waktu yang diinginkan.
    • Dalam contoh ini, warna berubah secara bertahap dari merah ke biru ke hijau ke kuning dan kembali ke merah.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • Dalam contoh ini, from setara dengan 0% dan to setara dengan 100%. Ini memungkinkan Anda untuk mendefinisikan animasi sederhana.

Sintaks Dasar 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: Nama dari animasi. Ini ditentukan menggunakan properti animation atau properti animation-name.
  • Persentase atau Kata Kunci: Gunakan persentase dari 0% hingga 100%, atau kata kunci from (setara dengan 0%) dan to (setara dengan 100%).

Properti animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

Properti animation digunakan untuk menerapkan animasi pada sebuah elemen. Animasi menentukan bagaimana sekumpulan gaya CSS berubah seiring waktu. Dengan properti animation, Anda dapat mengontrol waktu, perilaku, penundaan, jumlah pengulangan, dan lainnya dari sebuah animasi.

  • Kelas box-animation-ease-in-out menetapkan slide sebagai animation-name, dan menggunakan animasi slide yang didefinisikan dalam @keyframes.
    • 3s adalah animation-duration, yang berarti setiap siklus animasi selesai dalam 3 detik.
    • ease-in-out adalah animation-timing-function, yang membuat animasi dimulai dengan lambat, mempercepat, dan kemudian melambat lagi di akhir.
    • infinite adalah animation-iteration-count, yang berarti animasi akan berulang tanpa batas.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • Kelas box-animation-alternate menetapkan color-change sebagai animation-name, dan menggunakan animasi color-change yang didefinisikan dalam @keyframes.
    • 1s setelah ease-in-out adalah animation-delay, yang menentukan penundaan sebelum animasi dimulai. Animasi akan dimulai 1 detik kemudian.
    • 3 setelah 1s adalah animation-iteration-count, yang berarti animasi diulang 3 kali.
    • alternate adalah animation-direction, yang menentukan arah pemutaran animasi. alternate menentukan bahwa animasi diputar secara bergantian.

Komposisi Properti animation

Properti animation adalah properti ringkasan yang menggabungkan beberapa sub-properti menjadi satu. Berikut adalah sub-properti utama:.

  • Properti animation-name: Menentukan nama animasi yang akan diterapkan. Nama tersebut harus sesuai dengan nama animasi yang didefinisikan dalam @keyframes.
  • Properti animation-duration: Menentukan waktu yang diperlukan untuk menyelesaikan satu siklus animasi. Unit waktu adalah detik (s) atau milidetik (ms).
  • Properti animation-timing-function: Menentukan kurva kecepatan animasi. Nilai-nilai seperti ease, linear, ease-in, ease-out, ease-in-out, dll. digunakan.
    • Menentukan ease membuat animasi dimulai dengan lambat, mempercepat, dan kemudian melambat lagi di akhir.
    • Menentukan linear membuat animasi berjalan dengan kecepatan konstan dari awal hingga akhir.
    • Menentukan ease-in memulai animasi dengan lambat dan mengakhirinya dengan cepat.
    • Menentukan ease-out memulai animasi dengan cepat dan mengakhirinya dengan lambat.
    • Menentukan ease-in-out memulai animasi dengan lambat, berlangsung cepat, dan mengakhirinya dengan lambat.
  • Properti animation-delay menentukan penundaan sebelum animasi dimulai. Satuan waktu adalah detik atau milidetik.
  • Properti animation-iteration-count menentukan jumlah kali animasi harus diulang. Menentukan infinite akan mengulang animasi tanpa batas waktu.
  • Properti animation-direction menentukan arah pemutaran animasi. Opsi termasuk normal (arah maju), reverse (arah mundur), alternate (bermain secara bergantian), dan alternate-reverse (bermain bergantian dimulai dari arah mundur).
  • Properti animation-fill-mode menentukan keadaan animasi sebelum dimulai dan setelah selesai. Anda dapat menentukan salah satu dari none, forwards, backwards, atau both.
  • Properti animation-play-state menentukan apakah animasi sedang berjalan atau dijeda. Anda dapat menentukan running atau paused.

Ringkasan

Properti animation adalah alat yang kuat untuk mengubah gaya elemen secara dinamis. Dengan menggunakan @keyframes, Anda dapat mendefinisikan bagaimana gaya berubah seiring waktu dan mengontrol perilaku animasi secara detail dengan masing-masing sub-properti dari animation.

Properti transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

Properti transition digunakan untuk menerapkan efek animasi pada perubahan gaya CSS. Ini memungkinkan perubahan terlihat halus selama perubahan keadaan seperti hover, focus, active, atau ketika gaya secara dinamis diubah oleh JavaScript.

Mari kita lihat contoh kelas transition-box di mana warna latar belakang berubah dengan halus ketika mouse berada di atas tombol. - Dalam kelas transition-box, properti transition menerapkan transisi selama 2 detik untuk perubahan warna latar belakang. Perubahan ditentukan sebagai ease, membuatnya halus. - Pseudo-kelas hover mengubah warna latar belakang dari lightgray menjadi steelblue ketika mouse berada di atas tombol. Perubahan ini terjadi dengan halus selama 2 detik yang ditentukan dalam kelas transition-box.

Dimungkinkan untuk menerapkan transition pada beberapa properti secara bersamaan. - Dalam contoh kelas transition-2-properties, warna latar belakang berubah dalam 5 detik dan lebar berubah dalam 0,5 detik.

Sintaks Dasar 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • property menentukan properti CSS mana yang akan diterapkan animasi. Menentukan all menerapkan animasi ke semua properti.
  • duration menentukan waktu yang dibutuhkan untuk menyelesaikan animasi. Tentukan menggunakan detik (s) atau milidetik (ms).
  • timing-function menentukan perubahan kecepatan animasi. Anda dapat menggunakan opsi seperti ease, linear, ease-in, ease-out, ease-in-out, dll.
  • delay menentukan waktu tunda sebelum animasi dimulai. Tentukan dalam detik atau milidetik.

Properti mendetail dari transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

transition juga dapat digunakan sebagai properti terpisah seperti berikut.

  • transition-property: Menentukan properti yang diterapkan animasi.
  • transition-duration: Menentukan durasi sampai animasi selesai.
  • transition-timing-function: Menentukan kecepatan perkembangan animasi. Opsi seperti ease, linear, ease-in, ease-out, ease-in-out dapat digunakan.
  • transition-delay: Menentukan waktu tunda sebelum animasi dimulai.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS Terkait Efek FilterProperti CSS yang Terkait dengan Animasi 3D