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;
}

✅ 6. Ufafanuzi wa Vipengele Muhimu vya Animation


✅ 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

  1. Property gani inaelezea jina la mfululizo wa hatua za animation?
    a) animation-duration
    b) animation-name
    c) animation-fill-mode
    d) animation-delay

  2. 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

  3. 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

  4. transition-delay hutumika kwa nini?
    a) Kuchelewesha kuanza kwa transition
    b) Kuongeza kasi ya transition
    c) Kubadilisha rangi
    d) Kuficha elementi

  5. 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

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 33

Share On:

Facebook WhatsApp
Sponsored links
👉1 Sira ya Mtume Muhammad (s.a.w)    👉2 Simulizi za Hadithi Audio    👉3 Madrasa kiganjani    👉4 Kitau cha Fiqh    👉5 kitabu cha Simulizi    👉6 Bongolite - Game zone - Play free game   

Post zinazofanana:

CSS - SOMO LA 21: CSS Units

Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.

Soma Zaidi...
CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)

Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.

Soma Zaidi...
CSS - SOMO LA 31: CSS Filters (blur, brightness, contrast.)

Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.

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 13: Display Property

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...
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...
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 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 32: Custom Fonts na @font-face

Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.

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...