Wareegyada iyo Dhaqdhaqaaqa (Transitions & Animations)

Dhaqdhaqaaqu (Motion) wuxuu mareegta internetka siiyaa noolaan iyo shakhsiyad (personality) [1]. CSS waxay leedahay laba siyaabood oo dhaqdhaqaaq lagu daro: transitions (isbeddellada fudud) iyo animations (dhaqdhaqaaqa kakan). Casharkan waxaan ku baran doonaa labadaba, iyadoo ay weheliyaan sifooyinka u-beddelka (Transforms) iyo tixgelinta ku-habboonaanta adeegsiga (accessibility) [1].

Transitions — Isbeddellada Fudud

Sifada transition waxay u oggolaataa sifooyinka CSS inay si tartiib ah oo naxariis leh isu beddelaan:

.badhanka {
  background: #2563eb;
  transition: background 0.3s ease;
}

.badhanka:hover {
  background: #1d4ed8;
}

Sifooyinka Transitions

.curiye {
  /* Habka Gaaban (Shorthand): sifo, muddo, habka waqtiga, daahidda */
  transition: all 0.3s ease 0s;

  /* Qaabaynta sifo gaar ah: */
  transition: background 0.3s ease;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* Qaabaynta sifooyin badan isla markaana kala duwan: */
  transition:
    background 0.3s ease,
    transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    opacity 0.2s linear;
}

Sifada	Qiimaha tusaalaha	Sharaxaadda
`transition-property`	`background`, `transform`, `all`	Sifooyinka la rabo inay isbeddelaan
`transition-duration`	`0.3s`, `300ms`	Muddada uu isbeddelku qaadanayo
`transition-timing-function`	`ease`, `linear`, `ease-in-out`	Sida isbeddelku u soconayo (xawaaraha)
`transition-delay`	`0.1s`, `500ms`	Muddada la sugayo ka hor intaan isbeddelku bilaaban

Hababka Waayaha (Timing Functions)

Hab-socodka waqtiga ayaa go’aamiya sida uu dareemo dhaqdhaqaaqa isbeddelka:

.box {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Qiimaha	Sida uu u dareemayo dhaqdhaqaaqa
`ease`	Wuxuu ku bilaabmaa si deggen, haddana wuu dhex-ordaa, dhamaadkana wuu degaa
`linear`	Xawaare isku mid ah laga bilaabo ilaa dhammaadka
`ease-in`	Ku bilaabma gaabis, kuna dhammaada si degdeg ah
`ease-out`	Ku bilaabma degdeg, kuna dhammaada si gaabis ah
`ease-in-out`	Ku bilaabma kuna dhammaada si gaabis ah
`cubic-bezier(n,n,n,n)`	Hab-socod si gaar ah loo xakameeyay (custom timing curve)

Sifada `transform` — U-beddelka Qaabka

Sifada transform waxay awood u leedahay inay beddesho muuqaalka ama booska curiyaha, iyadoo aan wax saameyn ah ku yeelanayn curiyayaasha kale ee ku xeeran:

.kaadhka:hover {
  transform: translateY(-8px);    /* Wuxuu curiyaha u dhaqaajiyaa kor ama hoos */
  transform: scale(1.05);          /* In curiyaha la weyneeyo ama la yareeyo */
  transform: rotate(3deg);         /* In curiyaha la wareejiyo */
  transform: skewX(-2deg);         /* In curiyaha dhinac loo iilo */
}

Isku-darka dhowr `transform` isla markaana hal mar ah:

.kaadhka:hover {
  transform: translateY(-8px) scale(1.02);
  transition: transform 0.3s ease;
}

Ku-qaabaynta `@keyframes` — Dhaqdhaqaaqa Kakan

Marka aad u baahan tahay dhaqdhaqaaqyo dhowr tallaabo ka kooban ama mid joogto ah oo aan joogsanayn:

@keyframes sabeyn {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-20px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.sabeynaya {
  animation: sabeyn 3s ease-in-out infinite;
}

Sifooyinka Animation-ka

.curiye {
  animation-name: sabeyn;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-delay: 0s;

  /* Habka Gaaban (Shorthand): Magaca, muddada, qaabka xawaaraha, inta jeer, iyo dhinaca socodka */
  animation: sabeyn 3s ease-in-out infinite alternate;
}

Sifada	Tusaale	Sharaxaadda
`animation-name`	`sabeyn`	Magaca la siiyay `@keyframes`
`animation-duration`	`3s`	Muddada uu hal wareeg qaadanayo
`animation-timing-function`	`ease-in-out`	Sida uu u dareemayo dhaqdhaqaaqa
`animation-iteration-count`	`infinite`	Inta jeer ee dib loo celcelinayo
`animation-direction`	`alternate`	Dhinaca uu u soconayo (hore, dib, ama is-bedbeddel)
`animation-fill-mode`	`both`	Sida uu curiyuhu u dhowrayo qaabka ka hor ama ka dib dhaqdhaqaaqa
`animation-delay`	`0.5s`	Daahidda ka hor inta uusan bilaaban

Sifada `will-change` — Hagaajinta Waxqabadka (Performance)

Bog-furayaashu waxay si toos ah u hagaajiyaan koodka, laakiin waxaad ka caawin kartaa inaad u sii sheegto curiyayaasha is-beddelaya si loogu diyaariyo kaarka garaafiska (GPU):

.animated-element {
  will-change: transform, opacity;
}

Ogow: Iska ilaali inaad si xad-dhaaf ah u adeegsato will-change — waa sifo culays weyn ku keeni karta xusuusta kombiyuutarka ama mobilka haddii mashaariic badan lagu qoro.

Ixtiraamidda Dookha Isticmaalaha (`prefers-reduced-motion`)

Dadka qaar, dhaqdhaqaaqa degdega ah ee shaashadda wuxuu ku keeni karaa xanuun ama dawakhaad. Sidaas darteed, had iyo jeer isticmaal weydiinta prefers-reduced-motion:

/* Dhaqdhaqaaqyada oo dhan ku dhim daqiiqad aad u yar si loo ixtiraamo dookha isticmaalaha: */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Tani waxay xaqiijinaysaa in mareegtaadu tahay mid ay dhib yar u adeegsan karaan dadka u nugul ama dhibsanaya dhaqdhaqaaqa dhibka badan.

Tusaalooyin Waaryci ah

Habaynta Badhanka marka tilmaamuhu dul dego (Hover)

.badhanka {
  background: #2563eb;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.badhanka:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.badhanka:active {
  transform: translateY(0);
  box-shadow: none;
}

Muujiyaha Sugitaanka (Loading Spinner)

@keyframes wareejin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: wareejin 0.8s linear infinite;
}

Muuqaalka Qolfoofka inta wax la soo dajinayo (Skeleton Loading)

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  height: 20px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

Tusaale Mashruuc Dhamaystiran oo ku saabsan Animations-ka

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transitions &amp; Animations</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, sans-serif;
      background: #f8fafc;
      overflow-x: hidden;
    }

    /* Ixtiraamidda Dookha Isticmaalaha (prefers-reduced-motion) */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 40px 20px;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      position: relative;
      overflow: hidden;
    }

    .hero h1 {
      color: white;
      font-size: clamp(2rem, 5vw, 3rem);
      animation: soogal 0.8s ease-out both;
    }
    .hero p {
      color: #94a3b8;
      font-size: clamp(0.9rem, 2vw, 1.1rem);
      margin-top: 12px;
      max-width: 500px;
      animation: soogal 0.8s ease-out 0.2s both;
    }

    @keyframes soogal {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Kaadhka sabeynaya (Floating card) */
    @keyframes sabeyn {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-16px); }
    }

    .kaadhka-sabeyn {
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      padding: 32px 48px;
      margin-top: 32px;
      animation: sabeyn 4s ease-in-out infinite;
      will-change: transform;
      color: white;
    }

    /* Badhamada (Buttons) */
    .badhano {
      display: flex;
      gap: 16px;
      margin-top: 28px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      padding: 14px 28px;
      border-radius: 99px;
      font-size: 0.9rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.25s ease;
      cursor: pointer;
      border: none;
    }
    .btn-primary {
      background: #3b82f6;
      color: white;
    }
    .btn-primary:hover {
      background: #2563eb;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
    }
    .btn-primary:active {
      transform: translateY(0);
    }
    .btn-secondary {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,0.2);
      color: white;
    }
    .btn-secondary:hover {
      background: rgba(255,255,255,0.08);
      transform: translateY(-2px);
    }

    /* Qaybta Sifooyinka (Features Section) */
    .qaybta {
      padding: 60px 32px;
      max-width: 800px;
      margin: 0 auto;
    }
    .qaybta h2 {
      font-size: 1.5rem;
      margin-bottom: 24px;
      color: #0f172a;
    }

    /* Kaadhadhka (Cards) */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
    }
    .card {
      background: white;
      border-radius: 14px;
      padding: 24px;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
      cursor: default;
    }
    .card:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 12px 30px rgba(0,0,0,0.08);
      border-color: #3b82f6;
    }
    .card .icon { font-size: 2rem; margin-bottom: 8px; }
    .card h3 {
      font-size: 0.95rem;
      color: #0f172a;
      transition: color 0.3s ease;
    }
    .card:hover h3 { color: #2563eb; }
    .card p {
      font-size: 0.85rem;
      color: #64748b;
      margin-top: 6px;
      line-height: 1.6;
    }

    /* Muujiyaha rasmiga ah ee Loading-ka */
    .spinner-weelka {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
    }
    .spinner {
      width: 28px;
      height: 28px;
      border: 3px solid #e2e8f0;
      border-top-color: #3b82f6;
      border-radius: 50%;
      animation: wareejin 0.8s linear infinite;
    }
    @keyframes wareejin {
      to { transform: rotate(360deg); }
    }

    /* Baarka muujiya hannaanka dhowaan-dhammaadka */
    .loading-bar {
      width: 100%;
      height: 4px;
      background: #e2e8f0;
      border-radius: 99px;
      overflow: hidden;
      margin-top: 16px;
    }
    .loading-bar-inner {
      height: 100%;
      width: 30%;
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      border-radius: 99px;
      animation: loading 2s ease-in-out infinite;
    }
    @keyframes loading {
      0% { width: 0%; margin-left: 0; }
      50% { width: 60%; margin-left: 40%; }
      100% { width: 0%; margin-left: 100%; }
    }
  </style>
</head>
<body>

<div class="hero">
  <h1>CSS Animations</h1>
  <p>Baro sida loo sameeyo dhaqdhaqaaq qurux badan oo fudud — transitions, keyframes, iyo transforms.</p>
  <div class="kaadhka-sabeyn">
    ✦ 20 Cashar oo CSS ah ✦
  </div>
  <div class="badhano">
    <button class="btn btn-primary">Ku Bilaab Maanta</button>
    <button class="btn btn-secondary">Akhri Faahfaahin</button>
  </div>
</div>

<div class="qaybta">
  <h2>Sifooyinka Dhaqdhaqaaqa</h2>
  <div class="cards">
    <div class="card">
      <div class="icon">↗️</div>
      <h3>Transition</h3>
      <p>Isbadal naxariis leh inta u dhaxaysa laba xaalad — hover, focus, iwm.</p>
    </div>
    <div class="card">
      <div class="icon">🔄</div>
      <h3>Transform</h3>
      <p>U-beddelka qaabka: translate, rotate, scale, iyo skew.</p>
    </div>
    <div class="card">
      <div class="icon">🎬</div>
      <h3>Keyframes</h3>
      <p>Dhaqdhaqaaq kakan oo leh talaabooyin badan — @keyframes.</p>
    </div>
    <div class="card">
      <div class="icon">⏳</div>
      <h3>Spinner / Loading</h3>
      <p>Sida loo sameeyo loading spinner, skeleton, iyo muujinta sugitaanka.</p>
    </div>
  </div>

  <div class="spinner-weelka">
    <div class="spinner"></div>
    <span style="color:#64748b; font-size:0.9rem;">Waxaa la soo dejinayaa...</span>
  </div>
  <div class="loading-bar">
    <div class="loading-bar-inner"></div>
  </div>
</div>

</body>
</html>

Casharka xiga: Hababka Ugu Fiican iyo Dayactirka Koodka CSS (CSS Best Practices).

Transitions — Isbeddellada Fudud

Sifooyinka Transitions

Hababka Waayaha (Timing Functions)

Sifada transform — U-beddelka Qaabka

Isku-darka dhowr transform isla markaana hal mar ah:

Ku-qaabaynta @keyframes — Dhaqdhaqaaqa Kakan