CSS Transitions

 

CSS Transitions – Bedelidda Animations ee CSS

CSS transitions waa hab sahlan oo lagula shaqeeyo animations si tartiib ah loogu beddelo hal xaalada mid kale. Waxay kaa caawinaysaa inaad abuurto isbeddel qurux badan oo ka muuqda website-kaaga, adigoo aan isticmaalin JavaScript ama animations culus.

CSS Transitions

Waa maxay CSS Transitions?

Transitions waxay u oggolaanayaan waxyaabaha HTML-ka in lagu badalo sifooyinkooda (properties) si tartiib tartiib ah halkii ay si degdeg ah isu beddeli lahaayeen. Tusaale ahaan, haddii aad rabto inaad midabka badhanka (button) isbeddelo marka la taabto, halkii ay si kedis ah isu beddeli lahayd, waxaad ka dhigi kartaa inuu si tartiib ah isku beddelo muddo cayiman.

Sida Loo Isticmaalo CSS Transitions

Si aad ugu isticmaasho transitions CSS, waxaad u baahan tahay inaad labo arrimood dejiso:

1. Sifada (Property) – Waa waxa aad rabto in la beddelo, sida midabka (color), cabbirka (width), ama muuqaalka (opacity).
2. Mudada (Duration) – Waa inta ay qaadanayso isbeddelka (tusaale: 0.5s ama 1s).

Tusaale:

CSS Transitions

css

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.5s;
}

button:hover {
  background-color: red;
}

Sharaxaad:

• transition: background-color 0.5s; wuxuu keenayaa in midabka badhanka uu si tartiib ah u beddelo muddo 0.5 ilbiriqsi ah marka la dul wado (hover).

Qaybaha Muhiimka ah ee CSS Transitions

Transitions waxay leedahay afar qaybood oo la isticmaali karo:

1. property – Waxyaabaha la beddelayo, sida width, opacity, background-color, iwm.
2. duration – Mudada uu isbeddelka qaadanayo (1s, 0.3s, iwm).
3. timing-function – Sida isbeddelku u dhacayo (ease, linear, ease-in, ease-out, iwm).
4. delay – Dib u dhac inta ka horreysa isbeddelka (0.5s, 1s, iwm).

Tusaale dhamaystiran:

css

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: width 1s ease-in-out, background-color 0.5s;
}

.box:hover {
  width: 200px;
  background-color: yellow;
}