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.
? Utangulizi
CSS transition na animation ni mbinu za kuongeza mvuto kwenye vipengele vya tovuti kwa kuruhusu mabadiliko ya mitindo (styles) kutokea kwa taratibu na ufanisi. Hii hufanya tovuti ionekane za kisasa na kuvutia watumiaji.
? Maudhui ya Somo
✅ 1. CSS Transition
-
transitionhuruhusu mabadiliko ya mitindo kutokea polepole badala ya mara moja.
button {
background-color: blue;
transition: background-color 0.5s ease;
}
button:hover {
background-color: green;
}
-
Hapa, rangi ya kitufe hubadilika kutoka buluu hadi kijani kwa sekunde 0.5.
✅ 2. Transition Properties
-
transition-property– property ambayo itabadilika -
transition-duration– muda wa mabadiliko -
transition-timing-function– kasi ya mabadiliko (e.g., ease, linear) -
transition-delay– kuchelewesha mabadiliko
✅ 3. CSS Animation
-
Hutoa udhibiti mkubwa zaidi ikilinganishwa na transition.
-
Inatumia
@keyframeskuelezea hatua za mabadiliko.
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.box {
animation: pulse 2s infinite;
}
-
Mfano huu unafanya kipengele kukua kidogo na kurudi kawaida kwa mzunguko usioisha.
✅ 4. Sifa za Animation
-
animation-name– jina la keyframes -
animation-duration– muda wa mzunguko mmoja -
animation-iteration-count– ni mara ngapi itarudia (infinite kwa mara zisizoisha) -
animation-timing-function– kasi/mwendo wa mabadiliko -
animation-delay– kuchelewesha kuanza kwa animation
✅ 5. Mfano Kamili
<button class="btn">Bonyeza hapa</button>
.btn {
background-color: blue;
color: white;
padding: 15px 30px;
border: none;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: orange;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.btn:active {
animation: shake 0.5s;
}
✅ Hitimisho
Transition na animation ni mbinu bora za kuongeza uhai na mvuto kwenye tovuti. Transition ni rahisi na nzuri kwa mabadiliko madogo, wakati animation inatoa uwezo zaidi wa miondoko changamano.
? Somo Linalofuata: SOMO LA 23 - CSS Positioning
Tutajifunza kuhusu static, relative, absolute, fixed, na sticky positioning.
? Maswali ya Kujitathmini
-
CSS transition huhifadhi mabadiliko ya style kwa namna gani?
a) Mara moja bila kuchelewa
b) Kwa taratibu na kwa muda fulani
c) Hakuna mabadiliko
d) Kwa kubadilisha rangi tu -
@keyframeshutumika kwa ajili ya nini?
a) Kufafanua hatua za animation
b) Kubadilisha rangi za fonti
c) Kuongeza margin
d) Kuficha elementi -
animation-iteration-count: infinite;inamaanisha nini?
a) Animation haitaanza
b) Animation itarudia kwa mzunguko usio na mwisho
c) Animation itafika mwisho na kusimama
d) Animation itarudia mara moja tu -
Transition ya muda gani inatakiwa kupewa?
a) Seconds au milliseconds
b) Pixels
c) Percentage
d) Pixels kwa pili -
Katika mfano wa
transform: scale(1.1);, animation inafanyaje?
a) Inapunguza ukubwa
b) Inapanua ukubwa kidogo
c) Inabadilisha rangi
d) Haina athari yoyote
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Share On:
👉1 Kitau cha Fiqh 👉2 ai web app 👉3 Bongolite - Game zone - Play free game 👉4 Kitabu cha Afya 👉5 Dua za Mitume na Manabii 👉6 Tafasiri ya Riyadh Swalihina
Post zinazofanana:
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 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...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 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 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...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 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...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 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...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...