Articles
Panimula sa CSS
Mga Katangian ng CSS na Kaugnay sa Animasyon

Mga Katangian ng CSS na Kaugnay sa Animasyon

Ipinaliliwanag ng artikulong ito ang mga katangian ng CSS na kaugnay sa animasyon.

Matututunan mo ang paggamit at syntax ng mga katangiang @keyframes, animation, at transition.

YouTube Video

HTML para sa Preview

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>

Animasyon at Transisyon

Batas na @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}

Ang @keyframes ay ginagamit sa mga CSS animations upang tukuyin kung paano nagbabago ang mga estilo habang nagaganap ang animasyon. Sa @keyframes, ang pagbabago ng estilo mula sa simula hanggang sa dulo ng animasyon ay tinutukoy gamit ang mga porsyento ng oras o mga keyword (from at to).

  • Ito ay isang halimbawa ng animasyon kung saan gumagalaw ang isang elemento mula kaliwa patungong kanan at bumabalik sa orihinal nitong posisyon.
  • Sa halimbawang ito, ang slide ay isinusulat pagkatapos ng @keyframes, na nagpapakilala ng animasyon na tinatawag na slide.
  • Ang 0% ay ang simula ng animasyon, kung saan ang translateX(0) ay naglalagay ng elemento sa orihinal nitong lokasyon.
  • Ang 50% ay nasa gitna ng animasyon, kung saan gumagalaw ang elemento ng 200px sa kanan gamit ang translateX(200px).
  • Ang 100% ay ang pagtatapos ng animasyon, kung saan bumabalik ang elemento sa orihinal nitong posisyon.
  • Sa klase ng box-animation-slide, ang katangiang animation ay ginagamit upang i-apply ang animasyong slide sa pagitan ng 3 segundong agwat.
 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}
  • Maaari mong mahusay na kontrolin ang mga estilo habang nagaganap ang animasyon. Sa pamamagitan ng pagtukoy sa porsyento, maaari mong i-apply ang iba't ibang estilo sa alinmang oras.
    • Sa halimbawang ito, ang kulay ay unting-unting nagbabago mula pula patungong asul, berde, dilaw, at bumabalik sa pula.
 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}
  • Sa halimbawang ito, ang from ay katumbas ng 0% at ang to ay katumbas ng 100%. Pinapayagan ka nitong magtakda ng mga simpleng animasyon.

Pangunahing Syntax 

 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: Ang pangalan ng animasyon. Ito ay tinutukoy gamit ang animation na property o ang animation-name na property.
  • Mga Porsyento o Keyword: Gumamit ng mga porsyento mula 0% hanggang 100%, o ang mga keyword na from (katumbas ng 0%) at to (katumbas ng 100%).

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

Ang animation na katangian ay ginagamit upang magdagdag ng mga animasyon sa isang elemento. Ang mga animasyon ay nagtatakda kung paano nagbabago ang isang hanay ng mga estilo ng CSS sa paglipas ng panahon. Sa pamamagitan ng animation na katangian, maaari mong kontrolin ang oras, kilos, pagkaantala, bilang ng mga pag-uulit, at iba pa ng isang animasyon.

  • Ang klase na box-animation-ease-in-out ay tumutukoy sa slide bilang animation-name, at ginagamit ang slide na animasyon na nakatukoy sa @keyframes.
    • Ang 3s ay ang animation-duration, na nangangahulugang ang bawat siklo ng animasyon ay natatapos sa loob ng 3 segundo.
    • Ang ease-in-out ay ang animation-timing-function, na nagdudulot sa animasyon na magsimula nang mabagal, bumilis, at muling bumagal sa dulo.
    • Ang infinite ay ang animation-iteration-count, na nangangahulugang ang animasyon ay paulit-ulit maglaro nang walang hanggan.
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}
  • Ang klase na box-animation-alternate ay tumutukoy sa color-change bilang animation-name, at ginagamit ang color-change na animasyon na nakatukoy sa @keyframes.
    • Ang 1s pagkatapos ng ease-in-out ay ang animation-delay, na tumutukoy sa pagkaantala bago magsimula ang animasyon. Ang animasyon ay magsisimula 1 segundo pagkaraan.
    • Ang 3 pagkatapos ng 1s ay ang animation-iteration-count, na nangangahulugang inuulit ang animasyon ng 3 beses.
    • Ang alternate ay ang animation-direction, na tumutukoy sa direksyon ng pag-playback ng animasyon. Ang alternate ay tumutukoy na ang animasyon ay maglaro nang salitan.

Komposisyon ng animation na Katangian

Ang animation na katangian ay isang pinaikling katangian na pinagsasama-sama ang ilang mga sub-katangian sa isa. Narito ang mga pangunahing sub-katangian:.

  • Katangiang animation-name: Tinutukoy ang pangalan ng animasyong ilalapat. Dapat itong tumugma sa pangalan ng animasyon na nakatukoy sa @keyframes.
  • Katangiang animation-duration: Itinatakda ang tagal ng oras para matapos ang isang siklo ng animasyon. Ang mga yunit ng oras ay segundo (s) o millisecond (ms).
  • Katangiang animation-timing-function: Nagtatakda ng curve ng bilis ng animasyon. Ginagamit ang mga halaga tulad ng ease, linear, ease-in, ease-out, ease-in-out, at iba pa.
    • Ang pagtatakda ng ease ay nagpapasimula sa animasyon nang mabagal, bumibilis, at muling bumagal sa dulo.
    • Ang pagtatakda ng linear ay nagpapanatili na magprogreso ang animasyon sa pare-parehong bilis mula umpisa hanggang wakas.
    • Ang pagtukoy ng ease-in ay nagpapasimula ng animation nang dahan-dahan at tinatapos ito nang mabilis.
    • Ang pagtukoy ng ease-out ay nagpapasimula ng animation nang mabilis at tinatapos ito nang dahan-dahan.
    • Ang pagtukoy ng ease-in-out ay nagpapasimula nang dahan-dahan, bumibilis, at tinatapos nang dahan-dahan.
  • Ang property na animation-delay ay tumutukoy sa pagkaantala bago magsimula ang animation. Ang yunit ng oras ay maaaring segundo o millisecond.
  • Ang property na animation-iteration-count ay tumutukoy sa dami ng beses na dapat ulitin ang animation. Ang pagtukoy ng infinite ay mag-uulit ng animation nang walang katapusan.
  • Ang property na animation-direction ay tumutukoy sa direksiyon ng playback ng animation. Kasama sa mga opsiyon ang normal (pasulong na direksiyon), reverse (pabalik na direksiyon), alternate (magpalit-palit), at alternate-reverse (magpalit-palit na nagsisimula sa pabalik).
  • Ang property na animation-fill-mode ay tumutukoy sa estado ng animation bago ito magsimula at pagkatapos ito magtapos. Maaari mong tukuyin ang alinman sa none, forwards, backwards, o both.
  • Ang property na animation-play-state ay tumutukoy kung ang animation ay nagpapatakbo o nakapahinto. Maaari mong itukoy kung running o paused.

Buod

Ang property na animation ay isang makapangyarihang tool para dinamikong baguhin ang estilo ng mga elemento. Sa paggamit ng @keyframes, maaari mong tukuyin kung paano nagbabago ang mga estilo sa paglipas ng panahon at kontrolin ang detalyadong asal ng animation gamit ang bawat sub-property ng animation.

Property na 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}

Ang property na transition ay ginagamit upang maglapat ng animation effects sa mga pagbabago sa CSS style. Pinapayagan nitong maging makinis ang mga pagbabago sa panahon ng pagbago ng estado tulad ng hover, focus, active, o kapag ang mga estilo ay dinamikong binago gamit ang JavaScript.

Tingnan natin ang isang halimbawa ng class na transition-box kung saan nagbabago nang maayos ang kulay ng background kapag hinover ang isang button. - Sa class na transition-box, ang property na transition ay naglalapat ng 2-segundong transition sa pagbabago ng kulay ng background. Ang pagbabago ay tinukoy bilang ease, na nagpapaganda ng pagiging makinis nito. - Binabago ng pseudo-class na hover ang kulay ng background mula lightgray patungo sa steelblue kapag hinhover ng mouse ang button. Ang pagbabagong ito ay nangyayari nang maayos sa loob ng 2 segundo na tinukoy sa class na transition-box.

Posibleng maglapat ng transition sa maraming property nang sabay-sabay. - Sa halimbawa ng class na transition-2-properties, nagbabago ang kulay ng background sa loob ng 5 segundo at nagbabago ang lapad sa loob ng 0.5 segundo.

Pangunahing Syntax 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • Tinutukoy ng property kung aling mga CSS properties ang dapat lagyan ng animation. Ang pagtatakda ng all ay maglalapat ng animation sa lahat ng properties.
  • Tinutukoy ng duration ang oras na kailangan para matapos ang animation. Tukuyin gamit ang segundo (s) o millisecond (ms).
  • Tinutukoy ng timing-function ang pagbabago sa bilis ng animation. Maaaring gumamit ng mga opsyon tulad ng ease, linear, ease-in, ease-out, ease-in-out, atbp.
  • Tinutukoy ng delay ang oras ng pagkaantala bago magsimula ang animation. Tukuyin sa segundo o millisecond.

Mga detalyadong properties ng transition 

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

Maaaring gamitin ang transition bilang magkakahiwalay na properties tulad ng sumusunod.

  • transition-property: Tinutukoy ang property kung saan ilalapat ang animation.
  • transition-duration: Tinutukoy ang tagal hanggang matapos ang animation.
  • transition-timing-function: Tinutukoy ang bilis ng progreso ng animation. Maaaring gamitin ang mga opsyon tulad ng ease, linear, ease-in, ease-out, ease-in-out.
  • transition-delay: Tinutukoy ang oras ng pagkaantala bago magsimula ang animation.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Katangian ng CSS na Kaugnay sa Mga Epekto ng FilterMga Katangian ng CSS na Kaugnay sa 3D Animation