Mkaguzi wa Uhuishaji

Uhakiki wa Moja kwa Moja

example.com/animated-landing Mkaguzi wa Uhuishaji: WASHA

▶

⏸

0.25x 0.5x 1x 2x 4x

4 zimegunduliwa

Uhuishaji kwenye ukurasa

fadeInUp

.hero-title · @keyframes

0.6s ease-out

kuchelewa: 0s · marudio 1

inafanya kazi
slideIn

.sidebar-nav · @keyframes

0.4s ease

kuchelewa: 0.2s · marudio 1

inafanya kazi
pulse

.notification-badge · @keyframes

2s ease-in-out

kuchelewa: 0s · bila kikomo

imesitishwa
background-color

.cta-button · transition

0.2s ease

sifa ya mpito

active

Mstari wa muda — fadeInUp 0.24s / 0.60s

0.0s 0.15s 0.30s 0.45s 0.60s

Maelezo ya Uhuishaji

fadeInUp on .hero-title

@keyframes

0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}

Sifa

duration0.6s

easingease-out

delay0s

iterations1

directionnormal

fill-modeforwards

Hali ya Sasa (40%)

opacity0.4

translateY12px

Vipengele Muhimu

Sitisha / Chezesha Uhuishaji Wote

Gandisha kila uhuishaji kwenye ukurasa papo hapo kwa mbofyo mmoja. Uhuishaji wote husitishwa katika nafasi yao ya sasa — haurudi mwanzo. Bonyeza cheza ili kuendelea kutoka mahali walipoishia. Muhimu kwa kukagua hali za katikati ya uhuishaji ambazo ni vigumu kuziona kwa macho.

Udhibiti wa Kasi Tofauti

Rekebisha kasi ya uchezaji wa uhuishaji wote kwa wakati mmoja. Chagua kutoka 0.25x (kasi ya robo), 0.5x, 1x (kawaida), 2x, au 4x. Kufanya kazi kwa 0.25x hufanya hata mabadiliko ya haraka zaidi ya 200ms kuwa rahisi kutazama na kurekebisha.

Orodha Kamili ya Uhuishaji

Kila uhuishaji na mpito wa CSS kwenye ukurasa hutambuliwa kiotomatiki na kuonyeshwa kwenye orodha inayoweza kusogezwa. Kila ingizo linaonyesha jina la uhuishaji (au sifa ya mpito), muda, kazi ya muda (ease, linear, cubic-bezier), kuchelewa, hesabu ya marudio, na hali ya sasa ya uendeshaji.

Kusugua Mistari ya Muda (Timeline Scrubbing)

Buruta kisugua mstari wa muda ili kusogea mwenyewe kupitia fremu ya uhuishaji kwa fremu. Angalia haswa kile kinachotokea kwa 25%, 50%, au hatua yoyote katika mzunguko wa uhuishaji. Ukurasa husasishwa kwa wakati halisi unapoburuta.

Udhibiti wa Kila Uhuishaji

Sitisha, chezesha, au rekebisha kasi kwa uhuishaji mmoja mmoja kwa uhuru. Tenga uhuishaji mmoja ili kuurekebisha bila kukengeushwa na vipengele vingine vinavyosogea kwenye ukurasa.

Maelezo ya Sifa za Uhuishaji

Bofya uhuishaji wowote kwenye orodha ili kuona tamko lake kamili la CSS — ufafanuzi wa @keyframes, uchanganuzi wa mkato wa uhuishaji, hali zilizokokotolewa za kuanza na mwisho, na ni vipengele gani unatumika.

Unachoweza Kukagua

Mkaguzi wa Uhuishaji covers the following, organized by category:

Sifa za Uhuishaji

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

Sifa za Mabadiliko

transition-property
transition-duration
transition-timing-function
transition-delay

Kazi za Muda

ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier()
steps()

Sifa za Kubadilisha

transform
transform-origin
translate
rotate
scale
skew

Matumizi ya Kawaida

Kurekebisha Uhuishaji Unaojichezesha au Wenye Matatizo

Punguza kasi ya uhuishaji hadi 0.25x ili kutambua haswa mahali ambapo kigugumizi au jank hutokea. Angalia ikiwa tatizo linasababishwa na layout thrashing (kuhuisha upana/urefu badala ya transform), kulainisha vibaya, au uhuishaji unaokinzana kwenye kipengele kimoja.

Kupanga Vizuri Muda & Curves za Kulainisha

Tumia kusugua mstari wa muda ili kuona jinsi curve yako ya kulainisha ya cubic-bezier inavyoonekana katika mazoezi. Linganisha tabia ya ease-in dhidi ya ease-out kwa asilimia maalum. Rekebisha maadili na ucheze tena mpaka mwendo uonekana sawa.

Kuelewa Maktaba za Uhuishaji

Tembelea tovuti iliyo na uhuishaji wa kuvutia (kurasa za kutua, tovuti za kwingineko) na ukague jinsi zilivyojengwa. Angalia ufafanuzi wa @keyframes, maadili ya muda, na ulengaji wa kipengele unaofanya mfuatano tata kufanya kazi.

Majaribio ya QA ya Maingiliano ya Uhuishaji

Thibitisha kuwa athari za hover, spinners za kupakia, skrini za mifupa, na mabadiliko ya ukurasa yote yanafanya kazi kwa usahihi. Sitisha katika hali za katikati ili kuangalia hitilafu za kuona kama vipengele vinavyopishana, z-index isiyo sahihi wakati wa uhuishaji, au yaliyomo kurejelewa vibaya.

Mapitio ya Upatikanaji wa Mwendo

Tambua uhuishaji ambao unaweza kusababisha matatizo kwa watumiaji wenye matatizo ya mfumo wa usawa. Angalia ikiwa prefers-reduced-motion inaheshimiwa vizuri kwa kusitisha uhuishaji wote na kuona kama ukurasa unabaki na kazi kikamilifu.

Jinsi ya Kutumia

Washa Mkaguzi wa Uhuishaji

Fungua kizimbani kinachoelea cha DevSuite Pro na ubofye ikoni ya Mkaguzi wa Uhuishaji. Chombo hicho hukagua ukurasa mara moja na kutambua uhuishaji na mabadiliko yote ya CSS yanayoendeshwa.

Kagua Uhuishaji Uliotambuliwa

Paneli inayoelea inaonekana ikiorodhesha kila uhuishaji uliopatikana kwenye ukurasa. Kila ingizo linaonyesha jina la uhuishaji, muda, kazi ya kulainisha, na kama inaendeshwa sasa au imesitishwa. Beji ya hesabu inaonyesha jumla ya idadi ya uhuishaji uliotambuliwa.

Sitisha & Kagua

Bonyeza kifungo cha kusitisha cha kimataifa ili kugandisha uhuishaji wote kwa wakati mmoja. Vipengele hubaki katika hali yao ya sasa ya katikati ya uhuishaji, huku kuruhusu kukagua sifa za CSS, kuchukua picha za skrini, au kulinganisha nafasi.

Rekebisha Kasi

Tumia kichagua kasi ili kupunguza kasi ya uhuishaji hadi 0.25x kwa uchunguzi wa kina, au uongeze kasi hadi 4x ili kuzunguka haraka kupitia uhuishaji mrefu. Mabadiliko ya kasi yanatumika papo hapo bila kuanza upya.

Sugua Mstari wa Muda

Buruta kisugua mstari wa muda kushoto na kulia ili kupitia uhuishaji mwenyewe. Ukurasa husasishwa kwa wakati halisi, kukuonyesha haswa jinsi kila fremu inavyoonekana. Ni kamili kwa kugundua hitilafu au kuthibitisha curves za kulainisha.