Ücretsiz Geliştirici Aracı

CSS Animasyonu İnşaatçı

Görsel olarak CSS ana kare animasyonları oluşturun. Animasyonları gerçek zamanlı olarak önizleyin ve oluşturulan CSS kodunu anında kopyalayın.

Önizleme

Süre2s

Yinelemeler

Zamanlama Fonksiyonu

Yön

Keyframes

tercümeX (px)

çevirY (px)

döndür (derece)

ölçek

opaklık

Renk

tercümeX (px)

çevirY (px)

döndür (derece)

ölçek

opaklık

Renk

tercümeX (px)

çevirY (px)

döndür (derece)

ölçek

opaklık

Renk

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;
  }
}

Sık sorulan sorular

Oluşturulan çıktıyı özelleştirebilir miyim?

Evet. Araç, çıktıyı özel ihtiyaçlarınıza göre uyarlamak için çeşitli özelleştirme seçenekleri sunar. Oluşturmadan önce ayarları yapın veya farklı seçeneklerle yeniden oluşturun.

Oluşturulan içeriğin kullanımı ücretsiz mi?

Evet. Bu araçla oluşturduğunuz her şey, herhangi bir kısıtlama veya atıf zorunluluğu olmaksızın kişisel, eğitimsel veya ticari amaçlarla kullanabilirsiniz.

Bu bir hesap gerektiriyor mu?

Hayır. Araç herhangi bir kaydolma, e-posta gönderme ve kaydolma gerekmeden anında kullanıma hazırdır. Sadece sayfayı açın ve üretmeye başlayın.

Giriş verilerim gizli tutuluyor mu?

Evet. Tüm işlemler tarayıcınızda gerçekleşir. Giriş verileriniz ve oluşturulan çıktınız hiçbir zaman herhangi bir harici sunucuya gönderilmez.

CSS Animasyonu İnşaatçı

Önizleme

Keyframes

Generated CSS

Bu araç hakkında

Nasıl kullanılır

Sık sorulan sorular

CSS Animasyonu İnşaatçı

Önizleme

Keyframes

Generated CSS

İlgili Araçlar

CSS Küçültücü

CSS Esnek Kutusu Düzen Oluşturucu

CSS Izgarası Düzen Oluşturucu

CSS Gradyanı jeneratör

Bu araç hakkında

Nasıl kullanılır

Sık sorulan sorular

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