CSS animasyonları, stiller kullanarak belirli durumlarını verdiğimiz etiketleri bir durumdan diğer duruma geçirmek için gerekli olan hareketi otomatik olarak yaparak çalışırlar.
Animasyon ve geçiş efektlerinde kullanmak üzere mutlaka
CSS dönüşümlerini (transforms) öğrenin. Bu konuda yazmayı düşündüğüm
makaleyi tamamladığımda adresini burada bildireceğim.
Eğer önceden Flash kullandıysanız, CSS animasyonları size çok tanıdık gelecek.
CSS animasyonlarında kullanılan tanımlama ve stil özellikleri şunlardır:
- @keyframes tanımlaması
- animation
- animation-name
- animation-duration
- animation-iteration-count
- animation-direction
- animation-delay
- animation-fill-mode
- animation-timing-function
- animation-play-state
Animasyon stil özelliklerinin isimleri eski tarayıcılarda farklılık gösterirler. Eğer böyle tarayıcılara hitap edecekseniz özellik isimlerinin başına tarayıcıya göre şu ekler getirilir:
Internet Explorer
| -ms-
|
Mozilla Firefox
| -moz-
|
| Chrome | -webkit-
|
| Safari | -webkit-
|
| Opera | -o-
|
Örnek olarak eğer animasyonunuz Safari tarayıcısında çalışacak ise
animation-name özelliğini
-webkit-animation-name şeklinde yazmalıyız.
Tabi animasyonunuzun hangi tarayıcıda çalıştırılacağını bilemeyeceğinizden kullandığınız özelliklerin her iki şeklini de yazın.
Örnek:
animation-name: anim;
-webkit-animation-name:anim;
Ancak Internet Explorer, Microsoft'un yeni tarayıcısı Edge, Chrome, Firefox ve Opera tarayıcıları son zamanlarda W3C standartlarına uyduklarından bu tarayıcıların yeni sürümlerinde herhangi bir ön eke gerek yoktur. Ancak Safari için bu yazının yazıldığı tarihte özelliklerin başına hâlâ
-webkit- yazmak zorundayız.
Anahtar kareler (keyframes )
CSS animasyonları nesnenin belirli durumlarının (görünüm, pozisyon vb.) tanımlandığı anahtar kare (keyframe) denilen stil tanımlamaları ile yapılır.
Normalde en az iki anahtar kare tanımladıktan (tek de olabilir) sonra bu iki durum arasındaki tüm
durumların tarayıcı tarafından gerçekleştirilmesini sağlayabilirsiniz.
Anahtar karelerin görevini şöyle açıklayalım. Eskiden çizgi filmler kağıt
üzerine çizildiğinde, bir karakterin başlangıç ve bitiş hareketi usta çizer tarafından
kağıtlara çizilir, aradaki görüntüler de (tween) diğer çizerler tarafından bu
çizimlere dayanarak yapılırmış. İşte anahtar kareler de bunlara
benzer. Biz başlangıç ve bitiş (hatta arada başka durumlar da)
vereceğiz, gerisini tarayıcı halledecek.
Örneğin bir etiketin
left stil özelliğinin değerini birinci durumda (anahtar kare) 100px, ikinci durumda 200px verdiğinizde, nesneyi 100. pikselden 200. piksele hareket ettiren bir animasyon oluşturursunuz. Nesnenin aradaki konumları tarayıcı tarafından hesaplanıp gösterilir.
Anahtar kareler şu şekillerde kullanılır:
@keyframes AnimasyonAdi {
from {
stil tanımları...
}
to {
stil tanımları...
}
}
Kullanımada görüldüğü gibi
@ işareti ile beraber (at-rules)
keyframes ifadesi yazılıp süslü parantezlerle bir blok oluşturulur.
Bu bloğun içinde
from (-den başla) ile yine süslü parantez blokları içinde başlangıç stil tanımlamaları yapılır. Daha sonra
to (-e kadar) ile yine süslü parantez bloğu içinde bitiş stil tanımlamaları yapılır.
Bu kullanımın bir başka şeklinde durumları yüzde olarak tanımlayabiliriz. Örneğin başlangıç durumu için 0%, bitiş durumu için 100% şeklinde (yüzde karakterlerinin sayının önüne değil arkasına yazıldığına dikkat edin).
@keyframes AnimasyonAdi {
0% {
stil tanımları...
}
100% {
stil tanımları...
}
}
Yüzdeli tanımlamaları, başlangıç ve bitiş durumlarından başka ara durumları da tanımlayabilmemize imkan sağlarlar.
Örnek:
@keyframes AnimasyonAdi {
0% {
stil tanımları...
}
50% {
stil tanımları...
}
100% {
stil tanımları...
}
}
Bu şekilde üç ya da daha fazla durum verilerek animasyon oluşturulabilir.
Her iki şekli karışık olarak da kullanabiliriz:
@keyframes AnimasyonAdi {
0% {
stil tanımları...
}
50% {
stil tanımları...
}
to {
stil tanımları...
}
}
Bir etikete animasyon atama - animation-name stil özelliği
Anahtar kareler tanımlandıktan sonra bir etikete uygulanabilmesi için yine stil tanımlamaları ile etiket için kullanılacak animasyon adını (anahtar kare grubuna verdiğiniz isim) bildirmemiz gerekir.
Bunun için
animation-name stil özelliği kullanılır. Bu stil özelliğine değer olarak animasyon adını (
@keyframes yanına yazdığımız isim) atarız. Bu atamayı etiketin
style özelliği içinde yapabilirsiniz. Ancak biz burada etikete verilecek olan bir stil sınıfı (. ile başlayan stil tanımlamaları) oluşturarak bu sınıfın içinde yapacağız.
Animasyon süresi belirleme - animation-duration stil özelliği
animation-duration stil özelliği ile, animasyonun ne kadar zaman sürmesini istediğimizi
belirtiriz. Eğer bunu belirtmezseniz bu süre varsayılan olarak 0 saniye
olduğundan animasyonunuz çalışmayacaktır.
Animasyon süresi saniye veya milisaniye cinsinden verilebilir. Saniye için s (örneğin 2s), milisaniye için ms (örneğin 400ms) ölçüleri kullanılır.
Son olarak şunu da belirtelim ve animasyonu çalıştırmaya geçelim.
Eğer tanımladığınız
animasyonda konum değiştiriliyorsa, stil sınıfında veya etiketin style özelliği içinde position özelliğini de relative veya absolute olarak ayarlamanız gerekir. Aksi halde etiket hareket ettirilemez.
Örnek:
/* YatayHareket isimli bir animasyon tanımla */
@keyframes YatayHareket {
from {
left:100px;
}
to {
left:300px;
}
}
/* Animasyonun kullanımı için aracı bir stil sınıfı tanımla */
.YatayHareketStilSinifi {
position:relative;
animation-name: YatayHareket;
animation-duration: 3s;
}
Animasyon çalıştırılacağı zaman stil sınıfını etiketin
class özelliğine atarız.
<div class="YatayHareketStilSinifi">
Merhaba...
</div>
Bu aşamadan sonra animasyon çalışacaktır.
Ancak burada şunu belirtmeliyim. Eğer siz aksini belirtmediyseniz
animasyon sadece bir kez çalıştırılacaktır.
Örneğin çalışan hali:
Animasyon tekrar sayısı belirleme - animation-iteration-count özelliği:
animation-iteration-count özelliği animasyonun kaç kez tekrar edeceğini belirtmek için kullanılır. Varsayılan değer 1'dir. Yani animasyon sadece bir kez çalıştırılır.
Eğer animasyonu bir kaç kez çalıştırmak istiyorsak tekrar sayısını bu özelliğe değer olarak verebiliriz.
Örneğin:
.YatayHareketStilSinifi {
position:relative;
animation-name: YatayHareket;
animation-duration: 3s;
animation-iteration-count: 5;
}
Buna göre animasyon 5 kez tekrar edecektir.
Animasyonun sürekli tekrar etmesini istiyorsanız bu özelliğe
infinite (sonsuz defa) değerini verin.
Örneğin:
.YatayHareketStilSinifi {
position:relative;
animation-name: YatayHareket;
animation-duration: 3s;
animation-iteration-count: infinite;
}
Çalışan örnek:
Oynatma döngüsü verme - animation-direction özelliği:
animation-direction özelliği ile animasyona otomatik bir oynatma döngüsü verebiliriz. Örneğin animasyon bir kez tamamlandıktan sonra tekrar ilk duruma otomatik olarak döndürülebilir veya sürekli olarak iki durum arasında gidip gelebilir.
animation-direction özelliği şu değerleri alabilir:
- normal (varsayılan)
- reverse : Tersten oynatır. Son anahtar kareden ilk anahtar kareye gider.
- alternate : Bildirilen şekilde (normal) oynattıktan sonra tersten oynatır.
- alternate-reverse : İlk olarak tersten, sonra bildirilen şekilde oynatır.
Ancak bu değerlerin bazıları Safaride çalışmayabilir.
reverse için örnek:
<style>
@keyframes YatayHareket {
from {
left:100px;
}
to {
left:300px;
}
}
.YatayHareketStilSinifi {
position:relative;
animation-name: YatayHareket;
animation-duration: 3s;
animation-direction:reverse;
}
</style>
<div class="YatayHareketStilSinifi">
Merhaba
</div>
Örneğin çalışan hali:
Örnekte de görüldüğü gibi biz sadece sağa gitmesi için stiller tanımladığımız halde
reverse kullandığımız için animasyon tersten (son anahtar kareden başlayarak) oynatılıyor.
Animasyondan önce bekletmek - animation-delay özelliği:
Bu özelliği kullanarak animasyon için bir başlama gecikmesi verebiliriz. Yani animasyon hemen başlamaz. Belirtiğimiz süre geçtikten sonra başlar. Süre saniye veya milisaniye cinsinden verilebilir. Örneğin 2s veya 400ms.
Örnek:
<style>
@keyframes YatayHareket {
from {
left:100px;
}
to {
left:300px;
}
}
.YatayHareketStilSinifi {
position:relative;
animation-name: YatayHareket;
animation-duration: 3s;
animation-delay:1s;
}
</style>
<div class="YatayHareketStilSinifi">
Merhaba
</div>
Örneğin çalışan hali:
animation-fill-mode özelliği:
animation-fill-mode özelliği, animasyonun nasıl tamamlanacağını belirtmek için kullanılır.
Bu özellik şu değerleri alabilir:
- none
- forwards
- backwards
- both
none değeri varsayılan değerdir. Bitiş ile ilgili olarak herhangi bir durum bildirmez. Animasyon bittiğinde nesne animasyon başlamadan önceki konumuna döner. Üstteki örneklerin hepsi böyle çalışmaktadır.
forwards değeri kullanıldığında oynatılan nesne son anahtar karedeki durumunda kalır. Bizim örneklerimizde yazı 300 piksele kadar hareket ettiriliyor. Eğer bu değeri kullanırsak yazı 300 pikselde kalacak. En başa geri dönmeyecektir.
Örnek:
<style>
@keyframes YatayHareket {
from {
left:100px;
}
to {
left:300px;
}
}
.YatayHareketStilSinifi {
position:relative;
animation-name: YatayHareket;
animation-duration: 3s;
animation-fill-mode: forwards;
}
</style>
<div class="YatayHareketStilSinifi">
Merhaba
</div>
Örneğin çalışan hali:
backwards özelliğinde animasyonun ilk anahtar karesinden önceki durum gösterilmez.
Bizim örneğimizde yazının sol pozisyonu 0 pikseldir (
animation-duration örneğinde açıkça görülebilir). Ancak animasyon başladığında ilk anahtar karedeki pozisyona (100px) atlıyor ve daha sonra animasyon çalışıyor.
backwards değerini kullandığımızda ise bu ilk durum hiç gösterilmeden yazı doğdudan animasyonun ilk anahtar karesinde belirtilen duruma getirilecektir. Bunun açıkça görülmesi için
animation-delay özelliğini de kullanacağız. Göreceksiniz ki
animation-delay süresince yazı en başta değil, ilk anahtar karede bildirilen konumda bekleyecektir.
Bunu daha iyi görüp karşılaştırabilmeniz için
animation-delay örneğimizle
backwards örneğimizi alt alta veriyoruz.
animation-delay çalışan örnek:animation-fill-mode: backwards çalışan örnek:both özelliğinde her iki durum da çalışır. Yani
backwards gibi ilk anahtar kareden önceki görüntü animasyon başlamadan önce gösterilmeyecek ve yazı son anahtar karedeki pozisyonda kalacaktır.
animation-fill-mode: both çalışan örnek:animation-timing-function özelliği:
Bu özellik, animasyonun yavaş başlayıp hızlı bitmesi veya tersi gibi durumları belirlemek için kullanılır. Şu değerleri alabilir.
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- cubic-bezier
Aşağıdaki çalışan örnek bu durumları kullandığımızda nasıl sonuçlar alacağımızı göstermektedir. cubic-beizer değeri altta ayrıca açıklanacaktır.
cubic-bezier değeri, bir bezier eğrisi ile animasyonun akış şeklini belirlemek için kullanılır. Tanımlanan eğrideki dik bölümler animasyonun hızlı ilerleyeceği, yatık bölümler ise yavaş ilerleyeceği süreleri belirler. Eğrideki değerler 0 ile 1 arasında değerler (yüzde) olarak verilir.
Bezier eğrisi ile ilgili olarak Canvas ile eğriler çizmek başlıklı makalemizi okuyabilir, makalenin sonundaki etkileşimli örnekten yararlanabilirsiniz.
Şu etkileşimli örnek üzerinde cubic-bezier değerleri oluşturabilir ve test edebilirsiniz. Örnekte elde edebileceğiniz negatif değerler bazı webkit tarayıcılarında çalışmayabilir.
animation-play-state özelliği:
Bu özellik, animasyonun oynatılma durumunu belirler. Eğer animasyon o anda çalışıyorsa running (çalışıyor), çalışmıyorsa paused (durdurulmuş) değeri alır.
Bu özelliği JavaScript kullanarak değiştirebilirsiniz. Fakat biz burada CSS :hover seçicisini kullanarak bir örnek vereceğiz. :hover seçicisi, bir etiketin fare üzerine geldiğinde alacağı stili belirler. Biz örnekte normalde animation-play-state özelliği değeri paused olan olan bir animasyonun :hover durumunda bu değerini running yapacağız.
<style>
@keyframes anim {
from {
background-color:yellow;
border-radius:0px;
}
to {
background-color:red;
border-radius:25px;
}
}
.sAnim {
width:50px;
height:50px;
animation-name:anim;
animation-iteration-count:infinite;
animation-duration:1s;
animation-direction:alternate;
animation-play-state:paused; /* İlk durumda animasyon çalışmasın. */
}
.sAnim:hover {
animation-play-state:running;
}
</style>
<div class="sAnim"></div>
Örneğin çalışan hali:
animation özelliği:
Kısa yazım sağlayan bu özelliği kullanarak yukarıda bahsedilen tüm özellikleri tek satırda aralarına birer boşluk koyarak belirtebiliriz.
Kullanımı şöyledir:
animation: animation-duration animation-timing-function animation-delay
animation-iteration-count animation-direction animation-fill-mode
animation-play-state animation-name
Şimdi üstteki örneği bu şekilde yazarak verelim:
<style>
@keyframes anim {
from {
background-color:yellow;
border-radius:0px;
}
to {
background-color:red;
border-radius:25px;
}
}
.sAnim {
width:50px;
height:50px;
animation:1s infinite alternate paused anim;
}
.sAnim:hover {
animation-play-state:running;
}
</style>
<div class="sAnim"></div>
Görüldüğü gibi kullanmadığımız değerler atlanmıştır. Hepsini yazmak zorunda değiliz.
Bu kadar. Lütfen eksik veya hata görürseniz bildirin.
