Keçidlər

4.1 Transition xassəsi

CSS keçidləri (transition) CSS xassələrinin dəyərlərinin dəyişikliklərini animasiya etməyə imkan verir, onların ilkin və son vəziyyətləri arasında hamar keçidlər yaradır. Bu, istifadədə rahatlığı artıran və veb səhifələrə dinamiklik qatmaq üçün qüdrətli bir alətdir. Keçidlərlə əlaqəli əsas aspektləri, o cümlədən xassələri, müddəti və timing funksiyalarını nəzərdən keçirək.

transition xassəsi keçidə aid bütün aspektləri bir xassədə birləşdirir. Bu, aşağıdakılardan ibarət ola bilər:

1. Animasiya ediləcək xassələr.
2. Animasiyanın müddəti.
3. Timing funksiyası.
4. Animasiyanın başlamasına qədər gecikmə (opsional).

Syntax:

    
      element {
        transition: property duration timing-function delay;
      }
    
  

Harada:

• property: keçid tətbiq ediləcək xassə (məsələn, width, height, background-color)
• duration: keçidin müddəti (məsələn, 2s iki saniyə və ya 500ms 500 millisekund üçün)
• timing-function: animasiyanın dəyişmə sürətini müəyyən edən timing funksiyası (məsələn, ease, linear, ease-in, ease-out, ease-in-out)
• delay: keçidin başlamasına qədər gecikmə (məsələn, 1s bir saniyə üçün)

Nümunə:

    
      
   

    Məzmun
   
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

Kodun izahı:

• transition: width 2s ease-in-out, background-color 1s ease: iki keçidi təyin edir: biri width xassəsi üçün 2 saniyəlik müddət və ease-in-out timing funksiyası ilə, digəri isə background-color xassəsi üçün 1 saniyəlik müddət və ease timing funksiyası ilə

4.2 Keçid Xüsusiyyətləri

1. transition-property xassəsi

transition-property xassəsi, elementin keçidlər üçün hansı xassələrin tətbiq olunacağını müəyyən edir.

Sintaksis:

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Nümunə:

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. transition-duration xassəsi

transition-duration xassəsi keçidin davamiyyətini təyin edir.

Sintaksis:

    
      element {
        transition-duration: time;
      }
    
  

Nümunə:

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. transition-timing-function xassəsi

transition-timing-function xassəsi animasiyanın dəyişmə sürətini vaxt ərzində müəyyən edir.

Sintaksis:

    
      element {
        transition-timing-function: function;
      }
    
  

Nümunə:

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. transition-delay xassəsi

transition-delay xassəsi keçiddən əvvəl gözləmə vaxtını təyin edir.

Sintaksis:

    
      element {
        transition-delay: time;
      }
    
  

Nümunə:

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Keçidlərin müddəti

Keçidin müddəti, bir xüsusiyyətin dəyişimi üçün animasiyanın nə qədər davam edəcəyini müəyyən edir. Bu, saniyələrlə (s) və ya millisaniyələrlə (ms) təyin olunur.

Nümunə:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

Kodun izahı:

• transition: width 2s, height 1s, background-color 500ms: bu təyin edir ki, width xüsusiyyəti üçün keçid 2 saniyə davam edəcək, height üçün - 1 saniyə, background-color üçün isə - 500 millisaniyə.

4.4 Timing funksiyaları

Timing funksiyaları xüsusiyyətin dəyərinin zamanla necə dəyişəcəyini müəyyən edir. Onlar müxtəlif animasiya effektləri yaratmağa imkan verir.

Əsas timing funksiyaları:

• ease: animasiya yavaş başlayır, ortada sürətlənir və sonuna doğru yavaşlayır
• linear: animasiya başlanğıcdan sona qədər sabit sürətlə gedir
• ease-in: animasiya yavaş başlayır və sonra sürətlənir
• ease-out: animasiya tez başlayır və sonra yavaşlayır
• ease-in-out: animasiya həm əvvəl, həm də sonunda yavaş olur, ortada sürətlənir

Nümunə:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

Kodun izahı:

• ease-in-out: əvvəl və sonu yavaş olan hamar keçid
• linear: sabit sürət ilə keçid
• ease: yavaş başlanğıc və sonluqla, ortada sürətlənən keçid