CSS, web sitelerindeki görsel elementlerin boyutlarını ve şekillerini değiştirmek için kullanılan bir teknolojidir Bu değişiklikler yapılırken, sitenin hızı ve etkileşimli olması önemlidir CSS, estetik açıdan da görsel bir zenginlik sunar
Shape Transformation özelliği, nesnelere farklı şekiller verebilmek için kullanılır Border Radius özelliği, kutuların kenarlarına yuvarlaklık vermek için kullanılırken, Transform özelliği 2 boyutlu ve 3 boyutlu dönüşümler yapmak için kullanılabilir Rotate, nesneleri belirli yönlerde döndürmek için kullanılır Ölçeklendirme, nesnelerin boyutlarını değiştirmek için kullanılır Kırpma ve kaydırma, belirli bir alanı gizlemek veya kaydırmak için kullanılır
Perspektif ve perspektif bağlantısı özellikleri, 3 boyutlu nesneleri oluşturmak için kullanılır Dönüşüm geçişleri ve anim

CSS, web sitelerindeki görsel elementlerin şekillerini ve boyutlarını değiştirmek için kullanılır. Bu değişiklikleri yaparken dikkat edilmesi gereken nokta, web sitesinin etkileşimli ve hızlı olmasıdır. CSS, site hızını korurken aynı zamanda estetik açıdan da görsel bir zenginlik sunar.

CSS ile şekil dönüşümleri yapmak için birbirinden farklı özellikler kullanılabilir. Bunlardan biri Border Radius özelliği olup, kutuların kenarlarına yuvarlaklık vermek için kullanılır. Transform özelliği ise 2 boyutlu ve 3 boyutlu dönüşümleri CSS ile oluşturmak için kullanılır. Bu özellik sayesinde, nesneler hem döndürülebilir hem de boyutları değiştirilebilir.

Dönüştürme işlemlerinde kullanılan Rotate özelliği, nesneleri arzu edilen derece ve yönlerde döndürmek için kullanılır. Tek bir ekseni etrafında döndürmenin yanı sıra X ve Y eksenleri etrafında da döndürülebilir. 3D Dönüşümler özelliği ise X, Y ve Z eksenleri etrafında üç boyutlu dönüşümler oluşturmak için kullanılır.

Ölçeklendirme özelliği, nesneleri büyültmek veya küçültmek için kullanılır. Bu özellik ile nesne boyutlarına göre doğru orana sahip olarak büyütülüp küçültülebilir. Kırpma ve Kaydırma özelliği ise belirli bir alanı dışarıda bırakmak veya sayfayı kaydırmak için kullanılır. Bu özellik ile belirli bir alanda gösterilmesi istenen kısımlar belirlenir ve diğer kısımlar gizlenebilir.

Perspektif ve Perspektif Bağlantısı özellikleri, 3 boyutlu nesneleri kusursuz bir şekilde oluşturmak için kullanılır. Perspektif özelliği, 3 boyutlu cisimlerin 2 boyutlu hallerinde derinlik hissi yaratmak için kullanılır. Perspektif Bağlantısı özelliği ise nesnelerin birbirleriyle ilişkisini ve konumunu belirleyebilir.

Son olarak, belirli bir süre boyunca animasyonla değiştirilebilmesini sağlayan Dönüşüm Geçişleri ve Animasyon özellikleri de CSS içinde yer alır. Transition özelliği belirli özelliklerin, belirli bir süre içinde nasıl değiştirileceğini belirlerken, Animation özelliği belirli özellikleri animasyonla değiştirmek için kullanılır.

Border Radius

CSS ile şekil dönüşümü yapmak, sıradan tasarımları canlandırmak için mükemmel bir tekniktir. Bunlardan biri olan Border Radius özelliği sayesinde kutuların kenarlarına yuvarlaklık vermek mümkündür. Böylelikle sert ve kaba görünen kutular daha yumuşak bir görünüm kazanabilirler.

Border Radius özelliği, kenarları yuvarlamak istediğiniz kutunun CSS dosyasında border-radius özelliğinin belirlenerek kutunun hangi yönlerinde yuvarlama istendiğinin belirtilmesiyle oluşturulur. Özelliklerin değerleri px ya da % gibi olarak belirlenebilir.

İsterseniz bir örnekle açıklayalım; eğer bir kutunun sol üst ve sağ üst köşelerini yuvarlamak istiyorsanız CSS kodunda border-top-left-radius ya da border-top-right-radius özelliklerinin girilmesi yeterli olacaktır. Ayrıca, köşelerin ne kadar yuvarlanacağı da border-radius özelliğinin değeri olarak belirlenebilir.

Bunun yanı sıra, Border Radius özelliğiyle birden fazla kutunun birleştirilmesiyle güzel şablonlar oluşturulabilir. Bu şablonlarda kutuların köşelerine yuvarlaklık verilerek, sıradan bir tasarım yerine görsel açıdan etkileyici bir yapı oluşturulabilir.

Transform Özelliği

CSS'in en popüler özelliklerinden biri transform özelliğidir. Bu özellik, 2 boyutlu ve 3 boyutlu dönüşümleri CSS ile oluşturmak için kullanılır. Transform özelliği, nesnelerin boyutlarını, konumlarını ve hatta şekillerini değiştirebilir. Transform özelliği ile nesnelerin döndürülmesi, ölçeklendirilmesi, kırpılması ve kaydırılması gibi işlemler gerçekleştirilebilir.

Transform özelliğinin en temel kullanımı, nesnelerin döndürülmesidir. Bu özellik sayesinde nesneler arzu edilen derece ve yönlerde döndürülebilir. Tek bir ekseni etrafında döndürmenin yanı sıra X ve Y eksenleri etrafında da döndürülebilir. Ayrıca, 3 boyutlu nesnelerin X, Y ve Z eksenleri etrafında döndürülmesi için de kullanılabilir.

Dönüşüm Türü	Açıklama	Kod Örneği
Döndürme	Nesne döndürmek için kullanılır.	transform: rotate(30deg);
Ölçeklendirme	Nesneyi büyültmek veya küçültmek için kullanılır.	transform: scale(1.5);
Kırpma ve Kaydırma	Belirli bir alanı dışarıda bırakmak veya sayfayı kaydırmak için kullanılır.	transform: clip(50px, 50px, 50px, 50px); transform: scroll(0, 100px);

Transform özelliği aynı zamanda perspektif ve perspektif bağlantısı oluşturmak için de kullanılır. Perspektif özelliği, 3 boyutlu cisimlerin 2 boyutlu hallerinde derinlik hissi yaratmak için kullanılırken, perspektif bağlantısı özelliği nesnelerin birbirleriyle ilişkisini ve konumunu belirleyebilir.

Son olarak, transform özelliğinin animasyon özelliği ile birleştirilmesiyle dönüşüm geçişleri oluşturulabilir. Bu özellik ile belirli bir süre boyunca animasyonla nesnelerin özellikleri değiştirilebilir. Özelliklerin nasıl değiştirileceği transition özelliği ile belirlenebilirken, animasyonun hangi zamanlarda hızlandırılacağı ve yavaşlayacağı animation timing function özelliği ile ayarlanabilir.

Döndürmek (Rotate)

Rotate özelliği, nesneleri belirli derecelerde döndürmek için kullanılır. Bu özellik, belirli bir blok elemanını döndürmek yerine, içerideki herhangi bir öğeyi döndürmenizi sağlar. Bu özellik, X ve Y eksenleri etrafında döndürmenin yanı sıra tek bir ekseni etrafında da döndürmenize olanak tanır.

Bir öğeyi döndürmek için, önce CSS kodunuzda "transform" özelliğini belirtmeniz gerekir. Örneğin, bir HTML elemanını 45 derece saat yönünde döndürmek istiyorsanız aşağıdaki kodu yazabilirsiniz:

.element {   transform: rotate(45deg);}

Eğer döndürmek istediğiniz öğe birden fazla öğeden oluşuyorsa, rotate özelliğini sadece üst öğeye uygulamanız yeterlidir. Diğer alt öğeler, dönüşümden otomatik olarak etkilenecektir.

Rotate özelliği, nesneleri 3 boyutlu olarak da döndürmenizi sağlar. X, Y ve Z eksenleri etrafında döndürerek, nesnelerin birbirine göre konumunu ve perspektifini değiştirebilirsiniz.

Özetle, rotate özelliği sayesinde nesneleri belirli derecelerde döndürerek farklı tasarım seçenekleri oluşturabilirsiniz. Bu özellikle ilgili olarak, öncelikle tasarım ihtiyacınızı ve hangi eksende döndürmek istediğinizi belirleyerek işe başlayabilirsiniz.

X ve Y ekseninde döndürme

X ve Y ekseninde döndürme, CSS ile şekil dönüşümü oluşturmanın bir diğer yolu olarak karşımıza çıkıyor. Bu özellik sayesinde nesneleri tek bir ekseni etrafında döndürmenin yanı sıra, X ve Y eksenleri etrafında da döndürmek mümkün hale geliyor.

Bu dönüşüm özelliği, animasyonlu resimler, 3D grafikler ve oyun yazılımları için oldukça kullanışlıdır. X ekseni, nesnenin solundan sağa doğru olan hareketi, Y ekseni ise nesnenin yukarıdan aşağıya doğru olan hareketini kontrol eder.

Birçok CSS özelliği gibi, döndürme de kolayca yapılabilmektedir. Örneğin, bir resmi 45 derece açıyla döndürmek istediğimizde, aşağıdaki kod kullanılabilir:

Özellik	Değer
transform	rotate(45deg);

Bu kod ile birlikte, resim 45 derecelik bir açıyla döndürülür. Döndürme işlemi için -360 ve 360 arasındaki derece açıları belirleyebilirsiniz.

Ayrıca, CSS ile hem X hem de Y eksenleri etrafındaki döndürme hareketi bir arada kullanılabilmektedir. İki eksen etrafında döndürme hareketi için aşağıdaki kod kullanılabilir:

Özellik	Değer
transform	rotateX(45deg) rotateY(45deg);

Bu kod ile resim, hem X hem de Y eksenleri etrafında 45 derecelik bir açı ile döndürülecektir. Böylece, nesnelerin izleyicinin bakış açısına bağlı olarak döndürülmesi ve şekil değiştirmesi, CSS ile kolayca yapılabilmektedir.

3D Dönüşümler

3D dönüşümleri CSS kullanarak kolayca oluşturabilirsiniz. Bu özellik, nesneleri X, Y ve Z eksenleri etrafında döndürerek üç boyutlu bir görünüm kazandırır.

Bu özelliği kullanırken, dönüşümü uygulamak istediğiniz nesneyi seçin ve "transform" özelliği ekleyin. 3D dönüşümleri oluşturmak için, "rotateX", "rotateY" ve "rotateZ" özelliklerini kullanabilirsiniz. Bu özellikleri kullanarak X, Y ve Z eksenleri etrafında döndürme işlemi yapabilirsiniz.

Bir başka seçenek ise "rotate3d" özelliğidir. Bu özellik, nesneleri herhangi bir eksen ve açı ile döndürebilir. Örneğin, "rotate3d(1,1,1,45deg)" ifadesi, nesneyi X, Y ve Z eksenleri etrafında eşit oranlarda döndürür ve 45 derece açıyla hareket eder.

3D dönüşümleri oluştururken, "perspective" özelliğini kullanarak derinlik hissi yaratabilirsiniz. Bu özellik, nesneler arasındaki uzaklığı ayarlar ve 3 boyutlu bir görünüm oluşturur. "perspective-origin" özelliği ise perspektif orijinini belirler.

3D dönüşümleri, web sitenize bir görsel çarpıcılık ve derinlik kazandırır. Bu özellikleri kullanarak, çeşitli görsel efektler ve animasyonlar oluşturabilirsiniz.

Ölçeklendirme (Scale)

Ölçeklendirme özelliği, nesnelerin boyutunu büyültmek veya küçültmek için kullanılır. Bu özellik, bir nesneye hem yatay hem de dikey yönde farklı ölçekte uygulanabilir. Örneğin, sitenizin ana sayfasında yer alan bir resmi büyük veya küçük olarak göstermek için ölçeklendirme özelliği kullanabilirsiniz.

Ayrıca, farklı cihazlarda web sitenizin görünümünü optimize etmek için de ölçeklendirme özelliğini kullanabilirsiniz. Örneğin, telefonlarda daha küçük bir boyuttaki bir logo veya resim, masaüstü cihazlarda daha büyük olarak gösterilebilir.

Ölçeklendirme özelliği, aynı zamanda çerçevenin içeriğinin boyutunu da değiştirebilir. Bu, özellikle bir içerik bloğuna sahip bir web sayfanız varsa faydalı olabilir. Örneğin, bir başlık bloğundaki metni daha büyük veya küçük hale getirmek için ölçeklendirme özelliğini kullanabilirsiniz.

Bir ölçeklendirme özelliği oluştururken, CSS'in çeşitli özelliklerini kullanabilirsiniz. Örneğin, "transform-origin" özelliği, ölçeklendirme özelliğinin uygulandığı noktayı belirlemenizi sağlar. "Transition" özelliği de ölçeklendirme özelliğini belirli bir süre içinde animasyonlu hale getirebilir.

Kırpma ve Kaydırma (Clip ve Scroll)

Kırpma ve kaydırma, özellikle website tasarımları yapılırken oldukça sık kullanılan özelliklerdir. Kırpma özelliği, belirli bir alanı dışarıda bırakmak istediğinizde kullanılır. Örneğin, bir resimde sadece belirli bir kısım gösterilmek isteniyorsa, kırpma özelliği kullanarak o bölüm dışındaki kısmı çıkarabilirsiniz.

Scroll özelliği ise bir sayfayı kaydırmak için kullanılır. Bu özellik sayesinde web sayfası daha estetik ve kullanıcı dostu hale getirilebilir. Sayfanın boyutu, içeriği ve ekran boyutu değiştiğinde kullanıcıların sayfayı kaydırması gerekir. Bu özellik sayesinde kullanıcılar daha rahat bir deneyim yaşayabilirler.

Kırpma ve kaydırma özellikleri CSS ile kolay bir şekilde yapılabilirler. CSS kodları içerisinde belirli bir alana kırpma yapmak için clip-path özelliği kullanılır. Bu özellik sayesinde resimler, yazılar ve diğer nesneler istenilen şekilde kırpılabilir.

Öte yandan, sayfa kaydırma özelliği ise overflow özelliği ile kolayca yapılabilir. Bu özellik, içeriğin görüntülenebileceği belirli bir alanı belirlemenize ve bu alanın dışındaki içeriğin görünmemesini sağlamanıza olanak tanır. Bu sayede kullanıcılar sadece belirlenen alanda gezinebilirler.

Kırpma ve kaydırma özelliklerinin yanı sıra, bu özelliklerin daha detaylı kullanımı için tablolar ve listeler oluşturulabilir. Örneğin, clip-path özelliğinde farklı şekiller oluşturmak için X, Y koordinatları ve yarıçap değerleri gibi detaylara ihtiyaç duyulabilir. Bu detaylar tablolarda veya listelerde sıralanarak daha kolay anlaşılabilir hale getirilebilir.

Perspektif ve Perspektif Bağlantısı

CSS, sadece iki boyutlu nesneleri değil, üç boyutlu nesneleri de oluşturabilir. Perspektif ve Perspektif Bağlantısı özellikleri, 3 boyutlu nesnelerin kusursuz bir şekilde oluşturulmasını sağlar. Perspektif Özelliği, 3 boyutlu cisimlerin 2 boyutlu hallerinde derinlik hissi yaratmak için kullanılır. Bir nesnenin perspektifini, o nesnenin çevresinde dönen bir göz noktasına göre ayarlamak mümkündür. Böylece, nesnenin ölçüleri uzaklaştıkça küçülür ve yaklaştıkça büyür.

Perspektif Bağlantısı özelliği ise, nesnelerin birbirleriyle ilişkisini ve konumunu belirlemek için kullanılır. Örneğin, yatay bir şekilde uzanan bir nesnenin konumu, dikey uzanan bir nesnenin konumuna bağlı olarak değiştirilebilir. Perspektif Bağlantısı özelliği, birden fazla nesnenin perspektifini bir arada kullanarak, daha kompleks sahneler oluşturmayı mümkün kılar.

Bu özellikler sayesinde CSS, üç boyutlu nesnelerin oluşturulması konusunda oldukça pratiktir. İsabetli kullanıldığında, sayfa dizaynında değişiklikler getirmek için CSS'nin bu özelliklerinden faydalanmak oldukça avantajlı olacaktır.

Perspektif Özelliği

Perspektif özelliği, 3 boyutlu nesnelerin 2 boyutlu hallerinde derinlik hissi yaratmak için kullanılır. Bu özellik sayesinde, bir nesnenin önü ve arkası arasında gerçekçi bir uzaklık hissi oluşturulabilir.

Perspektif özelliği, bir nesneyle arka plan arasındaki mesafeyi ve bu mesafenin nasıl algılanacağını belirler. Nesnenin daha uzakta ya da daha yakında görünmesini sağlayarak, bir derinlik hissi yaratır. Perspektif özelliği, CSS transform özelliği ile kullanıldığında çok daha etkileyici sonuçlar elde edilir.

Bir perspektif efekti oluşturmak için, öncelikle container elementi belirlemeniz gerekir. Bu elementin üzerine, perspektifi tanımlayan bir transform özelliği eklenir. Bu aşamada, nesnenin hangi açıdan görüneceği belirlenir. Ayrıca, perspektif etkisinde bulunacak nesnenin boyutlarına ve konumuna dikkat etmek gereklidir.

Genellikle, perspektif özelliği, grafikler ve görsel efektler gibi öğelerin oluşturulmasında kullanılır. Perspektif özelliği, bir nesnenin tasarımını daha çarpıcı hale getirir ve diğer nesnelerden ayırt edilebilmesini sağlar.

Perspektif Bağlantısı Özelliği

3 boyutlu nesnelerin görsel olarak birbirine bağlanmasını sağlamak için Perspektif Bağlantısı özelliği kullanılır. Bu özellik, CSS animasyonlarının ve dönüşümlerinin daha gerçekçi görünmesini sağlar. Perspektif Bağlantısı'nın kullanımı için öncelikle perspective özelliğini belirlemek gerekmektedir.

Örneğin, aşağıdaki kod bloğunda, bir div etiketi için etkinleştirilmiş bir perspektif özelliği ve çocuk elements 'e uygulanan dönüşüm özellikleri bulunmaktadır:

  
Some text that will be transformed!
  
  

Bu kod bloğu, belirtilen perspektif özelliği ile birlikte, perspektif bağlantısı özelliğini kullanan iki div elementinin döndürülmesini sağlar. Bu şekilde, nesnelerin birbirleriyle ilişkilerinin belirlenmesi daha kolaylaşır.

Perspektif Bağlantısı özelliği ile yapılacak dönüşümlerin belirli bir noktaya odaklanmasını sağlamak için perspective-origin özelliği kullanılabilir. Bu özellik, perspektifin uygulanacağı alanın merkezini belirler.

Aşağıdaki örnek kodda ise, perspective-origin özelliği kullanılmıştır:

  
Some text that will be transformed!
  

Bu örnekte, perspektif özelliği 600px olarak belirlenmiş ve perspektif origini 50% 100% olarak belirlenmiştir. Bu da, görüntünün merkezinin alt merkezinde olduğu anlamına gelir.

Genel olarak, Perspektif Bağlantısı özelliği, CSS transform dönüşümlerinin daha gerçekçi ve etkileyici görünmesini sağlarken, nesnelerin birbirleriyle ilişkilerini de belirlemeyi mümkün kılar.

Dönüşüm Geçişleri (Transition)

Dönüşüm Geçişleri (Transition), CSS'in bir diğer özelliği olarak özelliklerin belirli bir süre boyunca animasyonla değiştirilebilmesini sağlar. Bu özellik, animasyonlu geçişler oluşturmayı kolaylaştırır.

Bu özellik için transition-property, transition-duration, transition-timing-function ve transition-delay olmak üzere dört ana özellik belirtilmelidir. First, transition-property belirli bir özelliği tanımlar ve geçiş uygulanacak özelliği belirler. Transition-duration, özelliğin kaç saniyede değişeceğini belirler. Transition-timing-function, geçiş animasyonunun ne kadar yavaşlaması gerektiğini belirler. Geçişler farklı zamanlamalarla yapılabilir, örneğin ease-in-out, linear, ease-in gibi. Transition-delay, animasyon başlamadan önce ne kadar bekleyeceğini belirler.

Aynı şekilde, birden fazla özelliği değiştirebilen bir geçiş yaratmak istiyorsanız, virgülle ayrılmış özellik listesi tanımlayabilirsiniz. Bu, öğelerin daha dinamik, akıcı ve etkileyici bir şekilde görünmesini sağlar.

Transition özellikleri, özellikle sitenizin ana sayfası gibi önemli sayfalarda, anahtar bilgileri ön plana çıkarmak veya elementleri vurgulamak için kullanılabilir. Kullanıcılara bir şeyin değiştiğini ve bu değişikliğin amacını daha açık bir şekilde belirlemek için kullanılabilir.

Sonuç olarak, Dönüşüm Geçişleri (Transition) özelliğiyle, sitenizi daha etkileyici hale getirmek için animasyon geçişlerini kullanarak elementlerinizin daha belirgin hale gelmesini ve kullanıcılara daha ilgi çekici bir deneyim sunmanızı sağlayabilirsiniz.

Transition Özelliği

Transition özelliği, belirli özelliklerin belirli bir süre içinde nasıl değiştirileceğini belirleyen bir CSS özelliğidir. Bu özellik, web sayfalarında ilgi çekici bir animasyon ya da geçiş efekti oluşturmak için kullanılır.

Bir özelliğin nasıl değişeceğini belirlemek için, önce transition özelliğinin kullanılacağı nesne seçilir. Daha sonra, özelliklere hangi değerlerin atılacağı belirlenir. Son olarak, geçişin ne kadar süreceği de açıkça belirtilir.

Transition özelliği üzerinde kullanılabilecek birkaç farklı özellik vardır:

Özellik Adı	Açıklama
transition-property	Hangi özelliklerin geçiş efekti kullanacağını belirler.
transition-duration	Geçişin ne kadar süreceğini belirler. Saniye veya milisaniye cinsinden değerler kullanılabilir.
transition-timing-function	Geçişin nasıl yapılacağını belirler. Bu özelliğe, ‘linear’, ‘ease-in’, ‘ease-out’, veya ‘ease-in-out’ değerleri atanabilir.
transition-delay	Geçişin ne kadar geciktirileceğini belirler. Saniye veya milisaniye cinsinden değerler kullanılabilir.

transition özelliği, web sayfalarında yaratıcı ve dikkat çekici geçiş efektleri oluşturmak için harika bir araçtır. Ancak, özellikleri doğru şekilde kullanmak çok önemlidir. Geçişlerin yavaş veya hızlı olması, kullanıcıların sayfayı nasıl deneyimleyeceği konusunda büyük bir fark yaratabilir. Bu nedenle, transition özellikleri belirlenirken dikkatli bir şekilde planlanmalı ve kullanılmalıdır.

Transition Delay Özelliği

Transition delay özelliği, belirli bir süre içinde gerçekleşecek animasyonun ne kadar sonra başlayacağını belirler. Bu özellik, sayfanızdaki tasarımları daha da geliştirerek animasyonlara sırayla başlamaları için zamanlama olanağı sunar.

Bu özellik sayesinde, yalnızca animasyonun gerçekleşeceği süreyi belirlemenin yanı sıra, ayrıca animasyonun ne zaman başlaması gerektiğini de belirleyebilirsiniz. Böylece, animasyonların eşzamanlı olarak değil, sırayla başlamasıyla daha estetik bir tasarım oluşturabilirsiniz.

Transition delay özelliği, belirli bir süre içinde gerçekleşecek animasyonların tam zamanında başlamasını sağlar. Bu özellik CSS3 ile birlikte gelir ve kolayca kullanılabilir. Özellikle, birden fazla animasyonun gerçekleştirildiği durumlarda, animasyonların ne zaman başlaması gerektiğini ayarlamak için oldukça önemlidir.

Transition Timing Function Özelliği

Transition Timing Function özelliği, CSS ile dönüşüm geçişlerinde animasyonun nasıl zamanlanacağını belirleyen bir özelliktir. Bu özellik, belirtilen zaman aralığı boyunca dönüşümün gerçekleşmesini sağlar ve animasyonun hızını ve yavaşlamasını kontrol ederek daha akıcı bir geçiş sağlar.

Bu özellik, belirli bir zaman içinde geçişlerin nasıl olacağını belirlemek için farklı zamanlamalar belirleyen birkaç farklı değer alabilir. Bunlar; ease, ease-in, ease-out, ease-in-out, linear gibi değerlerdir. Easing fonksiyonları olarak da bilinen bu değerler, CSS dönüşümlerine doğal bir his vermek için kullanılır.

Ease, başlangıçta hızlanan ancak sonunda yavaşlayan bir geçiş oluşturur. Ease-in, başlangıçta yavaşlayan ancak sonunda hızlanan bir geçiş oluşturur. Ease-out, başlangıçta hızlı ancak sonunda yavaşlayan bir geçiş oluşturur. Ease-in-out, hem başlangıçta hem de sonunda yavaşlayan bir geçiş oluşturur. Linear ise animasyonun sabit bir hızda gerçekleşmesini sağlar.

Transition Timing Function özelliği, belirtilen değerlerin yanı sıra birkaç farklı fonksiyon da alabilir. Cubic Bezier özelliği, belirli noktalar arasında farklı animasyon eğrileri oluşturmak için kullanılır. Bu özellik, animasyonların daha gelişmiş ve özelleştirilebilir olmasını sağlar.

Aşağıdaki tabloda, Transition Timing Function özelliğinde kullanılan değerlerin ve fonksiyonların özellikleri ve kullanım alanları açıklanmaktadır:

Değer/Fonksiyon	Açıklama	Kullanım Alanı
ease	Başlangıçta hızlanan ancak sonunda yavaşlayan bir geçiş oluşturur.	Standart kullanım
ease-in	Başlangıçta yavaşlayan ancak sonunda hızlanan bir geçiş oluşturur.	Menüler, galeriler
ease-out	Başlangıçta hızlanan ancak sonunda yavaşlayan bir geçiş oluşturur.	Butonlar, linkler
ease-in-out	Hem başlangıçta hem de sonunda yavaşlayan bir geçiş oluşturur.	Çeşitli animasyonlar
linear	Animasyonun sabit bir hızda gerçekleşmesini sağlar.	Genel animasyonlar
cubic-bezier()	Belirli noktalar arasında farklı animasyon eğrileri oluşturmak için kullanılır.	Gelişmiş animasyonlar

Animasyon (Animation) Özelliği

CSS'in önemli özelliklerinden biri olan animasyon, özelliklerin belirli bir süre boyunca animasyonla değiştirilebilmesini sağlar. Animasyon özelliği sayesinde, bir web sayfasında belirli nesnelerin hareketli olarak gösterilmesi mümkün olur. Bu özellik sayesinde, web tasarımcıları sayfalarına daha etkileyici ve ilgi çekici bir görünüm sağlayabilirler.

Animasyon özelliğinin en önemli parçalarından biri de keyframe özelliğidir. Keyframe özelliği, belirli bir anda belirli özelliklerin nasıl olması gerektiğini belirler. Keyframe özelliği kullanılarak bir nesnenin hareketinin ve üzerindeki özelliklerin her bir adımı belirlenerek, animasyonun her bir aşaması belirli bir düzende gösterilebilir. Bunun yanı sıra, animasyon özelliği ile nesnelerin renkleri, boyutları, konumları ve diğer özellikleri de değiştirilebilir.

Animasyon özelliği, geçişlerden farklı olarak birden fazla adımdan oluşan animasyonlar oluşturmak için idealdir. Animasyonlar, belirli bir zaman aralığında belirli adımlarla gerçekleşir ve bu adımlar herhangi bir CSS özelliğiyle ilgili olabilir. Animasyonun hangi zamanlarda hızlandırılacağı ve yavaşlatılacağı ise animasyon timing function özelliği ile belirlenir. Ayrıca, animasyonun kaç kez tekrarlanacağı iteration count özelliği ile belirlenir.

Animasyon özelliği, web tasarımcılarına daha dinamik ve ilgi çekici sayfalar tasarlama olanağı sunar. Ancak, herhangi bir özelliği animasyonla değiştirmek, sayfanın yüklenme süresini artırabileceğinden, dikkatli bir şekilde kullanılmalıdır. Ayrıca, animasyonlar, mobil cihazlarda fazla kaynak tüketebileceğinden, gereksiz animasyonlardan kaçınılmalıdır.

Keyframe Özelliği

Keyframe özelliği, belirli bir anda belirli özelliklerin nasıl olması gerektiğini belirleyen bir css özelliğidir. Belirli bir özelliğin farklı zamanlarda nasıl olacağını belirlemek için kullanılır. Bu özellik sayesinde animasyonlar daha gerçekçi bir hale getirilebilir.

Keyframe özelliğini kullanmak için öncelikle @keyframes kuralını oluşturmalısınız. Bu kural, animasyonun hangi zaman aralıklarında nasıl olması gerektiğini belirler. Bu zaman aralıklarına "duraklar" veya "anahtar kareler" denir.

Anahtar kareler belirledikten sonra, her bir anahtar karedeki özellikleri belirtmeniz gerekir. Bu özellikleri belirlerken, hangi özelliğin hangi değerlerle olacağını belirlemelisiniz. Örneğin, bir kutunun boyutunu animasyonla değiştirmek istiyorsanız, ilk anahtar karede kutunun boyutunu belirleyebilir ve ikinci anahtar karede kutunun boyutunu değiştirebilirsiniz.

Aşağıda bir örnek kod bloğu verilmiştir:

```css@keyframes animasyon { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); }}

.kutu { width: 100px; height: 100px; background-color: red; animation: animasyon 2s linear infinite;}```

Bu kod bloğunda, "animasyon" adında bir @keyframes kuralı oluşturulmuştur. Bu kural, "kutu" sınıfına atanmıştır. Animasyon, 0-50% arasında kutuyu 180 derece döndürürken, 50-100% arasında kutuyu 360 derece döndürür.

Keyframe özelliği, CSS animasyonlarının oluşturulması için vazgeçilmez bir özelliktir. Bu özellik sayesinde animasyonlar daha karmaşık ve gerçekçi hale getirilebilir.

Animation Timing Function Özelliği

Animation Timing Function Özelliği, animasyonların hangi zamanlarda hızlandırılacağı veya yavaşlatılacağı gibi animasyon hareketlerinin zamanlamasını belirler. Bu özellik, animasyonun nasıl başlayacağı ve nasıl sona ereceği gibi birçok faktörü kontrol eder. Bu sayede animasyonlu web sayfaları hazırlarken, görsel efektlerin düzgün bir şekilde görünmesi sağlanır.

Birçok farklı timing function özelliği mevcuttur. Bunlar arasında ease, ease-in, ease-out ve ease-in-out gibi özellikler yer alır. ease özelliği, animasyonun hızının başlangıçta yavaşladığını, daha sonra hızlandığını ve sonunda yine yavaşladığını belirler. ease-in özelliği ise animasyonun başlangıçta yavaşladığını, daha sonra hızlandığını ve sabit bir hızda devam ettiğini belirler.

ease-out özelliği, animasyonun hızının başlangıçta sabit olduğunu, daha sonra yavaşladığını ve sonunda durduğunu belirler. ease-in-out özelliği ise animasyonun hızının başlangıçta yavaşladığını, daha sonra hızlandığını, tekrar yavaşladığını ve sonunda durduğunu belirler.

Ayrıca, timing function özelliği kullanarak özel animasyon etkileri de yaratabilirsiniz. Örneğin, bounce özelliği, animasyonun sonunda birkaç kez sıçrama efekti yapmasını sağlar. Back özelliği ise animasyonun sonunda geri çekme efekti yaparak daha gerçekçi bir görüntü sağlar.

Overall, animasyon timing function özelliği, web sayfası tasarımında görsel efektlerin düzgün bir şekilde görünmesini sağlar. Bu özellik, farklı animasyon hareketlerinin zamanlamasını kolayca kontrol etmenizi sağlar ve web sayfanızın daha ilgi çekici hale gelmesini sağlar.

Iteration Count Özelliği

Iteration Count Özelliği animasyonun kaç kez tekrarlanacağını belirleyen bir özelliktir. Bu özellik, animasyonların sürekli tekrarlanmasına veya yalnızca belirli bir sayıda tekrarlanmasına izin verir. Bu sayede sınırsız tekrarlamalardan veya yalnızca bir kez çalışmaktan kurtulunabilir.

Bir animasyonun kaç kez tekrarlanacağı iteration-count özelliği ile belirlenir. Bu özellik için kullanılan değerler; sıfır, bir, sonsuz veya belirli bir sayıdır. Sıfır belirtilirse animasyon hiçbir zaman tekrarlanmazken, bir değeri vermek animasyonun yalnızca bir kez tekrarlanacağı anlamına gelir. Sonsuz değeri ise animasyonun sürekli olarak tekrarlanacağını ifade eder. Belirli bir sayıda tekrarlamalar için ise istenilen sayı değeri verilebilir.

Iteration Count Özelliği genellikle bir animasyonun süresiyle birlikte kullanılır. Örneğin, bir animasyonun 5 saniye süreceğini ve 3 kez tekrar edeceğini belirtmek için şu kodu kullanabilirsiniz;

animation: myanimation 5s ease-in-out 3;animation-iteration-count: 3;

Bu kod, myanimation adlı animasyonun 5 saniye boyunca süreceğini ve 3 kez tekrarlanacağını belirtir.

Iteration Count Özelliği, web sayfalarında animasyonlu grafikler veya butonların kullanılması gibi durumlarda oldukça yararlıdır. Ek olarak, belirli bir sürede tekrarlanan animasyonlar, kullanıcıların gözünü yakalayarak sayfadaki etkileşimleri artırabilir.