Animix Studio Redakcinis Komandas
CSS animacijos ir mikrosąveikos dizaino turinys, kurį tikriname praktikoje
Šioje svetainėje rasite tiesmuves CSS animacijų ir mikrosąveikų sąvokos, realistinius pavyzdžius ir praktinius patarimus. Kiekvieną straipsnį peržiūrime, testuojame ir atnaujinome, kad būtų tikslus ir naudingas.
Tiesiog žmonės, kurie mėgsta CSS
Animix Studio redakcinis komandas – tai frontendo kūrėjai ir dizaineriai, kurie domisi CSS animacijomis ir mikrosąveikais. Nenuobodžiai rašome apie tai, ką išbandome realiuose projektuose. Nėra teorinių sąvokų be praktikos – kiekvienas straipsnis turi veikiančius pavyzdžius, kuriuos galite iš karto panaudoti arba pritaikyti.
Kodėl vertėtų pasitikėti mūsų turiniu? Žinoma, ne dėl sertifikatų ar vardų. Dėl to, kad testuojame viską, ką rašome. Skirtingose naršyklėse, skirtingose įrenginiuose, skirtingose situacijose. Reguliariai peržiūrime senuosius straipsnius, nes CSS standartai keičiasi, o naršyklių palaikymas dėl to bręsta. Rašome be peršauktos termininologijos – jei naudojame specialųjį žodį, paaiškiname, ką jis reiškia.
Ši svetainė sukurta Šiauliuose, bet žinoma, internetas be sienų. Jei jūs norite suprasti, kaip CSS animacijos veikia iš tikrųjų, o ne tik žinoti, kad jos egzistuoja – esate tinkamoje vietoje.
Kaip kuriamas turinio
Nuo idėjos iki publikavimo – štai ką darome
Tyrinėjimas ir eksperimentai
Susigeneruojame temą, dažniausiai iš savo tikrų projektų patirties. Išbandome, kaip veikia CSS animacijos skirtingose situacijose. Rašome pastabas, darome screenshot'us, dokumentuojame rezultatus.
Tikrinimas ir testas
Kiekvienas kodas išbandomas Chrome, Firefox, Safari ir Edge naršyklėse. Tikriname dešktope, planšetėje ir mobiliajame telefone. Jei pavyzdys neveikia – jį ištaisome arba paaiškname, kodėl yra problemos.
Rašymas ir peržiūra
Rašome skaidžiai ir paprastai. Peržiūrime tekstą, ieškome neaiškumų, patikriname, ar pavyzdžiai atitinka aprašymą. Skaitome iš pradžios iki galo, tarsi būtume pirmas skaitytojų.
Reguliarūs atnaujinimai
CSS niekada nesibaiga. Naršyklės prideda naujus dalykus, standartai tobulėja. Grįžtame į senuosius straipsnius, atnaujinami, jei reikia. Jei kažkas buvusi tiesa prieš metus, bet dabar yra geresnis būdas – mes tai pakeičiame.
Mūsų temų sritys
CSS animacijos ir perehojimas
Nuo paprastų `transition` efektų iki sudėtingų `@keyframes` animacijų. Rašome apie greičio funkcijas, siekius, pradžios ir pabaigos taškus. Aiškiname, kaip CSS animacijos veikia naršykėje ir kodėl kartais jos „trūkčioja". Praktiški patarimai – kaip pasirinkti tinkamą trukmę, kaip naudoti `transform` vietoje kitų savybių, ir kodėl `will-change` kartais padeda.
Mikrosąveikos ir grįžtamasis ryšys
Maži animaciniai efektai, kurie suteikia grįžtamąjį ryšį vartotojui. Nuo paprastos mygtuko animacijos iki sudėtingos sąveikos sistemos. Rašome apie `:hover`, `:active` ir `:focus` būsenas, kaip naudoti `opacity` ir `scale` dėl geresnės našumo, ir kaip padaryti, kad sąveika jaustųsi natūrali, o ne dirbtina.
Mobilios ir atsargi animacijos
Ne visada žmonės nori matyti animacijas. `prefers-reduced-motion` – svarbi CSS savybė, kurią dažnai ignoruojame. Rašome apie tai, kaip padaryti animacijas prieinamas visiems. Mobilieji įrenginiai neturi to paties galingumo kaip kompiuteriai, todėl diskutuojame apie našumą, baterijos naudojimą ir kaip testuoti animacijas tikrais mobiliaisiais.
Praktiniai pavyzdžiai ir šablonai
Kiekvienas straipsnis turi veikiančius pavyzdžius, kuriuos galite iš karto panaudoti. Nuo mažų fragmentų kodo iki pilnų komponentų. Viskas testuota, viskas dokumentuota. Galite nukopijuoti, pakeisti spalvas ir pavardes – ir jau turite veikiančią sąveiką savo projektui.
Kaip mes užtikrinome, kad turinis yra teisingas
Visi pavyzdžiai veikia
Rašome kodo – testame kodo. Jei pavyzdys nepasirodo straipsnyje, jis buvo testuota iš pradžios iki galo. Nėra teorinio kodo, kuris galbūt veiktų – tik to, kuris tikrai veikia.
Naršyklės suderinamumas
Testuojame moderniose naršyklėse. Jei naudojame naujas CSS savybes, nurodome, kurios naršyklės jas palaiko. Kai to pamatyti negalime, pasiūlome alternatyvą arba fallback sprendimą.
Reguliarūs atnaujinimai
Svetainė nėra statinė. CSS keičiasi, naršyklės prideda naujas savybes. Grįžtame į senuosius straipsnius ir atnaujinami, jei yra nauji, geresni būdai daryti tą patį.
Honestiškai apie problemas
Jei kažkas veikia blogai arba turi ribojimus – mes tai sakome. Nėra tobulų sprendimų. Kai yra kompromisai – jie paaiškinti ir svertai atsižvelgti į kontekstą.
Pradėkite skaitymą dabar
Atrinkti straipsniai, kurie padės suprasti CSS animacijas
Sklandūs perehojimas: Pradėkite čia
Pirmiausia sužinokite apie `transition` savybę. Paprasta, bet galinga. Pavyzdžiai, kuriuos galite iš karto naudoti savo projektuose.
Perskaityti straipsnįKeyframes: Sukurkite sudėtingas animacijas
Padarykite daugiau nei paprasta `transition`. `@keyframes` leidžia sukurti pilnus animacijos sekos. Detali instrukcija nuo pagrindų.
Perskaityti straipsnįMikrosąveikos: Suteikite grįžtamąjį ryšį
Maži animaciniai efektai, kurie daro didelį skirtumą vartotojo patirčiai. Paaiškiniame, kaip jie veikia ir kada jų naudoti.
Perskaityti straipsnįAtsargi animacijos mobilam
Mobilūs įrenginiai yra skirtingi. Sužinokite, kaip optimizuoti animacijas našumui ir baterijos naudojimui, ir kaip paieškoti asmeninio pasirinkimo.
Perskaityti straipsnįJei norite daugiau, yra straipsnių
Mūsų redakcinis komandas rašo reguliariai. Naujų straipsnių nėra kiekvieną dieną – tik tada, kai turime ką sakoti. Apsilankykite kategorijoje ir pamatykit visą sąrašą.