𝐍𝐚𝐬𝐬𝐢𝐫𝐜𝐞𝐨

Mafunzo ya CSS - Sehemu ya Nne

Mikondo na Mageuzi (Transitions & Transforms)

Mikondo (Transitions)

Mikondo huturuhusu kubadilisha thamani za sifa za CSS kwa mpito laini badala ya mabadiliko ya ghafla. Hii inaleta uzoefu mzuri zaidi kwa watumiaji.

.kipengele { transition: property duration timing-function delay; } /* Mfano */ .kitu { transition: all 0.3s ease-in-out 0.1s; }

Mikondo ya Msingi

Mikondo ina sehemu nne kuu:

• Property - Sifa unayotaka kubadilika kwa mpito (au "all" kwa sifa zote)
• Duration - Muda wa mpito (kwa sekunde au milisekunde)
• Timing function - Mwendo wa mpito (ease, linear, ease-in, ease-out, ease-in-out)
• Delay - Muda wa kusubiri kabla ya mpito kuanza

Mfano wa Mkondo

Bonyeza mimi

Pita kifaa chako juu ya kisanduku hapo juu ili kuona mabadiliko ya mpito.

Aina za Timing Functions

Kila timing function ina mwendo tofauti wa mpito:

ease

linear

ease-in

ease-out

ease-in-out

Pita juu ya vizibo hapo juu ili kuona tofauti za timing functions.

Mageuzi (Transforms)

Mageuzi huturuhusu kubadilisha sura, mwelekeo, na nafasi ya vipengele bila kubadilisha mtiririko wa hati.

.kipengele { transform: function(value); } /* Mifano */ .kitu { transform: rotate(45deg); /* Kuzungusha */ transform: scale(1.5); /* Kubadilisha ukubwa */ transform: translate(50px, 20px); /* Kusogeza */ transform: skew(20deg, 10deg); /* Kupinda */ }

Aina za Mageuzi

Kuna aina nne kuu za mageuzi:

• Rotate - Kuzungusha kipengele kwa digrii fulani
• Scale - Kubadilisha ukubwa wa kipengele
• Translate - Kusogeza kipengele kwa mwelekeo mlalo au wima
• Skew - Kupinda kipengele kwa digrii fulani

Mfano wa Mageuzi

Nafasi ya Kawaida

Matumizi ya Pamoja ya Mikondo na Mageuzi

Mikondo na mageuzi hufanya kazi vizuri pamoja. Mikondo huwezesha mageuzi yafanyike kwa mpito laini.

.kipengele { transition: transform 0.5s ease-in-out; } .kipengele:hover { transform: rotate(45deg) scale(1.2); }

Mfano wa Matumizi ya Pamoja

Bonyeza mimi

Bonyeza kitufe hapo chini ili kuona mchanganyiko wa mikondo na mageuzi.

Animations za CSS

Zaidi ya mikondo na mageuzi, CSS ina uwezo wa kuunda animasjon za hali ya juu kwa kutumia @keyframes.

/* Kufafanua animation */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Kutumia animation */ .kipengele { animation: pulse 2s infinite; }

Mfano wa Animation

Animation ya pulse inayorudia yenyewe.

Kidokezo: Tumia mikondo na mageuzi kwa uhakika. Zisizidi kutumika kwani zinaweza kuvuruga matumizi ya tovuti. Lengo ni kuboresha uzoefu wa mtumiaji, si kumvuruga.

Mazoezi ya Vitendo

Hapa chini kuna mazoezi ya vitendo ya kutumia mikondo na mageuzi:

Kitufe cha Kupita juu (Hover Button)

Picha inayobadilika

© 𝐍𝐚𝐬𝐬𝐢𝐫 𝐜𝐞𝐨2023 Mafunzo ya CSS | Sehemu ya Nne: Mikondo na Mageuzi

Sehemu inayofuata: Utengenezaji wa Mitandao Inayobadilika (Responsive Web Design)