CSS @keyframes 规则

Paglilinaw at paggamit

Sa pamamagitan ng @keyframes na patakaran, kayang mong gumawa ng animation.

Ang prinsipyo ng paglikha ng animation ay, pagbabago ng isang set ng CSS style sa ibang set ng style.

Sa prosesong animation, kayang mong baguhin ang set na ito ng CSS style ng maraming beses.

Magbigay ng sukat sa pamamagitan ng porsiyento para sa oras ng pagbabago, o sa pamamagitan ng palatandaan "from" at "to", na katumbas ng 0% at 100%.

0% ay ang simula ng animation, at 100% ang katapusan ng animation.

Payo：Para sa pinakamahusay na suporta ng browser, dapat mong mag-define ng 0% at 100% na selector palagi.

Payo：Ginagamit ang mga katangian ng animation upang kontrolin ang hitsura ng animation, at i-bind ang animation sa selector.

Babala:!important na patakaran ay inaaliw sa mga frame ng key (tingnan ang huling halimbawa sa pahina na ito).

Mangyaring tingnan ang:

Tutorial sa CSS3：CSS3 动画

sample

halimbawa 1

Gawin ang div elemento lumusong papunta ilalim ng halaga ng haba ng oras:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Subukan Nang Higit Pa

Mga Halimbawa 2

Magdagdag ng ilang keyframe selector sa isang animasyon:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

Subukan Nang Higit Pa

Mga Halimbawa 3

Baguhin ang ilang CSS styles sa isang animasyon:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

Subukan Nang Higit Pa

Mga Halimbawa 4

Maraming keyframe selector na may ilang CSS styles:

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

Subukan Nang Higit Pa

Mga Halimbawa 5

Babala:Ang !important na alituntunin ay inaingawal sa mga keyframe:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* Iginawal */
  to   {top: 200px;}
}

Subukan Nang Higit Pa

CSS Grammar

@keyframes animationname {keyframes-selector {css-styles;}}

Halaga ng attribute

Halaga Paglalarawan
animationname Mandatorio. Ibigay ang pangalan ng animasyon.
keyframes-selector

Mandatorio. Ang bahagi ng porzentasyon ng oras ng animasyon.

Lehitim na halaga:

  • 0-100%
  • from (kasama ang 0%)
  • to (kasama ang 100%)
css-styles Mandatorio. Isang o ilang lehitim na CSS style attribute.

Browser Support

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-