? 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