Keyframes: Sukurkite Sudėtingos Animacijas

Išmokite kontroliuoti kiekvieną animacijos kadrą. Nuo paprastų judėjimų iki labai sudėtingų efektų — viskas čia.

12 min skaitymo Vidutinis lygis Birželis 2026

Dizainerė braižo animacijos storyboard savo nešiojamajame kompiuteryje, kuriame rodomi keyframe kadrai ir animacijos linija

Autorius

Animix Studio Redakcinis Komandas

Redakcinis Komandas

Parašyta Animix Studio redakcinio komando, kuris dėmesį skiria praktiškai naudingoms ir lengvai suprantamoms gidams apie CSS animacijas.

Kas yra Keyframes?

Keyframes yra CSS animacijos pagrindas. Jie nurodo, kaip elementas turėtų atrodyti tam tikrame animacijos procese. Nuo 0% (pradžia) iki 100% (pabaiga) — jūs apibrėžiate kiekvieną žingsnį.

Skirtingai nuo transition savybės, kuri veikia tik tarp dviejų būsenų, keyframes leidžia jums kurti sudėtingas, daugiažingsnės animacijas. Galite turėti 5, 10 ar net 50 tarpinių žingsnių. Tai yra skirtumas tarp paprastos nuosaikios animacijos ir tikrai imponuojančio vizualinio efekto.

Šiame vadove sužinosite, kaip parašyti keyframes, kaip jas pritaikyti, ir kaip sukurti animacijas, kurios tikrai atkreips dėmesį. Ne tik teorija — tai praktiniai pavyzdžiai, kuriuos galite naudoti dabar.

CSS keyframes diagrama rodanti animacijos progresą nuo 0% iki 100% su skirtingomis savybėmis kiekviename žingsnyje

Kompiuterio ekrane rodoma CSS kodo sintaksė su @keyframes taisykle ir animacijos savybėmis

Kaip Rašyti Keyframes

Pradėkime nuo pagrindinio syntakso. @keyframes tai CSS at-rule, kuris apibrėžia animacijos žingsniai. Jūs pradedate su @keyframes pavadinimas, tada sulankstote laužtiniais skliausteliais ir apibrėžiate procentines reikšmes.

Paprastiausia forma: 0% (pradžia) ir 100% (pabaiga). Bet tai tik pradžia. Tikroji galia yra tarpiniuose žingsniuose — 25%, 50%, 75%. Kiekviename procente jūs galite nurodyti skirtingus savybės reikšmes. Spalvos pokyčius, padėties pokyčius, skalę, rotaciją — bet ką, ką galima animuoti.

Jei jūs norite elemento, kuris pradeda pilka spalva, virsta mėlyna 50%, tada grįžta pilka — tai visiškai įmanoma su keyframes. Tai suteikia jums kontrolę, kurią jūs niekad neturėjote su paprastais transition efektais.

Praktinis Pavyzdys: Pulsuojantis Mygtukas

Norėtumėte sukurti mygtuko efektą, kuris šviesėja ir tamšėja kartojimais? Tai visiškai paprasta. Jūs apibrėžiate keyframes, kuri keičia opacity (skaidrumą) nuo 1 (pilnai matomas) iki 0.5 (pusiau matomas) ir atgal. Tada jūs nurodote animation savybę su 2 sekundžių trukme ir infinite kartojimo. Rezultatas — mygtuko efektas, kuris traukia akis, bet nėra pagreitintas.

Sudėtingesnės Animacijos: Keletas Savybių

Jei norite, kad elemento animacija tikrai išsiskirtų, jūs turėtumėte animuoti kelias savybes vienu metu. Nuo padėties keitimo (transform: translateX) iki spalvos keitimo (color), skalės keitimo (scale), ir rotacijos (rotate). Kai visos šios savybės keičiasi tuo pačiu metu, efektas yra daug dramatiškas.

Pavyzdžiui, elemento, kuris pasikeitė iš dešinės, pasikeitė spalvą iš pilkos į ryškią žalią, ir pasikeitė skalę iš 1 iki 1.2, — tai sukuria imponuojantį priešakinės dalies efektą. Žiūrovai jausmingai pastebi pokyčius, ne tik dėl to, kad jie kinta, bet dėl to, kad jie vyksta tuo pačiu metu.

Animacijos simuliacija keturiais kadrais rodanti elemento transformaciją nuo maža pilkos į didelę žalią per kelis tarpinės stadijas

Greitis ir Timingai

Animation duration (trukmė) ir animation-timing-function (greitės funkcija) yra labai svarbios. 0.5 sekundės animacija jaučiasi greita ir energinga. 2 sekundės animacija jaučiasi ramesnė, labiau elegantiškai. Jūs turėtumėte pasirinkti trukmę, kuri atitinka jūsų elemento paskirtį.

Greita (0.3s)

Mygtuko suaktyvinimai, hover efektai. Greitai ir smailiai.

Vidutinė (1-1.5s)

Standartinės animacijos. Dauguma animacijų čia yra.

Lėta (2-3s+)

Elegantinės, smooth animacijos. Pritraukia akies tyla.

Svarbi Pastaba

Šis vadovas yra skirtas edukaciniams tikslams ir suteikia bendrą informaciją apie CSS keyframes naudojimą. Animacijos efektyvumas ir tinkamumo priklauso nuo jūsų konkretaus projekto reikalavimų, naršyklės palaikymo ir vartotojų įrenginių. Visada testuokite animacijas skirtingose naršyklėse ir įrenginiuose. Atkreipkite dėmesį į našumą — per daug animacijų gali sulėtinti jūsų svetainę.

Kur Toliau?

Jūs dabar žinote, kaip kurti keyframes animacijas. Kitas žingsnis yra eksperimentavimas. Imkite paprastą elementą, apibrėžkite keyframes, ir žiūrėkite, kas atsitinka. Pabandykite skirtingas timing funkcijas (ease-in, ease-out, linear). Pabandykite skirtingas trukmes. Pabandykite kombinuoti kelias savybes.

Animacijos yra menas ir mokslas. Techniniai aspektai yra tik pusė. Kita pusė yra intuicija — suprasti, kokios animacijos jaučiasi gerai, kokios atrodo gražios. Tik praktika jus to išmokys. Pradėkite dabar.

Grįžti į Kategoriją