X
Ankara Web Tasarim
Anasayfa --- Css --- CSS Animation Nedir?

Yazar: 16 Haziran 2023

CSS Animation Nedir?

CSS Animation, web sayfalarında hareketli ve canlı içerikler oluşturmak için kullanılan bir CSS özelliğidir. CSS Animation, CSS3 ile birlikte tanıtılmıştır ve tarayıcılar tarafından desteklenen birçok animasyon efektini uygulamak için kullanılabilir.

CSS Animation’ın bazı temel bileşenleri şunlardır:

  1. Keyframes (Anahtar Kareler): Keyframes, bir animasyonun başlangıç, orta ve bitiş noktalarını belirlemek için kullanılan karelerdir. Her bir keyframe’de, öğenin nasıl görüneceği ve hangi özelliklerinin değişeceği belirtilir.
  2. Animation Properties (Animasyon Özellikleri): Animasyonun nasıl çalışacağını belirlemek için kullanılan özelliklerdir. Bazı yaygın kullanılan animasyon özellikleri şunlardır:
  • animation-name: Kullanılacak keyframes’i belirler.
  • animation-duration: Animasyonun tamamlanması için geçen süreyi belirler.
  • animation-timing-function: Animasyonun zamanlamasını ve hızını belirler.
  • animation-delay: Animasyonun başlaması için beklemesi gereken süreyi belirler.
  • animation-iteration-count: Animasyonun kaç kez tekrarlanacağını belirler.
  • animation-direction: Animasyonun oynatma yönünü belirler.
  1. Transition Effects (Geçiş Efektleri): Animasyonun başlangıcından bitişine kadar olan geçiş sürecini kontrol etmek için kullanılır. Örneğin, bir öğenin yavaşça görünmesini veya kaybolmasını sağlamak için geçiş efektleri kullanılabilir. Önemli geçiş özellikleri şunlardır:
  • transition-property: Geçiş efektinin uygulanacağı özellikleri belirler.
  • transition-duration: Geçişin tamamlanması için geçen süreyi belirler.
  • transition-timing-function: Geçişin nasıl hızlandırılıp yavaşlatılacağını belirler.
  • transition-delay: Geçişin başlaması için beklemesi gereken süreyi belirler.

CSS Animation, öğelerin konumlarını, boyutlarını, renklerini, opaklıklarını ve diğer özelliklerini değiştirerek çeşitli animasyon efektlerini oluşturabilir. Web sayfalarına hareket, canlılık ve kullanıcı deneyimini artıran etkileyici görsel öğeler eklemek için CSS Animation sıklıkla kullanılmaktadır.

Daha karmaşık animasyonlar ve interaktif efektler için CSS Animasyonun yanı sıra JavaScript veya CSS kütüphaneleri de kullanılabilir.

Daha Fazla Bilgi İçin Web Tasarım Ankara Ekibimizle İletişime Geçebilirsiniz.