CSS - SOMO LA 28: CSS Timing Functions
Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.
📘 Utangulizi
Katika CSS, tunapotumia transition au animation, si kila wakati tunahitaji kasi iwe sawa kuanzia mwanzo hadi mwisho. Timing functions hutupa uwezo wa kubadilisha kasi ya mwendo ili iweze kuanzia taratibu, kuharakisha katikati, au kuisha taratibu — kwa muonekano wa kitaalamu zaidi.
📚 Maudhui ya Somo
✅ 1. Syntax ya transition-timing-function
transition-timing-function: ease;
Au kwa animation:
animation-timing-function: ease-in-out;
✅ 2. Aina za Timing Functions
🟢 linear
Mwendo unakuwa sawa kabisa toka mwanzo hadi mwisho bila kuharakisha wala kupunguza kasi.
transition-timing-function: linear;
🟢 ease
Kasi huanza polepole, huenda kwa haraka katikati, na kisha hupungua tena mwishoni. Hii ndiyo chaguo-msingi (default).
transition-timing-function: ease;
🟢 ease-in
Mabadiliko huanza polepole, kisha huenda kwa haraka hadi mwisho.
transition-timing-function: ease-in;
🟢 ease-out
Mwendo huanza haraka, kisha hupungua polepole hadi mwisho.
transition-timing-function: ease-out;
🟢 ease-in-out
Mwendo huanza polepole, huwa haraka katikati, na kisha hupungua tena mwishoni.
transition-timing-function: ease-in-out;
✅ 3. cubic-bezier() — Udhibiti wa mwendo wa kipekee
Unaweza kufafanua timing function yako mwenyewe kwa kutumia cubic-bezier(x1, y1, x2, y2) ambapo x na y ni pointi zinazofafanua curve ya mwendo.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
➡️ Tafuta au tengeneza curve zako kupitia tovuti kama cubic-bezier.com.
✅ 4. Mfano wa Matumizi
<style>
.box {
width: 100px;
height: 100px;
background: red;
transition: all 1s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
<div class="box"></div>
Katika mfano huu, .box inapopigwa hover, ukubwa wake huongezeka polepole mwanzoni, huenda haraka katikati, kisha polepole tena — kwa kutumia ease-in-out.
✅ Hitimisho
Timing functions hutoa nguvu ya kudhibiti uzoefu wa mtumiaji kwa njia ya mabadiliko ya kiurahisi, ya kuvutia, na ya kitaalamu. Kwa kuelewa na kutumia timing functions ipasavyo, unaweza kufanya tovuti yako iwe na mwingiliano wa kisasa na laini zaidi.
🔜 Somo Linalofuata: SOMO LA 29 – CSS Z-Index na Stacking Context
Tutajifunza jinsi ya kudhibiti tabaka za elementi (layers) kwa kutumia z-index na jinsi kivinjari kinavyoweka vitu juu au chini.
🧠 Maswali ya Kujitathmini
-
Kazi ya
transition-timing-functionni ipi?
a) Kuweka background
b) Kudhibiti rangi ya maandishi
c) Kudhibiti kasi ya mabadiliko
d) Kudhibiti ukubwa wa maandishi -
Timing function ipi huanza haraka kisha kupungua polepole?
a) ease-in
b) ease-out
c) linear
d) ease-in-out -
linearina tabia gani?
a) Kasi huanza polepole
b) Kasi huenda haraka katikati
c) Kasi ni sawa toka mwanzo hadi mwisho
d) Kasi hubadilika bila mpangilio -
Chaguo-msingi (default) ya timing function ni ipi?
a) linear
b) ease
c) ease-in-out
d) cubic-bezier -
cubic-bezier()hutumika kwa kazi gani?
a) Kuongeza rangi
b) Kutengeneza curve ya mwendo maalum
c) Kuweka font
d) Kupunguza opacity
Umeionaje Makala hii.. ?
👉1 Simulizi za Hadithi Audio 👉2 kitabu cha Simulizi 👉3 Kitabu cha Afya 👉4 Sira ya Mtume Muhammad (s.a.w) 👉5 Kitau cha Fiqh 👉6 Tafasiri ya Riyadh Swalihina
Post zinazofanana:
CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition
Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.
Soma Zaidi...CSS - SOMO LA 24: CSS Variables (Custom Properties)
Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
Soma Zaidi...CSS - SOMO LA 17: Flexbox Advanced
Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
Soma Zaidi...CSS - somo la 34: if() Condition katika CSS
Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements
Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.
Soma Zaidi...Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni
Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.
Soma Zaidi...CSS - SOMO LA 20: Media Queries na Responsive Design
Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.
Soma Zaidi...CSS - SOMO LA 15: Float na Clear katika CSS
Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.
Soma Zaidi...CSS - SOMO LA 25: CSS Shorthand Properties
Katika somo hili tutajifunza kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.
Soma Zaidi...Drone: Nyuki Dume na Majukumu Yake
Simulizi hii inaelezea maisha ya nyuki dume, zinazojulikana kama drone. Inafafanua majukumu yao, maisha yao ya kila siku ndani ya kiwanda cha nyuki, na hatima yao baada ya kufanikisha kuzaliana na kifalme cha nyuki. Simulizi pia inaangazia tofauti zao na nyuki wa kike, na umuhimu wao katika uzazi wa kifalme.
Soma Zaidi...