Pulsuz Developer Aləti

CSS Animasiyası İnşaatçı

CSS əsas kadr animasiyalarını vizual olaraq qurun. Animasiyaları real vaxt rejimində nəzərdən keçirin və yaradılan CSS kodunu dərhal kopyalayın.

Önizləmə

Müddət2s

İterasiyalar

Zamanlama funksiyası

İstiqamət

Keyframes

translateX (px)

translateY (px)

fırlanma (dərəcə)

miqyası

qeyri-şəffaflıq

Rəng

translateX (px)

translateY (px)

fırlanma (dərəcə)

miqyası

qeyri-şəffaflıq

Rəng

translateX (px)

translateY (px)

fırlanma (dərəcə)

miqyası

qeyri-şəffaflıq

Rəng

Generated CSS

.animated-element {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  animation-name: my-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
}

@keyframes my-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    transform: translateX(80px) translateY(-40px) rotate(180deg) scale(1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
}

Tez-tez verilən suallar

Yaradılan çıxışı fərdiləşdirə bilərəmmi?

Bəli. Alət, çıxışı xüsusi ehtiyaclarınıza uyğunlaşdırmaq üçün müxtəlif fərdiləşdirmə variantları təqdim edir. Yaratmadan əvvəl parametrləri tənzimləyin və ya müxtəlif seçimlərlə bərpa edin.

Yaradılan məzmundan istifadə etmək pulsuzdurmu?

Bəli. Bu alətlə yaratdığınız hər şey şəxsi, təhsil və ya kommersiya məqsədləri üçün heç bir məhdudiyyət və ya atribusiya tələbləri olmadan istifadə etmək üçün sizindir.

Bunun üçün hesab lazımdır?

Xeyr. Alət qeydiyyatdan keçmədən, e-poçt olmadan və qeydiyyat olmadan dərhal istifadəyə hazırdır. Sadəcə səhifəni açın və yaratmağa başlayın.

Daxiletmə məlumatlarım məxfi saxlanılır?

Bəli. Bütün emal brauzerinizdə baş verir. Daxil etdiyiniz məlumat və yaradılan çıxış heç vaxt heç bir xarici serverə göndərilmir.

CSS Animasiyası İnşaatçı

Önizləmə

Keyframes

Generated CSS

Bu alət haqqında

Necə istifadə etməli

Tez-tez verilən suallar

CSS Animasiyası İnşaatçı

Önizləmə

Keyframes

Generated CSS

Əlaqədar Alətlər

CSS Kiçikləşdirici

CSS Flexbox Layout Generator

CSS Grid Layout Generator

CSS Gradient Generator

Bu alət haqqında

Necə istifadə etməli

Tez-tez verilən suallar

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk