CSS - SOMO LA 22: CSS Transition na Animation

? 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

• transition huruhusu 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 @keyframes kuelezea 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

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

2. @keyframes hutumika kwa ajili ya nini?
   a) Kufafanua hatua za animation
   b) Kubadilisha rangi za fonti
   c) Kuongeza margin
   d) Kuficha elementi

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

4. Transition ya muda gani inatakiwa kupewa?
   a) Seconds au milliseconds
   b) Pixels
   c) Percentage
   d) Pixels kwa pili

5. Katika mfano wa transform: scale(1.1);, animation inafanyaje?
   a) Inapunguza ukubwa
   b) Inapanua ukubwa kidogo
   c) Inabadilisha rangi
   d) Haina athari yoyote