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.
? Utangulizi
CSS Transition na Animation ni mbinu za kuleta mabadiliko ya mtindo (style changes) kwa mpangilio wa wakati, ili kuweka harakati laini au za kuvutia kwenye tovuti. Transitions ni rahisi zaidi, zinatumiwa kwa mabadiliko madogo na ya kawaida, wakati animations zinatoa uwezo mkubwa zaidi wa kuunda miondoko changamano.
? Maudhui ya Somo
✅ 1. CSS Transition - Utangulizi na Vipengele Muhimu
Transition huruhusu mabadiliko ya properties za CSS kutokea kwa taratibu, badala ya mara moja.
Vipengele vya Transition:
| Property | Maelezo | Mfano |
|---|---|---|
transition-property |
Inabainisha sifa (property) zinazobadilika | background-color, transform |
transition-duration |
Muda wa mabadiliko (sekunde/ms) | 0.5s |
transition-timing-function |
Kasi au aina ya mabadiliko (curve) | ease, linear, ease-in |
transition-delay |
Muda wa kuchelewesha kuanza kwa mabadiliko | 0.2s |
Mfano wa transition kamili:
.box {
transition-property: background-color, transform;
transition-duration: 0.5s, 1s;
transition-timing-function: ease-in, ease-out;
transition-delay: 0s, 0.3s;
}
Hii ina maana background-color itabadilika kwa 0.5 sekunde bila kuchelewa, na transform itaanza baada ya 0.3 sekunde na ichukue 1 sekunde.
✅ 2. CSS Animation - Vipengele Muhimu na Ufafanuzi
Animation ni mfululizo wa mabadiliko ya properties za CSS, zikiendeshwa kwa mpangilio maalum wa muda.
Vipengele Muhimu vya Animation:
| Property | Maelezo | Mfano |
|---|---|---|
animation-name |
Jina la animation (@keyframes inayotumika) |
pulse |
animation-duration |
Muda wa mzunguko mmoja wa animation | 2s |
animation-timing-function |
Kasi ya mabadiliko ndani ya mzunguko | ease-in-out, linear |
animation-delay |
Muda wa kuchelewesha kuanza animation | 0.5s |
animation-iteration-count |
Ni mara ngapi animation itarudiwa | infinite, 1 |
animation-direction |
Mwelekeo wa animation (normal, reverse, alternate) |
alternate |
animation-fill-mode |
Jinsi hali ya mwisho ya animation inavyoshughulikiwa | forwards, backwards |
animation-play-state |
Hali ya kuendesha animation (running au paused) |
running |
✅ 3. @keyframes - Misingi ya Animation
@keyframes hutumika kufafanua mabadiliko yanayotokea wakati wa animation, kwa kugawanya mzunguko kuwa pointi za asilimia.
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
✅ 4. Mfano wa Animation Kamili
.box {
width: 100px;
height: 100px;
background-color: teal;
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
Hii inafanya .box ikue kidogo na kurudi ukubwa wa kawaida kwa mzunguko unaorudiwa bila kikomo.
✅ 5. Transition na Animation Kwa Pamoja
.button {
background-color: blue;
color: white;
padding: 15px 30px;
border: none;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: orange;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.button:active {
animation: shake 0.5s;
}
-
Transition hutumika kubadilisha rangi kwa hover
-
Animation hutumika kutoa athari ya kutetemeka wakati button inapobonyezwa
✅ 6. Ufafanuzi wa Vipengele Muhimu vya Animation
-
animation-name– jina la mfululizo wa hatua (@keyframes) -
animation-duration– muda wa mzunguko mmoja (sekunde au ms) -
animation-timing-function– kasi/mwendo wa animation ndani ya mzunguko (ease,linear,steps(),cubic-bezier()) -
animation-delay– muda wa kuchelewesha kuanza kwa animation -
animation-iteration-count– idadi ya kurudiwa (auinfinitekwa mara zisizoisha) -
animation-direction– mwelekeo wa animation (mfano,alternateinaacha animation irudi nyuma) -
animation-fill-mode– jinsi hali ya mwisho au mwanzo ya animation inavyoshughulikiwa (forwards,backwards,both) -
animation-play-state– hali ya kuendesha animation (running,paused)
✅ Hitimisho
Kwa kuelewa na kutumia properties hizi vizuri, unaweza kubuni miondoko ya kuvutia na yenye ubora wa hali ya juu kwa tovuti zako, ukiboresha uzoefu wa mtumiaji na kuongeza mvuto wa muonekano.
? Somo Linalofuata: SOMO LA 24 - CSS Positioning
Tutajifunza aina za position na jinsi ya kuzipanga elementi kwa kutumia static, relative, absolute, fixed, na sticky.
? Maswali ya Kujitathmini
-
Property gani inaelezea jina la mfululizo wa hatua za animation?
a)animation-duration
b)animation-name
c)animation-fill-mode
d)animation-delay -
animation-iteration-count: infinite;ina maana gani?
a) Animation haitaanza
b) Animation itarudia mzunguko bila mwisho
c) Animation itaacha mara moja
d) Animation inachezewa polepole -
Nini hufanyika kama
animation-fill-modeikoforwards?
a) Animation inaanza polepole
b) Hali ya mwisho ya animation inaendelea kuonekana
c) Animation inarudi mwanzo
d) Animation haina athari -
transition-delayhutumika kwa nini?
a) Kuchelewesha kuanza kwa transition
b) Kuongeza kasi ya transition
c) Kubadilisha rangi
d) Kuficha elementi -
Nini maana ya
animation-direction: alternate;?
a) Animation inaenda kwa mwelekeo mmoja tu
b) Animation inaenda na kurudi kwa mzunguko wa mabadiliko
c) Animation haitumiki
d) Animation huanza tena baada ya kuisha
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Share On:
👉1 Bongolite - Game zone - Play free game 👉2 Kitabu cha Afya 👉3 Tafasiri ya Riyadh Swalihina 👉4 ai web app 👉5 Madrasa kiganjani 👉6 kitabu cha Simulizi
Post zinazofanana:
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...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 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
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 12: Width, Height, Max/Min Width na Overflow
Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.
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 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.
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 18: Grid Layout
Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.
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...