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.
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.
Transition huruhusu mabadiliko ya properties za CSS kutokea kwa taratibu, badala ya mara moja.
| 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 |
.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.
Animation ni mfululizo wa mabadiliko ya properties za CSS, zikiendeshwa kwa mpangilio maalum wa muda.
| 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 |
@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);
}
}
.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.
.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
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 (au infinite kwa mara zisizoisha)
animation-direction – mwelekeo wa animation (mfano, alternate inaacha 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)
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.
Tutajifunza aina za position na jinsi ya kuzipanga elementi kwa kutumia static, relative, absolute, fixed, na sticky.
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-mode iko forwards?
a) Animation inaanza polepole
b) Hali ya mwisho ya animation inaendelea kuonekana
c) Animation inarudi mwanzo
d) Animation haina athari
transition-delay hutumika 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.. ?
Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Soma Zaidi...Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
Soma Zaidi...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...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...Katika somo hili uatkwenda kujifunza aina za css selectors
Soma Zaidi...Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...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...Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
Soma Zaidi...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...