CSS Animation

CSS Animation

Ang CSS ay makakapagbigay ng animation effect sa HTML element kung hindi gamit ang JavaScript o Flash!

CSS

Sa kabanata na ito, malalaman mo ang mga sumusunod na property:

  • @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 nagtutulungan sa ganitong property.

Atributo 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 pagkakaroon ng pagbabago ng style ng elemento mula sa isa at papunta sa isa.

Maaari mo ring baguhin ang anumang bilang ng CSS property.

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

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

@keyframes rule

Kung ikaw ay @keyframes Ang mga rule ay nagtutukoy ng CSS style, ang animation ay magpapatuloy ng pagbabago ng style mula sa kasalukuyang style hanggang sa bagong style sa tiyak na oras.

Upang maisapilitan ang animation, dapat itong talin sa anumang elemento.

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

Eksemplo

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

Subukan nang Personal

Babala:animation-duration Ang property na ito ay nagtutukoy ng anong oras ang pagkumpleto ng animation. Kung hindi ito itinakda: animation-duration Kung walang itinakda ang property, hindi magaganap ang animation dahil ang default na halaga ay 0s (0 second).

Sa paggamit ng mga keyword na 'from' at 'to' (na nagrerepresenta ng 0% (simula) at 100% (kumpleto)), natinatag ang kung kailan magbabago ang style.

Maaari mo ring gamitin ang porsyento ng halaga. Sa pamamagitan ng paggamit ng porsyento, maaaring magdagdag ka ng anumang bilang ng style na pagbabago na kailangan mo.

Ang halimbawa na ito ay magbabago ng kulay ng background ng <div> element kapag ang animation ay nakumpleto ng 25%, 50%, at 100%:

Eksemplo

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

Subukan nang Personal

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

Eksemplo

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

Subukan nang Personal

Paghangganan ang animation

animation-delay Ang attribute na ito ay nagtutukoy kung anong oras ang pagtanggol bago magsimula ang animation.

Ang mga halimbawa na ito ay may 2 segundo na paghinto bago magsimula ang animation:

Eksemplo

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

Subukan nang Personal

Ang negatibong halaga ay pinapayagan din. Kung ginagamit ang negatibong halaga, ang animation ay paplayer mula sa punto na ito bilang kung nagsimula na ito ng N segundo.

Sa mga halimbawa na ito, ang animation ay paplayer mula sa punto na ito bilang kung nagsimula na ito ng 2 segundo:

Eksemplo

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

Subukan nang Personal

Itakda kung ilang beses ang animation ay dapat papatakbuhin

animation-iteration-count Ang attribute na ito ay nagtutukoy kung ang animation ay dapat papatakbuhin kung ilang beses.

Ang mga halimbawa na ito ay papatakbuhin ang animation 3 beses bago ito itigil:

Eksemplo

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

Subukan nang Personal

Ang mga halimbawa na ito ay gumagamit ng halaga "infinite" upang mapanatili ang animation sa panghabang buhay:

Eksemplo

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

Subukan nang Personal

Bumalik o alternatibo na patakbuhin ang animation

animation-direction Ang attribute na ito ay nagtutukoy kung ang animation ay dapat paplayer sa harap, sa likod o alternatibo.

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

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

Ang halimbawa na ito ay papatakbuhin ang animation sa tapat na direksyon (sa likod):

Eksemplo

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

Subukan nang Personal

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

Eksemplo

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 Personal

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

Eksemplo

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 Personal

Tukuyin ang kurva ng bilis ng animasyon

animation-timing-function Ang property na ito ay nagbibigay ng kurva ng bilis ng animasyon.

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

  • ease - Tukuyin ang animasyon na mabagal sa simula, nagpapatuloy, at mabagal sa katapusan (default)
  • linear - Tukuyin ang animasyon na may parehong bilis mula simula hanggang katapusan
  • ease-in - Tukuyin ang animasyon na mas mabagal sa simula
  • ease-out - Tukuyin ang animasyon na mas mabagal sa katapusan
  • ease-in-out - Tukuyin ang animasyon na mas mabagal sa simula at katapusan
  • cubic-bezier(n,n,n,n) - Run ang iyong sariling mga halaga sa tatlong bezier function

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

Eksemplo

Subukan nang Personal

Tukuyin ang mode ng pagpunanaw ng animasyon

Ang CSS animation ay hindi makakaimpluwensya sa elemento bago ang unang keyframe ay magpakita o pagkatapos ng huling keyframe ay magpakita.animation-fill-mode ang property na ito ay makakalagay sa ganoong pagbabahay.

Sa panahon na hindi nagpapatugtug ang animasyon (bago, pagkatapos, o parehong sa parehong oras sa pagtatapos),animation-fill-mode Ang property na ito ay nagbibigay ng estilo sa target na elemento.

Ang animation-fill-mode property 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 magpapanatili ang estilo na itinakda sa huling keyframe (depende sa animation-direction at animation-iteration-count).
  • backwards - Ang elemento ay makakuha ng estilo na itinakda sa unang keyframe (depende sa animation-direction), at ay magpapanatili ang halaga nito sa panahon ng paghahanda ng animasyon.
  • both - Ang animasyon ay susunod sa parehong mga alituntunin ng forward at backward, kaya nagpapalawak ng mga katangian ng animasyon sa dalawang direksyon.

Ang mga halimbawa na ito ay nagpapanatili sa <div> elemento ang estilo na natatakda sa huling keyframe kapag ang animasyon ay natapos:

Eksemplo

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

Subukan nang Personal

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

Eksemplo

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

Subukan nang Personal

Ang sumusunod na halimbawa ay gumagamit ng unang pangunahing estilo ng <div> elemento bago ang animasyon ay magsisimula, at iniiwan ang huling pangunahing estilo ng huling pangunahing pasyon sa pagtatapos ng animasyon:

Eksemplo

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

Subukan nang Personal

Mga Maikling Atributo ng Animasyon

Ang sumusunod na halimbawa ay gumagamit ng anim na mga atributo ng animasyon:

Eksemplo

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

Subukan nang Personal

Gamit ang maikling anyo ng animation Ang atributo ay maaari ring maisapilitan ang parehong epekto ng animasyon na sa nakaraang halimbawa:

Eksemplo

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

Subukan nang Personal

CSS Animasyon na Atributo

Ang sumusunod na talahanayan ay naglilista ng mga patakaran ng @keyframes at lahat ng mga CSS animasyon na atributo:

Atributo Inilarawan
@keyframes Tinutukoy ang mode ng animasyon.
animation I-set ang maikling anyo ng lahat ng atributo ng animasyon.
animation-delay Tinutukoy ang pagkaantala ng pagsisimula ng animasyon.
animation-direction Tinutukoy kung ang animasyon ay magpapatuloy pabalik, magpapatuloy pababa, o magpapatuloy pabalik-pababa.
animation-duration Tinutukoy ang oras na kailangang magdulot ng isang pasyon ng animasyon.
animation-fill-mode Tinutukoy ang estilo ng elemento kapag hindi naglalaro ang animasyon (bago nagsisimula, pagkatapos, o parehong parehong).
animation-iteration-count Tinutukoy ang bilang na kailangang pagpalakad ng animasyon.
animation-name Tinutukoy ang pangalan ng @keyframes ng animasyon.
animation-play-state Define whether the animation is running or paused.
animation-timing-function Define the speed curve of the animation.