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

  1. Kazi ya transition-timing-function ni ipi?
    a) Kuweka background
    b) Kudhibiti rangi ya maandishi
    c) Kudhibiti kasi ya mabadiliko
    d) Kudhibiti ukubwa wa maandishi

  2. Timing function ipi huanza haraka kisha kupungua polepole?
    a) ease-in
    b) ease-out
    c) linear
    d) ease-in-out

  3. linear ina tabia gani?
    a) Kasi huanza polepole
    b) Kasi huenda haraka katikati
    c) Kasi ni sawa toka mwanzo hadi mwisho
    d) Kasi hubadilika bila mpangilio

  4. Chaguo-msingi (default) ya timing function ni ipi?
    a) linear
    b) ease
    c) ease-in-out
    d) cubic-bezier

  5. cubic-bezier() hutumika kwa kazi gani?
    a) Kuongeza rangi
    b) Kutengeneza curve ya mwendo maalum
    c) Kuweka font
    d) Kupunguza opacity

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 264

Share On:

Facebook WhatsApp
Sponsored links
👉1 web hosting    👉2 Dua za Mitume na Manabii    👉3 Bongolite - Game zone - Play free game    👉4 Tafasiri ya Riyadh Swalihina    👉5 Kitau cha Fiqh    👉6 Madrasa kiganjani   

Post zinazofanana:

CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS

Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.

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 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 6: Kuweka Background kwenye HTML kwa kutumia CSS

Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.

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 15: Float na Clear katika CSS

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...
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 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 25: CSS Shorthand Properties

Katika somo hili tutajifunza kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.

Soma Zaidi...
CSS - SOMO LA 16: Flexbox Basics

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