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 kitabu cha Simulizi 👉2 Kitabu cha Afya 👉3 Kitau cha Fiqh 👉4 Sira ya Mtume Muhammad (s.a.w) 👉5 Dua za Mitume na Manabii 👉6 ai web app
Post zinazofanana:
CSS - SOMO LA 27: Kutumia @import Katika CSS
Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...CSS - SOMO LA 14: Position Property
Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
Soma Zaidi...CSS - SOMO LA 22: CSS Transition na Animation
Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.
Soma Zaidi...CSS - SOMO LA 29: CSS z-index na Stacking Context
Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga
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...CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css
Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...CSS - SOMO LA 10: Box Model katika CSS
Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
Soma Zaidi...CSS - somo la 1: Maana ya CSS, kazi zake na historia yake
Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...CSS - SOMO LA 11: Mitindo ya Border (Border Styles)
Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...CSS - SOMO LA 9: Margin na Padding
Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
Soma Zaidi...