Pagrindinio kadro animacijos sintaksė CSS-gudrybės

Anonim

Pagrindinė deklaracija ir naudojimas

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Siekiant trumpumo, likusioje šiame puslapyje esančiame kode nenaudojami jokie priešdėliai, tačiau realiame pasaulyje turėtų būti naudojami visi pardavėjo priešdėliai iš viršaus

Keli žingsniai

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Jei animacija turi tas pačias pradžios ir pabaigos savybes, vienas iš būdų tai padaryti yra kableliais atskirti 0% ir 100% reikšmes:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Arba visada galite pasakyti animacijai, kad ji paleistų du kartus (arba bet kokį lyginį skaičių kartų) ir nurodytų kryptį alternate.

Skambinama pagrindinio kadro animacija su atskiromis ypatybėmis

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Animacijos trumpinis

Tiesiog atskirkite visas atskiras vertybes tarpu. Užsakymas neturi reikšmės, išskyrus tuos atvejus, kai naudojama ir trukmė, ir vėlavimas, jie turi būti tokia tvarka. Žemiau pateiktame pavyzdyje 1s = trukmė, 2s = vėlavimas, 3 = iteracijos.

animation: test 1s 2s 3 alternate backwards

Sujunkite transformaciją ir animaciją

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Keli animacijos

Galite atskirti reikšmes kableliais, kad pasirinktuve būtų deklaruojamos kelios animacijos.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Žingsniai ()

Funkcija „steps ()“ tiksliai kontroliuoja, kiek raktinių kadrų bus pateikiama animacijos laikotarpyje. Tarkime, jūs deklaruojate:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Jei animacijoje atliksite veiksmus (10), tai užtikrins, kad per nustatytą laiką įvyktų tik 10 pagrindinių kadrų.

.move ( animation: move 10s steps(10) infinite alternate; )

Matematika ten puikiai sekasi. Kas sekundę, elementas judės 10 taškų į kairę ir 10 taškų į apačią iki animacijos pabaigos, tada vėl amžinai atgal.

Tai gali būti puiku skaičiuoklės animacijai, tokiai kaip ši simurai demonstracija.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
4 * 5 * 10 12 5,1 *

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 4 * 6,0–6,1 *

Daugiau išteklių

  • MDN dokumentai
  • MDN: CSS animacijos naudojimas
  • Ar galiu naudoti - naršyklės palaikymą
  • VIDEO: CSS animacijų įvadas