CSS Animasyonlar

Hazırlayan : Mahmut Ercan                                                                                                                                                      Numarası : 22430070018

CSS Transform Özelliği Türkçesiyle Döndürme özelliği sayesinde div bloklarına veya görsellere çeşitli görsel efektler uygulayabiliriz.

Bu görsel efektler içerisinde;

1. döndürme : ( 90 derece sağa döndürmek istersek transform: rotate(90deg); sola döndürmek için rotate değerini -90deg yapıyoruz. )

2. hareket ettirme :

3. kaydırma : (Kutucuğu kaydırmak için transform: translate(100px)kodunu kullanırız aşağıda örneği olduğu gibi.)

4. büyütme : (transform: scale(3);  )

5. küçültme  : (transform: scale(.3); )

6. eğdirme : (Kutucuğu eğdirmek için transform: skew(50deg);  kodunu kullanırız.)işlemleri yapılabilmektedir.

CSS ile sayfanızda bulunan bir elemana animasyon eklemenin yollarından birisi "transition’dır". Transition bir elemanın iki state’i arasında transition, yani geçiş yapmanızı sağlar. CSS özelliğinin bir değerden başka bir değere geçişini sağlayabiliriz. Bir kutunun genişliği 100px ise, :hover durumunda bunun 200px olmasını belli bir süre içerisinde gerçekleştirmek gibi.

                                                              Transition Özellikleri

transition-property: transition’ı uygulamak istediğimiz bir veya birden fazla CSS property’sini belirtiriz.

transition-duration: Transition işleminin ne kadar sürede gerçekleşeceğini belirtiriz. Tanımladığınız her bir transition-property için dilerseniz tek bir duration belirtebilirsiniz. Yada her bir property için ayrı ayrı transition süresi belirtebilirsiniz. 

transition-timing-function: ransition’ın süresince hangi hızda ve hangi aşamada olacağını belirtiriz. 

transition-delay: Bir geçişin başlamadan önce ne kadar süre bekletileceğini belirleyebilirsiniz.  

CSS’deki animasyon özelliği; 

1. renk, 

2. arka plan rengi

3. yükseklik 

4. genişlik

gibi birçok CSS özelliğini canlandırmak, hareketlendirmek ve efekt vermek için kullanılabilir. Animasyonlar, bir öğenin kademeli biçimde, bir stilden diğer stile geçmesine olanak tanır. CSS animasyonunu kullanmak için önce animasyon için bazı ana kurallar çerçevesinde kurallar ve parametreler belirtmelisiniz. Anahtarlar ve parametreler, öğenin belirli zamanlarda hangi stillere sahip olacağını belirtmektedir.

CSS Animasyonlarını kullanabilmek için @keyframes kuralını kullanmamız gerekmektedir.@keyframes kuralı, animasyonun ana yapısı oluşturulur. Animasyonun belirli zamanlarda hangi türden stile dönüşeceğini belirten bir kuraldır.  

Örnek yapacak olursak;

Keyframes çalışma mantığını daha iyi anlamak için renk geçişi örneği yapalım. Style etiketleri arasında bir keyframes uygulayalım ve ismi renk animasyonu olsun. Renk geçişi uygulayacağımız renk hangi renkten başlayacaksa  “from”  kısmında ,hangi renge doğru geçiş olacağını belirtmek için ise  “to”  biçiminde belirtmemiz gerekiyor. 

animation-name: keyframes ile belirtilen animasyonun ismi yazılmalıdır. Birden fazla animasyonda, keyframesin hangi animasyonu etkileyeceğini belirtmek için kullanılır. Türkçe karakter kullanmadan ve boşluk bırakmadan yazılmalıdır. Tire , altçizgi ve sayılar kullanılabilir. 

animation-duration: Animasyonun kaç saniye süreceğini yani uzunluğunu belirten parametredir. 0 saniye girildiği zaman hiçbir tepkime vermez ve animasyon gerçekleşmez.