CSS Animation

CSS Animation

Maaaring gumawa ng animation ng HTML element ang CSS nang hindi gamit ang JavaScript o Flash!

CSS

Sa kabanata na ito, matututunan mo ang mga sumusunod na attribute:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Browser support for animation

Ang mga numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa katangian.

Attribute Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Ano ang CSS animation?

Ang animation ay nagbibigay ng kapasidad sa elemento para maagaw mula sa isang estilo hanggang sa ibang estilo.

Maaari kang magbabago ng anumang bilang ng CSS attribute.

Upang gamitin ang CSS animation, dapat mo muna magbigay ng ilang mga keyframe para sa animation.

Ang mga keyframe ay naglalaman ng estilo ng elemento sa tiyak na oras.

@keyframes rule

Kung ikaw ay @keyframes Sa alituntunin, naitakda ang CSS style, ang animation ay magiging maliwanag mula sa kasalukuyang estilo hanggang sa bagong estilo sa tiyak na oras.

Upang maging epektibo ang animation, dapat itong itatali sa anumang elemento.

Ang halimbawa sa ibaba ay magtatali ang 'example' animation sa <div> element. Ang animation ay magpapatuloy ng 4 segundo, habang magbabago ng kulay ng background ng <div> element mula 'red' hanggang 'yellow':

Halimbawa

/* Ang kodigo ng animasyon */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Iapply ang animation effect sa elemento na ito */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Subukan nang sarili

Babala:animation-duration Attribute na tinataya ang anumang oras na kailangan upang makumpleto ang animation. Kung walang itinakda: animation-duration Kung walang itinakda ang attribute, hindi magaganap ang animation dahil ang default na halaga ay 0s (0 second).

Sa halimbawa sa itaas, sa pamamagitan ng paggamit ng keyword na 'from' at 'to' (na nagrerepresenta ng 0% (pasimula) at 100% (kumpleto)), natinataya kung kailan magbabago ang estilo.

Maaari mo ring gamitin ang halaga ng porsiyento. Sa pamamagitan ng paggamit ng porsiyento, maaari kang magdagdag ng anumang bilang ng mga pagbabago ng estilo na kailangan mo.

Ang mga halimbawa sa ibaba ay magbabago ng kulay ng background ng <div> element kapag ang animation ay nakumpleto nang 25%, 50%, at kapag ang animation ay nakumpleto nang 100%:

Halimbawa

/* Ang kodigo ng animasyon */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Ang elemento na gamit ang animasyon */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Subukan nang sarili

Ang mga halimbawa na ito ay magbabago ng kulay ng background at posisyon ng <div> elemento kapag ang animasyon ay natapos nang 25%, 50% at 100%:

Halimbawa

/* Ang kodigo ng animasyon */
@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;}
}
/* Ang elemento na gamit ang animasyon */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Subukan nang sarili

Pagkaantala ng animasyon

animation-delay Ang attribute ay nagsasabing anong antas ng pagkaantala bago magsisimula ang animasyon.

Ang mga halimbawa na ito ay may 2 segundo ng pagkaantala bago magsisimula ang animasyon:

Halimbawa

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Subukan nang sarili

Ang negatibong halaga ay pinapayagan din. Kapag ginagamit ang negatibong halaga, ang animasyon ay magsisimula na paglalaro tulad ng na-play na ito N segundo.

Sa mga halimbawa na ito, ang animasyon ay magsisimula na paglalaro, kapag ito ay nagpatuloy na 2 segundo:

Halimbawa

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Subukan nang sarili

I-set ang bilang ng beses na dapat pataasin ang animasyon

animation-iteration-count Ang attribute ay nagsasabi kung magpapatuloy ang animasyon kung ilang beses.

Ang mga halimbawa na ito ay magpapatuloy ang animasyon ng 3 beses bago ito itigil:

Halimbawa

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Subukan nang sarili

Ang mga halimbawa na ito ay gumagamit ng halaga "infinite" upang palaging magpapatuloy ang animasyon:

Halimbawa

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Subukan nang sarili

Magpataasin ng pagsasalungat o alternatibo ang animasyon

animation-direction Ang attribute ay nagsasabi kung magpataasin ang animasyon sa harap, sa likod o sa pagsasalungat:

animation-direction Ang attribute na ito ay maaaring tanggapin ang mga sumusunod na halaga:

  • normal - Ang animasyon ay magpataasin nang normal (sa harap). Ang default na halaga
  • reverse - Ang animasyon ay magpataasin sa tapat na direksyon (sa likod)
  • alternate - Ang animasyon ay magpataasin muna sa harap, pagkatapos ay sa likod
  • alternate-reverse - Ang animasyon ay magpataasin muna sa likod, pagkatapos ay sa harap

Ang halimbawa na ito ay magpataasin ang animasyon sa tapat na direksyon (sa likod):

Halimbawa

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Subukan nang sarili

Ang mga halimbawa na ito ay gumagamit ng halaga "alternate" upang pataasin ang animasyon muna sa harap, pagkatapos ay sa likod:

Halimbawa

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Subukan nang sarili

Ang mga halimbawa na ito ay gumagamit ng halaga "alternate-reverse" upang pataasin ang animasyon muna sa likod, pagkatapos ay sa harap:

Halimbawa

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Subukan nang sarili

Tukuyin ang kurva ng bilis ng animasyon

animation-timing-function Ang attribute na ito ay nagpapatawag sa kurva ng bilis ng animasyon.

animation-timing-function Ang attribute na ito ay maaaring tanggapin ang mga sumusunod na halaga:

  • ease - Tukuyin ang animasyon na magsimula ng mas mabagal, pagkatapos ay mabilis, at pagkatapos ay mabagal muli (default)
  • linear - Tukuyin ang animasyon na may parehong bilis mula sa simula hanggang sa katapusan
  • ease-in - Tukuyin ang animasyon na magsimula ng mas mabagal
  • ease-out - Tukuyin ang animasyon na magwakas ng mas mabagal
  • ease-in-out - Tukuyin ang animasyon na magsimula at magwakas ng mas mabagal
  • cubic-bezier(n,n,n,n) - Magsimula ng iyong sariling halaga sa tatlong Bezier function

Ang mga halimbawa na ito ay nagpapakita ng iba't ibang kurva ng bilis na maaaring gamitin:

Halimbawa

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Subukan nang sarili

Tukuyin ang modong pagpunanin ng animasyon

Ang CSS na animasyon ay hindi makakaapekto sa elemento bago ang unang keyframe ay nagpapatugtug o pagkatapos ng huling keyframe ay nagpapatugtug.animation-fill-mode ang attribute na ito ay magpapalitan sa ganitong pagbabahay.

Sa panahon na walang pagpapatugtug ng animasyon (bago, pagkatapos, o parehong sa parehong panahon ng pagtatapos),animation-fill-mode Ang attribute na ito ay nagpapatawag sa estilo ng target na elemento.

Ang animation-fill-mode na attribute ay maaaring tanggapin ang mga sumusunod na halaga:

  • none - Ang default na halaga. Ang animasyon ay hindi nagpapakilala ng anumang estilo sa elemento bago o pagkatapos ng pagpapatupad.
  • forwards - Ang elemento ay magpapatuloy sa estilo na itinakda ng huling keyframe (depende sa animation-direction at animation-iteration-count).
  • backwards - Ang elemento ay magiging may estilo na itinakda ng unang keyframe (depende sa animation-direction) at ay magpapatuloy sa halaga sa panahon ng pagkaantala ng animasyon.
  • both - Ang animasyon ay sumusunod sa mga alituntunin ng pumunta at bumalik, kaya't ang mga katangian ng animasyon ay pinapalaganap sa dalawang direksyon.

Ang mga halimbawa na ito ay nagpapahintulot sa <div> na humawak ng estilo na mula sa huling keyframe sa katapusan ng animasyon:

Halimbawa

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Subukan nang sarili

Ang sumusunod na halimbawa ay gumagamit ng unang frame ng keyframe ng <div> elemento bago magsimula ang animasyon (sa panahon ng pagkaantala ng animasyon):

Halimbawa

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Subukan nang sarili

Ang sumusunod na halimbawa ay gumagamit ng unang frame ng keyframe ng <div> elemento bago magsimula ang animasyon, at iniiwan ang huling frame ng keyframe pagkatapos magtapos ang animasyon:

Halimbawa

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Subukan nang sarili

Animation Short-hand Attribute

Ang sumusunod na halimbawa ay gumagamit ng anim na properties ng animasyon:

Halimbawa

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Subukan nang sarili

Gamit ang maikling animation Ang attribute ay maaari ring maisagawa ang parehong epekto ng animasyon na sa nakaraang halimbawa:

Halimbawa

div {
  animation: example 5s linear 2s infinite alternate;
}

Subukan nang sarili

CSS Animation Properties

Ang sumusunod na talahanayan ay naglalarawan ng mga rule ng @keyframes at lahat ng CSS properties ng animasyon:

Attribute Paglalarawan
@keyframes Tinutukoy ang mode ng animasyon.
animation I-set ang maikling pangalang property ng lahat ng property ng animasyon.
animation-delay Tinutukoy ang pagkaantala ng pagsisimula ng animasyon.
animation-direction Tinutukoy kung ang animasyon ay magpapatuloy pabalik, magpapatuloy pababa, o mag-iba-iba ang paglalarawan.
animation-duration Tinutukoy ang oras na dapat gumugol ng isang cycle ng animasyon na natapos.
animation-fill-mode Tinutukoy ang estilo ng elemento kapag hindi naglalarawan ang animasyon (sa simula, sa katapusan, o parehong parehong).
animation-iteration-count Tinutukoy ang bilang ng paglalarawan ng animasyon na dapat papalabas.
animation-name Tinutukoy ang pangalan ng @keyframes ng animasyon.
animation-play-state 规定动画是运行还是暂停。
animation-timing-function 规定动画的速度曲线。