CSS3 Geçiş Jeneratörü

Yumuşak opaklık geçişi

Popüler Ön Ayarlar

Solma Efekti

Yumuşak opaklık geçişi

Ölçek Etkisi

Fareyle üzerine gelindiğinde öğeyi yeniden boyutlandırma

Döndürme Efekti

Fareyle üzerine gelindiğinde öğeyi döndür

Slayt Efekti

Eleman konumunu taşıma

Renk Değişimi

Arka plan rengi geçişi

Geçişler Hakkında

CSS geçişleri, özellik değerlerini belirli bir süre boyunca sorunsuz bir şekilde değiştirmenize olanak tanır.

Yaygın olarak animasyonlu özellikler şunları içerir:

  • genişlik, yükseklik
  • kenar boşluğu, dolgu
  • opaklık, renk
  • transform (scale, rotate, translate)
  • background-color

Profesyonel İpucu: Tüm değişiklikleri canlandırmak için 'Tüm Özellikler' seçeneğini kullanın.

Preview

HOVER ME

Oluşturulan Kod

.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; }  .element:hover { /* Hover styles will be generated here */ }

Geçiş Kontrolleri

300
0

Fareyle Üzerine Gelme Efektleri

100%
100%
0px
0px
8px
8px

Related Tools