Articles
Pengenalan kepada CSS
Sifat-sifat CSS Berkaitan dengan Animasi

Sifat-sifat CSS Berkaitan dengan Animasi

Artikel ini menerangkan sifat-sifat CSS yang berkaitan dengan animasi.

Anda boleh mempelajari penggunaan dan sintaks untuk sifat-sifat @keyframes, animation, dan transition.

YouTube Video

HTML untuk Pratonton

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

Peraturan @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 semasa animasi. Dalam @keyframes, perubahan gaya dari permulaan hingga akhir animasi ditentukan oleh peratusan masa atau kata kunci (from dan to).

  • Ini adalah contoh animasi di mana elemen meluncur dari kiri ke kanan dan kembali ke kedudukan asalnya.
  • Dalam contoh ini, slide ditulis selepas @keyframes, mentakrifkan animasi bernama slide.
  • 0% adalah permulaan animasi, dengan translateX(0) meletakkan elemen di lokasi asalnya.
  • 50% adalah pertengahan animasi, di mana elemen bergerak 200px ke kanan menggunakan translateX(200px).
  • 100% adalah penghujung animasi, dengan elemen kembali ke kedudukan asalnya.
  • Dalam kelas box-animation-slide, sifat animation digunakan untuk menerapkan animasi slide pada selang masa 3 saat.
 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 boleh mengawal gaya secara terperinci semasa animasi. Dengan menentukan peratusan, anda boleh menerapkan gaya yang berbeza pada masa tertentu.
    • Dalam contoh ini, warna berubah sedikit demi sedikit 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 adalah bersamaan dengan 0% dan to adalah bersamaan dengan 100%. Ini membolehkan anda mendefinisikan animasi yang mudah.

Sintaks Asas 

 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 animasi. Ini dinyatakan dengan menggunakan atribut animation atau atribut animation-name.
  • Peratusan atau Kata Kunci: Gunakan peratusan dari 0% hingga 100%, atau kata kunci from (bersamaan dengan 0%) dan to (bersamaan dengan 100%).

Sifat 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}

Sifat animation digunakan untuk menerapkan animasi kepada elemen. Animasi menentukan bagaimana sekumpulan gaya CSS berubah mengikut masa. Dengan sifat animation, anda boleh mengawal masa, tingkah laku, kelewatan, bilangan ulangan, dan banyak lagi mengenai animasi.

  • Kelas box-animation-ease-in-out menetapkan slide sebagai animation-name, dan menggunakan animasi slide yang ditentukan dalam @keyframes.
    • 3s adalah animation-duration, bermakna setiap kitaran animasi selesai dalam masa 3 saat.
    • ease-in-out adalah animation-timing-function, yang menyebabkan animasi bermula perlahan, mempercepat, dan kemudian perlahan semula di akhir.
    • infinite adalah animation-iteration-count, bermaksud animasi akan berulang tanpa henti.
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 ditentukan dalam @keyframes.
    • 1s selepas ease-in-out adalah animation-delay, menentukan kelewatan sebelum animasi bermula. Animasi akan bermula 1 saat kemudian.
    • 3 selepas 1s adalah animation-iteration-count, bermaksud animasi diulang 3 kali.
    • alternate adalah animation-direction, menetapkan arah pemutaran animasi. alternate menentukan bahawa animasi dimainkan secara berselang-seli.

Komposisi Sifat animation

Sifat animation adalah sifat ringkasan yang menggabungkan beberapa sub-sifat menjadi satu. Berikut adalah sub-sifat utama:.

  • Sifat animation-name: Menetapkan nama animasi yang akan digunakan. Ia mesti sepadan dengan nama animasi yang ditentukan dalam @keyframes.
  • Sifat animation-duration: Menetapkan masa yang diperlukan untuk animasi melengkapkan satu kitaran. Unit masa adalah dalam saat (s) atau milisaat (ms).
  • Sifat animation-timing-function: Menentukan lengkung kelajuan animasi. Nilai seperti ease, linear, ease-in, ease-out, ease-in-out, dan lain-lain digunakan.
    • Menentukan ease menyebabkan animasi bermula perlahan, mempercepat, dan kemudian perlahan semula di akhir.
    • Menentukan linear menyebabkan animasi bergerak pada kelajuan tetap dari mula hingga akhir.
    • Menentukan ease-in memulakan animasi dengan perlahan dan mengakhiri dengan cepat.
    • Menentukan ease-out memulakan animasi dengan cepat dan mengakhiri dengan perlahan.
    • Menentukan ease-in-out memulakan perlahan, bergerak dengan cepat, dan mengakhiri dengan perlahan.
  • Harta animation-delay menetapkan kelewatan sebelum animasi bermula. Unit masa adalah sama ada dalam saat atau milisaat.
  • Harta animation-iteration-count menetapkan jumlah kali animasi harus diulang. Menentukan infinite akan mengulang animasi tanpa had.
  • Harta animation-direction menetapkan arah main semula animasi. Pilihan termasuk normal (arah ke depan), reverse (arah ke belakang), alternate (main secara bergilir-gilir), dan alternate-reverse (main bergilir-gilir bermula ke belakang).
  • Harta animation-fill-mode menetapkan keadaan animasi sebelum ia bermula dan selepas ia berakhir. Anda boleh menentukan mana-mana daripada none, forwards, backwards, atau both.
  • Harta animation-play-state menetapkan sama ada animasi sedang berjalan atau dijeda. Anda boleh menentukan running atau paused.

Ringkasan

Harta animation adalah alat yang berkuasa untuk mengubah gaya elemen secara dinamik. Dengan menggunakan @keyframes, anda boleh menentukan bagaimana gaya berubah dari masa ke masa dan mengawal tingkah laku terperinci animasi dengan setiap sub-harta animation.

Harta 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}

Harta transition digunakan untuk menerapkan kesan animasi pada perubahan gaya CSS. Ia membolehkan perubahan kelihatan lancar semasa perubahan keadaan seperti hover, focus, active, atau apabila gaya diubah secara dinamik oleh JavaScript.

Mari kita lihat contoh kelas transition-box di mana warna latar belakang berubah dengan lancar apabila kursor diarahkan ke butang. - Dalam kelas transition-box, harta transition menerapkan peralihan selama 2 saat untuk perubahan warna latar belakang. Perubahan ditentukan sebagai ease, menjadikannya lancar. - Pseudo-class hover mengubah warna latar belakang daripada lightgray kepada steelblue apabila tetikus diarahkan ke butang. Perubahan ini berlaku dengan lancar selama 2 saat seperti yang ditentukan dalam kelas transition-box.

Adalah mungkin untuk menerapkan transition kepada pelbagai harta secara serentak. - Dalam contoh kelas transition-2-properties, warna latar belakang berubah dalam 5 saat dan lebar berubah dalam 0.5 saat.

Sintaks Asas 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • property menentukan properti CSS mana yang seharusnya diterapkan pada animasi. Menetapkan all akan menerapkan animasi pada semua properti.
  • duration menentukan jangka waktu yang diperlukan untuk menyelesaikan animasi. Nyatakan menggunakan saat (s) atau milisaat (ms).
  • timing-function menentukan perubahan kelajuan animasi. Anda boleh menggunakan pilihan seperti ease, linear, ease-in, ease-out, ease-in-out, dan sebagainya.
  • delay menentukan waktu tunda sebelum animasi dimulai. Nyatakan dalam saat atau milisaat.

Properti terperinci 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 individu seperti berikut.

  • transition-property: Menentukan properti yang diterapkan untuk animasi.
  • transition-duration: Menentukan jangka waktu hingga animasi selesai.
  • transition-timing-function: Menentukan kelajuan perkembangan animasi. Pilihan seperti ease, linear, ease-in, ease-out, ease-in-out dapat digunakan.
  • transition-delay: Menentukan waktu tunda sebelum animasi dimulai.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Sifat CSS Berkaitan dengan Kesan Penapis