Css3 Animations Kullanımı

Merhaba Arkadaşlar,

Bu bol örnekli ve uzun makalede sizlere günümüzde hayatımıza aynı Html ve Css kadar girmiş durumda bulunan Css3 metodlarından ” Animations ” hakkında bilgi vereceğim. Flash’ın artık günümüzde sektör içerisinde neredeyse tamamen çekildiğini düşündüğümüzde ortaya çıkan büyük sistemlerden Html5 ve jQuery’ nin ardından da bize bir çok durumda Css3 ile de animasyon oluşturabilme olanağı sağlanmaktadır. Kurallarını ve yazım mantığını iyi kavradığımız takdirde küçük kod yapıları ile birlikte ortaya küçük veya büyük animasyonları çıkarabileceğiz. Arkamıza yaslanalım ve dikkatlice işlemlerimizi uygulayalım.

@keyframes

İlk olarak ” animations ” metodunun en yalın halde nasıl oluşturulduğunu anlatmak gerekiyor. Ana maddemiz her zaman @keyframes olacaktır. Bu parametre ile animasyonlarımızı başlatacağız ve süslü parantezler içerisinde yazacağımız kodlar ile de hangi animasyonun ne yapacağını belirlemiş olacağız. Örneğin :

@keyframes bilgisayaci
{
//Kodlarımız
}

” bilgisayaci ” yazan alan da bizim animasyonun ismi olacaktır. Buradaki isim, animasyonu html içerisinde çağırmamız gerektiğinde kullanılacaktır. Birden fazla animasyon oluşturulabileceğini düşünerek genelde animasyon içeriğine göre verilmelidir.

Ayrıca burada belirtmem gereken bir diğer hususta değişik tarayıcı grupları için ayrı ayrı kod yazmamız gerekmektedir. Daha doğrusu yazdığımız kodu en son kopyalayarak küçük eklemeler yapmamız gerekmektedir. Her ne kadar yeni nesil tarayıcılar otomatik olarak görse de eski sürümlerde sorunlar olabiliyor. Yukarıdaki @keyframes i kopyalayarak şu şekilde kullanabiliriz.

@-webkit-keyframes bilgisayaci /* Chrome */
{
//Kodlarımız
}

@-moz-keyframes bilgisayaci /* Mozilla */
{
//Kodlarımız
}

@-o-keyframes bilgisayaci /* Opera */
{
//Kodlarımız
}

Bu şekilde bir kullanım ile de önem derecesi yüksek olan bir konuyu kavramış olduk.

Diğer parametreleri ilk olarak açıklayacağım ve bu açıklamanın ardından da bir örnek ile makaleyi sonlandıracağım.

animation-name :

Bu parametrede hangi animasyonu çağırıyorsak onun ismini belirtiyoruz. Üst kısımda belirttiğim gibi her animasyonun bir ismi olacaktır (bilgisayaci yazılan alan) . Ve bu animasyonu bir div içerisine çağırarak uygulatmak istediğimizi düşündüğümüzde bunu çağırmak için kullanacağımız parametre bu olacaktır.

animation-duration :

Animasyonun tamamlanma süresini burada belirtiyoruz. Örneğin bu alana ” 5s ” değerini verdiğimizde. Bu animasyonu kullanacak olan div ‘in yapacağı tüm hareketler 5 saniye içerisinde tamamlanıp bitecektir.

animation-timing-function :

Animasyon tamamlanırken nasıl bir hızlanma / yavaşlama yolunu izleyeceğini burada belirliyoruz. Aldığı bazı değerler var. Varsayılan değeri ” ease ” olmakla beraber diğer değerler ” linear ” , ” ease-in ” , ” ease-out ” , ” ease-in-out ” , ” cubic-bezier(1,1,1,1) ” , ” steps(1) ” şeklindedir ( 1 yazan alanları kendinize göre rakamlar ile düzenleyebilirsiniz ) .

animation-delay :

Animasyonun belirtilen işlemden kaç saniye sonra başlayacağını burada belirleriz. Örneğin sayfa açıldığı anda soldan sağa gidecek bir div var ise biz bu parametrede ” 2s ” yazarsak bu div sayfa açıldıktan 2 saniye sonra soldan sağa doğru hareketlenmeye başlar.

animation-iteration-count :

Animasyonun tekrar sayısını belirlediğimiz alandır. Bu alanı kullanmazsak işlem bir kere yapılır ve sonlandırılır. ” 2 ” yazarsak animasyon iki kere tekrarlanır , ” infinite ” yazarsak animasyon sürekli tekrarlanır.

animation-direction :

Direction kelimesinden de anlayacağınız üzere animasyonun yönünü belirleyen parametredir. Tek aldığı değer olan ” alternate ” değerini verdiğimizde animasyon yönü doğrultusunda sona ulaştığında bir kez de geriye aynı doğrultu da döner.

animation-play-state :

Animasyonun çalışır durumda mı yoksa işlev görmeden bekleyecek durumda mı olacağını burada belirleriz. Varsayılan değeri ” running ” dir. Buna zıt olarak alacağı değer ” paused ” olacaktır. Kelimelerden de anlaşılacağı üzere varsayılan değerde çalışır , ” paused ” değerinde de bekleme moduna geçer.

animation :

Bunun için ana madde gibi söylemlerde bulunabiliriz. Yukarıda maddelendirdiğim başlıkları tek seferde burada kullanabiliriz. Yukarıdaki başlıklara bakarak söylediğimizde sıralama şu şekilde olacaktır :

animation: name duration timing-function delay iteration-count direction;

Daha kısa kod yazmak , dosyanın elimizden gelebildiğince küçük sağlamak adına bu parametre içerisinde hepsi tek seferde kullanılabilir fakat ben anlaşılabilirlik bakımından her birini ayrı ayrı yazmaktan yanayım.

Başlıklarımızdan bahsettiğimize göre artık bir uygulama yaparak burada gördüğümüz bilgileri pekiştirebiliriz. Uygulamamızda 200px * 200px boyutlarında bir div oluşturacağım. Bu div ilk başta belli bir konum içerisinde ve arka plan rengi kırmızı olacaktır. 10 saniye sürecek animasyonda ilk konumu dışında 3 farklı konumu gezecek ve her keskin dönüş yaptığı noktada arka plan rengi tamamen değişecektir. Tüm anlattığım başlıkları tek bir animasyon içerisinde kullanarak karışıklık yaratmayacağım fakat kullandıklarıma bakarak diğerlerini de sizler kendi uygulamalarınıza ekleyebilirsiniz.

İlk olarak bir ” index.html ” yaratıyoruz. Ardından bir metin editörü ile açıyoruz ve bir div oluşturup buna class atıyoruz. İlk görünüm aşşağıdaki gibi olacaktır :

<!DOCTYPE html>
<html>
    <head>
    <title>BilgiSayaci.Org</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <div class="animation"></div>
</body>
</html>

Şimdi bu ” animation ” class’ ı na sahip olan div’ in boyut , konum , kenarlık , arka plan rengi değerlerini veriyoruz.

<!DOCTYPE html>
<html>
    <head>
    <title>BilgiSayaci.Org</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .animation{width: 200px; height: 200px; border: 1px solid #000; background: blue; margin-left: 20px; margin-top: 20px;}
    </style>
</head>
<body>
    <div class="animation"></div>
</body>
</html>

Bu kod yapısı ile istediğimiz görünümü elde ettikten sonra animation nesnemizi yaratıyoruz ve yukarıda bahsettiğim işlemleri yapıyoruz. Animasyonumuzun son görünümünü sağlayan kod yapısı şu şekilde olacaktır :

<!DOCTYPE html>
<html>
    <head>
    <title>BilgiSayaci.Org</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .animation{
            width: 200px; height: 200px; border: 1px solid #000; background: blue; margin-left: 20px; margin-top: 20px;
        animation-name: bilgisayaci;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
            
        -webkit-animation-name: bilgisayaci;
        -webkit-animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
        
        -moz-animation-name: bilgisayaci;
        -moz-animation-duration: 10s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-direction: alternate;
        -moz-animation-timing-function: linear;
        
        -o-animation-name: bilgisayaci;
        -o-animation-duration: 10s;
        -o-animation-iteration-count: infinite;
        -o-animation-direction: alternate;
        -o-animation-timing-function: linear;
        }
        @keyframes bilgisayaci {
	25%{margin-left:300px; margin-top: 20px; background: yellow;}
        50%{margin-left:300px; margin-top: 300px; background: green;}
        75%{margin-left:20px; margin-top: 300px; background: red;}
        100%{margin-left: 20px; margin-top: 20px; background: yellow;}
        }
        @-webkit-keyframes bilgisayaci {
	25%{margin-left:300px; margin-top: 20px; background: yellow;}
        50%{margin-left:300px; margin-top: 300px; background: green;}
        75%{margin-left:20px; margin-top: 300px; background: red;}
        100%{margin-left: 20px; margin-top: 20px; background: yellow;}
        }
        @-moz-keyframes bilgisayaci {
	25%{margin-left:300px; margin-top: 20px; background: yellow;}
        50%{margin-left:300px; margin-top: 300px; background: green;}
        75%{margin-left:20px; margin-top: 300px; background: red;}
        100%{margin-left: 20px; margin-top: 20px; background: yellow;}
        }
        @-o-keyframes bilgisayaci {
	25%{margin-left:300px; margin-top: 20px; background: yellow;}
        50%{margin-left:300px; margin-top: 300px; background: green;}
        75%{margin-left:20px; margin-top: 300px; background: red;}
        100%{margin-left: 20px; margin-top: 20px; background: yellow;}
        }
        
    </style>
</head>
<body>
    <div class="animation"></div>
</body>
</html>

İşlemlerimizi böylece tamamlamış olduk. Artık tamda istediğimiz gibi bir animasyonumuz oldu. Şimdi bir kaç pratik bilgi vererek makaleyi sonlandıralım.

Öncelikle chrome , mozilla vs. için ayrı ayrı kod yazmak yerine ” prefix ” ismi verilen bir JavaScript plugin’ i ile de bu işlem yapılabilirdi. Bu plugin’ i kullandığımız zaman sadece ” @keyframes ” yazılı alanı ekleyecektik.

Son bilgi olarakta w3schools tan bir link vererek şu an itibariyle Css3′ ün tarayıcı uyumlulukları hakkında küçük bir bilgilendirme yapıyorum. Açılacak sayfadaki uyumluluklara bakarak yeni nesil tarayıcılarda ekstra kod yazmaya gerek olmadığını göreceksiniz. Link : http://www.w3schools.com/cssref/css3_browsersupport.asp

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 45 No ‘lu Maddeden İndirebilirsiniz..