CSS Tool

CSS animatsiya generatori

CSS keyframe animatsiyalarni vizual tarzda jonli ko'rish bilan yarating. 10 ta presetdan tanlang yoki maxsus keyframelar yarating. Davomiylik, vaqt, kechikish va yo'nalishni sozlang. CSS kodini bir zumda nusxalang — 100% bepul.

Jonli ko'rish

Animatsiya presetlari

Animatsiya sozlamalari

Davomiylik1s

Kechikish0s

Vaqt funksiyasi

Takrorlanish soni

Yo'nalish

Maxsus kalit kadrlar

transform:

Yaratilgan CSS

@keyframes vurexAnim {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

.animated-element {
  animation: vurexAnim 1s ease 0s infinite normal;
}

Ko'p beriladigan savollar

CSS animatsiya generatori — bu CSS @keyframes animatsiyalarni qo'lda kod yozmasdan vizual tarzda yaratishga yordam beradigan asbob. Presetlarni tanlash, vaqt va davomiylikni sozlash, keyframelarni tahrirlash va yaratilgan CSS-ni loyihalaringizda foydalanish uchun nusxalash mumkin.

CSS @keyframes animatsiya bosqichlarini belgilaydi. Har bir keyframe animatsiya vaqt chizig'idagi foiz nuqtasini (masalan, 0%, 50%, 100%) va shu nuqtadagi CSS xususiyatlarini ko'rsatadi. Brauzer animatsiyani yaratish uchun bu keyframelar orasida silliq o'tadi.

transform va opacity ishlatadigan CSS animatsiyalar apparat tezlashtirilgan va juda samarali. Ular GPU da ishlaydi va layout qayta hisob-kitoblarini keltirib chiqarmaydi. Eng yaxshi samaradorlik uchun width, height yoki margin xususiyatlarini animatsiya qilishdan saqlaning.

Ha, VUREX CSS animatsiya generatori ro'yxatdan o'tishsiz butunlay bepul. Cheksiz animatsiyalar yarating, keyframelarni sozlang va CSS kodini nusxalang — barchasi brauzeringizda cheklovsiz.