CSS Animasyonları, web sitelerinde kullanılan bir tekniktir Bu animasyonlar sayesinde öğeler hareketlendirilebilir ve siteler daha dinamik hale getirilebilir Transition, Transform ve Keyframe Animasyonları gibi farklı türler vardır Bu animasyonlar sayesinde geçişler daha estetik hale getirilebilir ve öğelerin dönme, büyüme veya küçülme gibi hareketleri sağlanabilir Transform Animasyonları özellikle 3D Rotate Animasyonları ile web sitelerine estetik bir görünüm kazandırılır

CSS Animasyonları, web sitelerinde bulunan farklı öğelerin daha ilgi çekici ve dinamik hale getirilmesi için kullanılan bir tekniktir. Bu teknik sayesinde, web sitelerindeki yazılar, resimler ve görsel öğeler gibi birçok öğe hareketlendirilebilir. Tasarımcılar ve geliştiriciler, bu animasyonları kullanarak daha iyi ve etkili web siteleri oluşturabilirler.

CSS Animasyonları, birden çok farklı tekniği içerir. Örneğin, Transition (Geçiş) Animasyonları, Transform (Dönüşüm) Animasyonları ve Keyframe (Anahtar Çerçeve) Animasyonları gibi birçok farklı seçenek mevcuttur. Her animasyon seçeneği, farklı bir özellik gösterir. Transition Animasyonları, öğeler arasındaki değişikliklerin sürekli olarak gerçekleşmesini sağlar. Transform Animasyonları ise öğelerin dönmesi, büyütülmesi veya küçültülmesi gibi şekillenme hareketleri için kullanılır. Keyframe Animasyonları ise öğelerin belirli anda belirli bir noktada hareket etmesini sağlar.

Bunların yanı sıra, animasyon özellikleri de CSS'in bir parçasıdır ve bir animasyon tasarlanırken kullanılırlar. animation-name, animation-duration, animation-timing-function, animation-delay ve animation-iteration-count gibi özellikler, animasyonların özelliklerini belirlemek için kullanılır. Animation Name, bir sınıfın animasyonunu adlandırmak ve çağırmak için kullanılırken, animation-duration, bir animasyonun ne kadar süreceğini belirlemek için kullanılır. Animation Timing Function, bir animasyonun ne kadar hızlı veya yavaş hareket edeceğini belirlemek için kullanılır. Animation Delay ise, bir animasyonun ne zaman başlayacağını belirlerken, Animation Iteration Count bir animasyonun kaç kez tekrarlanacağını belirlemektedir.

Transition (Geçiş) Animasyonları

CSS Animasyonları, web sitelerinde öğelerin hareketlendirilmesi ve görsel açıdan daha çekici hale getirilmesi için sıklıkla kullanılan bir tekniktir. Bu animasyonların birçok türü vardır ve Transition Animasyonları, öğeler arasındaki değişikliklerin sürekli olarak gerçekleşmesini sağlayan bir animasyon türüdür.

Bu animasyon türü, öğelerin farklı durumlar arasında geçiş yaparken akıcı bir şekilde hareket etmesini sağlar. Bu geçişler sırasında öğelerin yavaşça kaybolması veya görünür hale gelmesi gibi farklı etkiler kullanılabilir. Transition Animasyonları ile öğeler arasındaki geçiş daha estetik bir hale getirilebilir ve web sayfası kullanıcılarına daha iyi bir deneyim sunabilir.

Transform (Dönüşüm) Animasyonları

CSS Animasyonları, web sitelerinde görsel olarak etkileyici bir görüntü yaratmak için en etkili yöntemler arasında yer alır. Bu teknik, Transition Animasyonları ve Transform Animasyonları olmak üzere iki kategori altında incelenir. Transform Animasyonları, öğelerin dönmesi, büyütülmesi veya küçültülmesi gibi şekillenme hareketleri için kullanılır. Bu animasyon türü iki farklı alt kategoriye ayrılır: 2D Rotate Animasyonları ve 3D Rotate Animasyonları.

2D Rotate Animasyonları, öğelerin yalnızca iki boyutlu olarak dönmesini sağlar. Bu tür dönüşüm animasyonları genellikle bir resim veya logonun döndürülmesi gibi basit ama etkileyici hareketler için kullanılır. Öte yandan, 3D Rotate Animasyonları kompleks 3 boyutlu nesnelerin dönmesini sağlar, bu tür animasyonlarla bir sayfanın tam ekran içeriği gibi gösterişli animasyonlar oluşturmak mümkündür.

Ayrıca, Transform Animasyonları sadece öğelerin dönmesi ile sınırlı değildir. Scale Animasyonları, bir öğenin boyutunu büyütüp veya küçültme hareketi yapmasını sağlar. Bu tür animasyonların kullanımı, kullanıcıların özellikle mobil cihaz kullanımında her türlü ekran boyutunda güzel bir görüntü elde etmesine yardımcı olur.

Toparlayacak olursak, CSS Animasyonlarının Transform Animasyonları kategorisi, web sitelerine estetik ve kullanıcı dostu bir görünüm kazandırmak için çok önemlidir. Şekillenme hareketleri, web sitesindeki öğelerin hareketini ve kullanıcıların ilgisini çekerek daha etkili bir deneyim sağlar.

Rotate (Döndürme) Animasyonları

Rotate Animasyonları, CSS Animasyonları teknikleri arasında oldukça popülerdir. Bu animasyonlar, web sitelerindeki öğeleri ekseni etrafında döndürmek için kullanılır.

Bir öğenin dönüş açısını ayarlamak için transform özelliği kullanılır. Örneğin, öğeyi 90 derece döndürmek için "transform:rotate(90deg)" kodunu kullanabilirsiniz.

Rotate Animasyonları, 2 boyutlu ve 3 boyutlu olarak kullanılabilir. 2D Rotate Animasyonları, öğelerin yalnızca 2 boyutlu olarak dönmesini sağlar. 3D Rotate Animasyonları ise öğelerin 3 boyutlu olarak dönmesini sağlar. 3D Rotate Animasyonları, öğelerin daha gerçekçi ve canlı görünmesini sağlar.

Rotate Animasyonları, web sitelerinde görsel açıdan etkileyici bir efekt yaratmak için kullanılabilir. Örneğin, bir menü öğesini fare imlecine göre hareket ettiren bir animasyon oluşturarak sitenize dinamizm katabilirsiniz.

3D Rotate Animasyonları

3D Rotate Animasyonları, CSS Animasyonları teknikleri arasında öğelerin 3 boyutlu olarak dönmesini sağlar. Bu animasyonlar ile, öğelerin yüzeyinde 3D hareket efektleri elde edilebilir. Bu, özellikle ürün sayfalarında veya vitrinlerde kullanıldığında önemlidir.

Bir 3D Rotate Animasyonu oluşturmak için, transform özelliği kullanılır. Bu özelliğin rotateX, rotateY ve rotateZ değerleri, şekillerin belirli eksenlerde döndürülmesini sağlar. Örneğin, rotateX(180deg) değeri, bir şeklin X ekseninde 180 derece dönmesini sağlar, böylece yüzeyi veya gölgesi ters çevrilir.

Özellik	Açıklama
rotateX()	X ekseninde döndürme
rotateY()	Y ekseninde döndürme
rotateZ()	Z ekseninde döndürme

Bu özelliklerin kullanımıyla, öğelerin ön, arka, sol ve sağ yüzleri arasında geçiş etkisi yaratabilirsiniz. Örneğin, bir kutunun 3D dönüşü, zeminde bir topun sekmesi, bir yıldızın havada dönmesi gibi etkiler elde edebilirsiniz.

2D Rotate Animasyonları

2D Rotate Animasyonları, CSS Animasyonları teknolojisi içinde en basit animasyon türüdür. Bu animasyon türü, öğelerin sadece 2 boyutlu olarak dönmesini sağlar. Birçok internet sitesinde menü seçenekleri veya logo gibi görseller 2 boyutlu tasarlandığından, 2D Rotate Animasyonları bu tür öğelerin dikkat çekiciliğini arttırmada oldukça etkilidir.

Bir öğenin 2D Rotate Animasyonu, aşağıdaki özelliklerin kullanımına dayanır:

Özellik	Açıklama
transform: rotate(90deg);	Öğenin dönme yönünü belirler. Bu örnekte, 90 derece döndürülür.
transition: transform 1s;	Öğenin dönme hareketi için süreyi belirler. Bu örnekte, 1 saniye süreli bir dönüş gerçekleşir.

Yukarıdaki özellikler, öğelere 2D Rotate Animasyonu eklemek için kullanılır. Özelliklerin değerleri özelleştirilebilir ve animasyonun daha etkileyici olmasına yardımcı olabilir. CSS Animasyonları teknolojisi, web sitelerinin görsel açıdan daha çekici olmasına yardımcı olur ve 2D Rotate Animasyonları, web sitelerindeki statik görsellerin daha dinamik bir hale getirilmesinde oldukça etkilidir.

Scale (Ölçeklendirme) Animasyonları

CSS Animasyonları, web sitelerinde hareketli öğeler oluşturmak için kullanılan bir tekniktir. Bu animasyonlar, öğelerin yerlerinde ve şekillerinde değişiklikler yaparak hareket sağlar. Scale (Ölçeklendirme) Animasyonları ise bir öğenin boyutunu büyütüp veya küçültme hareketi yapmasını sağlar.

Bu animasyonlar, öğelerin boyutlarında belirli bir oranda değişiklik yaparak gerçekleştirilir. Örneğin, bir butonun boyutları hareketli bir şekilde değiştirilebilir. Bunun için animation-duration özelliği kullanılarak belirli bir zaman aralığında animasyon gerçekleşebilir.

Bunun yanı sıra, animasyonlarınızı daha da belirgin hale getirmek isterseniz, opacity özelliğiyle birlikte kullanarak öğenin hem boyutunu hem de şeffaflık seviyesini değiştirebilirsiniz.

Aşağıdaki örnekte, bir butonun boyutunun yavaş yavaş büyütülmesi sağlanmıştır:

Buton

Yukarıdaki örnek kodda, animation-name özelliği ile animasyonun adı belirtilmiş, animation-duration özelliği ile animasyonun süresi belirlenmiş, animation-timing-function özelliği ile animasyonun hızlanma ve yavaşlama durumları belirtilmiş ve animation-iteration-count özelliğiyle kaç kez animasyonun yinelenmesi gerektiği belirtilmiştir.

Bu şekilde Scale Animasyonları ile birlikte diğer CSS Animasyonları özelliklerini kullanarak web sitenizde dinamik ve dikkat çekici öğeler oluşturabilirsiniz.

Keyframe (Anahtar Çerçeve) Animasyonları

Keyframe Animasyonları, CSS animasyonlarında kullanılan çok önemli bir tekniktir. Tam olarak defalarca yinelenen animasyonların ardından geldiğinde, belirli anda belirli bir noktada öğelerin hareket etmesini sağlar. Bir animasyon oluşturulurken, belirli bir animasyon ismi verilir. Bu animasyon ismi daha sonra animasyon adıyla birlikte kullanılır, böylece kodlama daha okunaklı hale gelir. Öğelerin hareketleri, belirgin ve mükemmel bir şekilde gerçekleşir.

Bu animasyonlar, öğelerin sadece X ve Y eksenlerinde hareket etmesiyle sınırlı değildir. Tamamen basit doğrusal hareketler yerine, animasyonun istenilen yönü ve yolu belirlenerek kompleks hareketler elde edilebilir. Bu tür animasyonlar, hareketlerinin basit görünümü nedeniyle oldukça popülerdir. Animasyonlar için belirli adımların belirlenmesiyle oluşturulurlar ve bu adımlar birbirini takip ederek tamamlanır.

Opacity (Şeffaflık) Animasyonları

Opacity Animasyonları, bir öğenin şeffaflık seviyesinin düzenlenmesiyle gerçekleşen animasyonlardır. Yani, bir elementin saydamlığını ayarlayarak, saydam hale gelip görünür hale geçişini kontrol edebilirsiniz. CSS'te bu özelliği kullanarak, öğenin görünümünü değiştirebilir ve bu değişiklikleri animasyonlu bir şekilde gerçekleştirebilirsiniz.

Bunun bir örneği, bir metni yavaşça gözden kaybolmasını sağlamak için kullanılabilir. Örneğin, "Hoş Geldiniz" yazılı bir hizmet sayfasının saydam ve yavaşça kaybolması, kullanıcının sayfanın geri kalanını daha rahat bir şekilde görmesine ve önemli bilgileri daha kolay okumasına yardımcı olabilir.

Sözdizimi	Açıklama
opacity:	Bir elementin saydamlığını belirler. 0 ile 1 arasında bir değer alabilir. 0, elementin tamamen saydam olduğu anlamına gelirken, 1 elementin tamamen görünür olduğu anlamına gelir.
transition:	Bir öğenin geçiş animasyonlarını ayarlar. Bu özellik, geçiş durumunda olan elemanların yeni özelliklerinin belirtilmesini sağlar.

Aşağıdaki örnek, bir resmin yavaşça görünürlüğünü artıran bir opacity animasyonu gösterir:

• İlk olarak, resmin opacity özelliği %0'a ayarlanır
• Hover özelliği eklendiğinde, opacity özelliği %100'e yavaşça artar
• Mouse out özelliği eklendiğinde, opacity özelliği yavaşça %0'a geri döner

Bu örnekte, opacity özelliği yavaşça değiştirildiği için animasyonlu bir geçiş gerçekleşiyor. Bu, kullanıcının resmin yavaşça görünümünü artırarak fark etmesine ve belirli bir efekt oluşturan güzel bir animasyonlu görüntülemeye neden olabilir.

Color (Renk) Animasyonları

CSS Animasyonları, web sitelerindeki öğelerin hareketini sağlamak için kullanılan tekniklerdir. Transition Animasyonları öğeler arasındaki değişikliklerin sürekli olarak gerçekleşmesini sağlarken, Transform Animasyonları öğelerin dönmesi, büyütülmesi veya küçültülmesi gibi şekillenme hareketleri için kullanılır.

Bunların yanı sıra, Color Animasyonları da öğelerin rengini değiştirerek gerçekleşen animasyonlardır. Özellikle, elementlerin açık-kapalı geçişlerinde veya renkli metinlerde kullanılır. Bunun için CSS'te background-color veya color özellikleri kullanılarak animasyonlar oluşturulabilir. Ayrıca, renk geçişleri de kullanıcının dikkatini çekmek ve görsel açıdan hoş bir deneyim sağlamak için etkilidir.

Color Animasyonları, CSS'teki bazı özellikler ile oluşturulabilir. Örneğin, animation-duration özelliği animasyonun ne kadar süreceğini belirlerken, animation-timing-function özelliği animasyonun hızını ayarlar. Ayrıca, animation-delay özelliği animasyonun ne zaman başlayacağını belirlerken, animation-iteration-count özelliği animasyonun kaç kez yinelenmesi gerektiğini belirler.

Bir örnek olarak, aşağıdaki kod ile bir öğenin background rengi animasyonla değiştirilebilir:

selector	animation-name	animation-duration	animation-timing-function	animation-delay	animation-iteration-count
div	color_animation	2s	linear	0s	infinite

Bu kodda, div seçici ile belirtilen öğenin color_animation adlı bir animasyonu vardır. animation-duration özelliği 2 saniye, animation-timing-function özelliği linear olarak ayarlanırken, animation-delay özelliği 0 saniye olarak belirlendi. Son olarak, öğenin background rengi sonsuz kez (infinite) değiştirilecektir.

Color Animasyonları, kullanıcıların web sayfalarında daha çok zaman geçirmelerini sağlayabilecek etkili bir görsel araçtır. Ancak, abartılı veya çok hızlı animasyonlar, kullanıcıların web sitesinden hızla ayrılmasına neden olabilir. Bu nedenle, animasyonların dikkatli bir şekilde planlanması gereklidir.

Animation (Animasyon) CSS Özellikleri

CSS Animasyonları, web sitelerinde özellikle şekilleri, yazıları ve diğer öğeleri hareketlendirmek için sıkça kullanılan bir tekniktir. Bu teknik sayesinde site ziyaretçileri için hareketli ve etkileyici bir deneyim sunulabilir. Bu animasyonlar, kullanılan işlevlere göre farklı çeşitlere ayrılır. Bunlardan biri Transition Animasyonlarıdır. Transition Animasyonları, öğeler arasındaki değişikliklerin sürekli olarak gerçekleşmesini sağlar.

Bir diğer animasyon türü Transform Animasyonlarıdır. Bu animasyonlar ise öğelerin dönmesi, büyütülmesi veya küçültülmesi gibi şekillenme hareketleri için kullanılır. Transform Animasyonları içinde yer alan Rotate Animasyonları, bir öğeyi ekseni etrafında döndürmek için kullanılır. Bu animasyonlar 3 boyutlu olarak yapılabildiği gibi yalnızca 2 boyutlu olarak da gerçekleştirilebilir. Ölçeklendirme hareketleri için kullanılan Scale Animasyonları ise bir öğenin boyutunu büyütüp veya küçültmesine olanak tanır.

CSS Animasyonları içinde yer verilen bir diğer tür ise Keyframe Animasyonlarıdır. Bu animasyonlar da öğelerin belirli anda belirli bir noktada hareket etmesini sağlar. Bu animasyonlar içinde yer alan Opacity Animasyonları ise bir öğenin şeffaflık seviyesinin düzenlenmesiyle gerçekleşen animasyonlardır. Bir öğenin rengini değiştirerek gerçekleşen animasyonlar ise Color Animasyonları olarak adlandırılır.

CSS Animasyonları için kullanılan bazı özellikler şunlardır: animation-name, animation-duration, animation-timing-function, animation-delay ve animation-iteration-count. Animation Name özelliği, belirli bir sınıfın animasyonunu adlandırmak için kullanılır. Animation Duration ile bir animasyonun ne kadar süreceği belirlenirken, Animation Timing Function ile bir animasyonun ne kadar hızlı veya yavaş hareket edeceği belirlenebilir. Animation Delay ile bir animasyonun ne zaman başlayacağı belirlenirken, Animation Iteration Count ile de bir animasyonun kaç kez yinelenmesi gerektiği belirlenebilir.

CSS Animasyonları sayesinde web siteleri daha canlı ve etkileyici hale gelebilir. Bu animasyonlar, sayfaları daha hareketli ve daha çekici hale getirerek ziyaretçilerin ilgisini çekebilir. Ancak her zaman için doğru şekilde kullanmak, sayfaların aşırı yavaşlamasına veya göz yorulmasına neden olmamak için önemlidir.

Animation Name (Animasyon İsmi)

CSS Animasyonları, web sitelerindeki öğeleri hareketlendirmek için kullanılan bir tekniktir. Bu teknik, öğeleri hareketli hale getirerek web sayfalarına görselliği ve interaktifliği eklemekte kullanılır. Animasyon İsmi (Animation Name) CSS özelliği, belirli bir sınıfın animasyonunu adlandırmak için kullanılır.

Bu özellik, belirli bir sınıfa bir animasyon adı vererek animasyonu CSS kodunda kullanmayı sağlar. Böylece, birden fazla animasyonu yönetmek için CSS kodunda kullanılan animasyon ismi, animasyonları kolayca yönetilebilir ve takip edilebilir kılar.

Animation Name özelliği, keyframe animasyonları ve transition animasyonlarında kullanılır. Keyframe animasyonları, animasyonun belirli bir süre içinde belirli bir yörünge boyunca hareket etmesini sağlar. Transition animasyonları ise öğeler arasındaki değişikliklerin sürekli olarak gerçekleşmesini sağlar. Bu özellikleri kullanarak birden fazla animasyonu yönetmek oldukça kolay hale gelir.

Aşağıdaki tablo, Animation Name özelliğini farklı özellikler ile birlikte kullanımı göstermektedir:

Özellik	Açıklama
animation-name	Bir animasyonun adını belirler
animation-duration	Bir animasyonun süresini belirler
animation-timing-function	Bir animasyonun zamanlama fonksiyonunu belirler
animation-delay	Bir animasyonun gecikmesini belirler
animation-iteration-count	Bir animasyonun yineleme sayısını belirler

Animation Name özelliği, CSS animasyonları oluştururken oldukça önemli bir özelliktir. Bu özellik sayesinde animasyonların yönetimi kolaylaşır ve kodlar daha okunaklı hale gelir.

Animation Duration (Animasyon Süresi)

CSS Animasyonları, web sitelerinin daha etkileyici hale gelmesi için kullanılan önemli bir tekniktir. Bu teknikte animasyonların süresi ve diğer özellikleri değiştirilerek farklı efektler elde edilebilir. İşte, animasyon süresini belirlemek için kullanılan özellikler:

• Animation-duration: Bu özellik, bir animasyonun ne kadar süreceğini belirler. Saniye veya milisaniye cinsinden belirtilir. Örneğin, "2s" veya "100ms" gibi.
• Animation-delay: Bu özellik, bir animasyonun ne zaman başlayacağını belirler. Yine saniye veya milisaniye cinsinden belirtilir. Örneğin, "1s" veya "500ms" gibi.
• Animation-fill-mode: Bu özellik, animasyonun başlangıç veya bitiş durumunu belirler. Örneğin, "forwards" (son durumda kalmasını sağlar) veya "backwards" (ilk duruma geri dönmesini sağlar) gibi.

Anlamak için basit bir örnek vermek gerekirse, bir öğenin animasyon süresi 4 saniye olarak ayarlanmış olsun. Bu öğenin animasyonu tamamlanmadan önce 2 saniye sonra animasyon fill mode özelliği "forwards" olarak ayarlanmış olsun. Bu durumda, animasyon bitince öğenin son durumu, animasyonun başlangıç durumu yerine, animasyonun son durumu olacaktır.

Animation Timing Function (Animasyon Timingleme Fonksiyonu)

Animation Timing Function, yani animasyon timingleme fonksiyonu, bir animasyonun ne kadar hızlı veya yavaş hareket edeceğini belirlemekte kullanılır. Bu özellik, CSS Animasyonları için oldukça önemlidir.

Animasyon Timing Function özelliği, 0 ile 1 arasındaki değerleri alır. Bu değerler, animasyonun hızını yakalamak için kullanılır. Örneğin, yavaş bir başlangıç için ease-in, hızlı bir bitiş için ease-out ve hem yavaş hem de hızlı hareket için ease-in-out tercih edilebilir.

Ayrıca, Animasyon Timing Function özelliği ile ilgili olarak beş farklı fonksiyon tipi kullanılabilir: linear, ease, ease-in, ease-out ve ease-in-out. Linear fonksiyonu, herhangi bir yavaşlama veya hızlanma olmadan sabit bir hızda ilerleme sağlar. Ease fonksiyonu, hafif bir yavaşlatma efekti ile başlangıç hızını ayarlar. Ease-in fonksiyonu ise hızlanma efektiyle son hızda ilerlemeyi aktive eder. Ease-out fonksiyonu, yavaşlama efektiyle ani bir bitiş hızı ayarlarken, ease-in-out fonksiyonu ise hem hızlanma hem de yavaşlama efektleri sağlayarak en dengeli hareketleri sunar.

Bu Animasyon Timing Function fonksiyonları, animasyonlarınızı daha gerçekçi ve hızlı bir şekilde hareket ettirmenize yardımcı olur. Bu CSS Animasyon özellikleri ile birlikte, web sitelerinizdeki animasyonlar daha canlı ve ilgi çekici hale gelir.

Animation Delay (Animasyon Gecikmesi)

CSS Animasyonları teknolojisi, web sitelerinde öğelerin hareketlenmesi için kullanılan bir tekniktir. Bu teknolojide kullanılan özellikler, Transition Animasyonları, Transform Animasyonları ve Keyframe Animasyonlarıdır. Animasyon Delay özelliği, animasyonların ne zaman başlayacağını belirlemek için kullanılan bir özelliktir. Bu özellik sayesinde animasyonların birbiriyle eş zamanlı çalışması engellenir.

Animasyon Delay özelliği, transition-delay veya animation-delay olarak kullanılabilir. Bu özellik, animasyonların ne zaman başlayacağına karar verir. Bu özellik kullanılarak animasyonların birbirinden bağımsız olarak çalışması sağlanır. Örneğin, bir sayfanın yüklenmesinden sonra belirli bir süre sonra bir animasyon başlatılabilir ya da başka bir animasyon tamamlanmadan önce başka bir animasyonun başlatılması engellenebilir.

Animasyon Delay özelliği, kullanıcılara web sitesi tasarımları için daha fazla esneklik sunar. Bu özellik, animasyonlar arasında beklememesi gereken bir sıra olduğunda oldukça kullanışlı hale gelir. Animasyonlar arasında uygun bir süre aralığı oluşturarak, kullanıcıların web sitesinin kullanımını daha rahat hale getirmeyi hedefler.

Animation Iteration Count (Animasyon Yineleme Sayısı)

Animation Iteration Count (Animasyon Yineleme Sayısı) özelliği, bir animasyonun kaç kez yinelenmesi gerektiğini belirlemek için kullanılır. Bu özellik, öğenin animasyonunu sıfır veya daha fazla kez yinelenen durumlarda kullanılır.

Örneğin, eğer bir öğenin animasyon iterasyon sayısı 3 olarak belirlenirse, o animasyon 3 kez yinelenir ve durur. Ancak, bu sayı sonsuz olarak da ayarlanabilir, böylece animasyon yinelenmeye devam eder.

Bunun için, animation-iteration-count özelliği kullanılır ve bu özellik 'infinite' ayarıyla sonsuz döngü yapabilir.

Ayrıca, belirli bir süre boyunca sınırsız animasyon yürütmek isteyen bir animasyoncuysanız, animation-iteration-count özelliği kullanmanız gerekebilir. Bu durumda, animasyon süresi boyunca animasyon yinelemesi devam eder ve sonunda durur.

HTML formatında yazılan kodlarda bu özelliğin kullanımı şu şekildedir;

```cssdiv { animation-name: example; animation-duration: 3s; animation-iteration-count: 3;}

@keyframes example { from {background-color: red;} to {background-color: yellow;}}```

Yukarıdaki kod bloğunda, animation-iteration-count özelliği 3 kez yinelenir. Böylece, öğenin arka plan rengi her bir tepede kırmızıdan sarıya geçer.