Animasiyaların xüsusiyyətləri

7.1 animation-name xüsusiyyəti

CSS animasiyaları istifadəçi interfeysini yaxşılaşdıran və onu daha interaktiv edən dinamik və rəvan vizual effektlər yaratmağa imkan verir. Animasiyanın xüsusiyyətləri ad, müddət, timing function və gecikmə kimi animasiyanın müxtəlif aspektlərini idarə etməyə imkan verir. İndi bu xüsusiyyətləri ətraflı nəzərdən keçirəcəyik və onların necə istifadə ediləcəyini göstərəcəyik.

animation-name xüsusiyyəti elementə tətbiq olunacaq animasiyanın adını müəyyən edir. Ad @keyframes qaydasında təyin olunan ada uyğun olmalıdır.

Sintaksis:

    
      element {
        animation-name: animation-name;
      }
    
  

Harada:

• animation-name: @keyframes-də müəyyən edilən animasiyanın adı

Nümunə:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

Kodun izahı:

• @keyframes moveRight: moveRight adlı animasiyanı müəyyən edir, bu animasiya elementi sağa hərəkət etdirir
• .box: moveRight animasiyası tətbiq olunan element

7.2 animation-duration Xüsusiyyəti

animation-duration xüsusiyyəti animasiyanın davametmə müddətini təyin edir. Dəyər saniyələrlə (s) və ya millisaniyələrlə (ms) göstərilir.

Syntax:

    
      element {
        animation-duration: time;
      }
    
  

Harada:

• time: animasiyanın davametmə müddəti (məsələn, 2s iki saniyə üçün və ya 500ms 500 millisaniyə üçün).

Nümunə:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

Kodun İzahı:

• animation-duration: 2s: moveRight animasiyasının davametmə müddətini 2 saniyə olaraq təyin edir

7.3 animation-timing-function xüsusiyyəti

animation-timing-function xüsusiyyəti animasiyanın zamanla dəyişmə sürətini müəyyən edir. Bu, sürətlənmə, yavaşıma və s. kimi müxtəlif animasiya effektləri yaratmağa imkan verir.

Yazılış Qaydası:

    
      element {
        animation-timing-function: function;
      }
    
  

Burada:

• 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)

Nümunə:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Kodun izahı:

• animation-timing-function: ease-in-out: moveRight animasiyası üçün timing funksiyasını təyin edir, animasiyanı hamar edir, yavaş başlanğıc və sonla, orta hissədə sürətlənmə ilə

Əsas timing funksiyaları:

• ease: animasiya yavaş başlayır, orta hissədə sürətlənir və sonda yenidən yavaşlayır
• linear: animasiya başlanğıcdan sona qədər sabit sürətlə davam edir
• ease-in: animasiya yavaş başlayır və sonra sürətlənir
• ease-out: animasiya sürətli başlayır və sonra yavaşlayır
• ease-in-out: animasiya yavaş başlayır və bitir, orta hissədə isə sürətlənir

7.4 animation-delay xüsusiyyəti

animation-delay xüsusiyyəti animasiyanın başlamasından əvvəlki gecikməni təyin edir. Dəyər saniyə (s) və ya millisekund (ms) olaraq göstərilir.

Syntax:

    
      element {
        animation-delay: time;
      }
    
  

Burada:

• time: animasiyanın başlamasından əvvəlki gecikmə (məsələn, 1s bir saniyə üçün və ya 500ms 500 millisekund üçün)

Nümunə:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Kodun izahı:

• animation-delay: 1s: moveRight animasiyasının başlamasından əvvəl 1 saniyəlik gecikmə təyin edir