CSS3 geçiş efektleri, bir stil özelliği değerinden aynı stil özelliğinin başka bir değerine verilen süre içinde geçiş yapar. Bu şekilde bir animasyon oluşturur.
Geçiş efektlerini CSS3 animasyonlarıyla karıştırmayın. Animasyonlarda
anahtar kareler verilerek farklı bir çok durum arasında daha kolay
geçişler yapabilirsiniz. CSS3 animasyonları hakkında bilgi almak için CSS3 Animasyonları yazımı okuyabilirsiniz.
Örneğin genişlik özelliği için bir geçiş animasyonu tanımlanmış ve genişliği 100 piksel olan bu etiketin genişliği 300 piksel yapılırsa, genişliğin değiştirilmesi işlemi geçiş animasyonu gösterilerek yapılır. Yani etiket verilen süre boyunca bir büyüme animasyonu gerçekleştirir.
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.
Geçiş efektleri için şu stil özellikleri kullanılır:
- transition
- transition-property : Geçiş için kullanılacak stil özelliği adı.
- transition-duration : Geçiş efektinin süresi.
- transition-delay : Geçiş efektine başlamadan önceki bekleme süresi.
- transition-timing-function : Geçiş efektinin bir eğriye göre hareket şekli.
transition-property özelliği, etiketin değiştiğinde geçiş animasyonu için kullanılacak olan stil özelleğini belirtir.
Örnek:
transition-property: width;
Örnekte
width (genişlik) özelliği değiştiğinde geçiş animasyonu yapılacağı belirtilmiştir.
transition-duration özelliği, geçiş animasyonunun süresini belirtir. Saniye veya milisaniye cinsinden verilebilir. Örneğin 3s veya 400ms.
Örnek:
transition-duration: 3s;
Şimdi ikisinin beraber kullanıldığı bir örnek verelim.
Bu örnek, genişliği 100 piksel olan bir etiketin genişliği değiştiğinde, geçişin geçiş efekti ile yapılmasını sağlar. Burada şuna dikkat etmelisiniz. Genişlik özelliği değişmeden animasyon da gerçekleşmez. Bu değişimi JavaScript kullanarak yapabilirsiniz. Ancak biz sadelik için etiketin genişlik özelliğini
:hover seçicisi ile değiştireceğiz.
:hover seçicisi, fare etiketin üzerine geldiğinde kullanılacak olan stili tanımlar.
<style>
.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
transition-property:width;
transition-duration:1s;
}
/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 300px;
}
</style>
<div class="sGecisliStil"></div>
Örneğin çalışan hali:
Örneğin çalışmasından da görüleceği gibi fare kutunun üzerine geldiğinde
:hover seçicisi kullanıldığı için (bu stil uygulandığından) genişlik özelliği değişmiş ve tanımlanan geçiş efekti çalıştırılmıştır. Fareyi kutunun üzerinden çektiğinizde ise
:hover seçicisi iptal olduğundan (
:hover ile tanımlanan stil kaldırıldığından) kutunun genişliği tekrar değişmiş (100 piksel olmuş) ve geçiş animasyonu tekrar çalıştırılmıştır.
transition-delay özelliği, geçiş animasyonu çalıştırılmadan önce bir bekleme süresi belirtir.
Örnek:
<style>
.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
transition-property:width;
transition-duration:1s;
}
/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 300px;
}
</style>
<div class="sGecisliStil"></div>
Örneğin çalışan hali:
transition-timing-function özelliği, animasyonun yavaş başlayıp hızlanması veya tersi gibi durumları belirtmek için kullanılır. Alabileceği değerler şunlardır:
- 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 efektin akış şeklini belirlemek için kullanılır.
Tanımlanan eğrideki dik bölümler efektin 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 özelliği, üstteki tüm özelliklerin değerlerini tek bir satırda tanımlamanıza imkan veren bir kısa yazım şekli sunar. Özellik değerlerini aşağıdaki sırayla ve aralarına birer boşluk vererek belirtiriz.
Kullanımı şöyledir:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
Üstteki örneğin transition özelliği ile tanımlanmış hali şöyledir:
<style>
.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
transition: width 1s 1s;
}
/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 300px;
}
</style>
<div class="sGecisliStil"></div>
Görüldüğü gibi tüm özellikleri kullanmadık. Hepsini yazmak zorunda değiliz. Kullanımda
transition-duration özelliğinin sırası
transition-delay'den önce olduğu için ilk 1s,
transition-duration olarak kullanılacakıtır.
Çoklu Geçiş Tanımlama
Geçiş efektleri, sadece bir özellik üzerinden olmak zorunda değildir. Çoklu özellikler veya tüm özellikler için de geçiş tanımlanabilir.
Eğer tüm özellikler için geçiş tanımlamak istiyorsanız transition-property özelliğine all değerini verin.
Örnek:
<style>
.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
background-color:blue;
transition:all 1s;
}
/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 100px;
background-color:red;
}
</style>
<div class="sGecisliStil"></div>
Örneğin çalışan hali:
Görüldüğü gibi
:hover seçicisinde hem genişlik, hem de zemin rengi değiştirildiğinden her ikisi için de geçiş animasyonu görüntülenmiştir. Bu arada
height özelliği değiştirilmediğinden animasyona dahil edilmemiştir.
Tüm özelliklerin animasyona dahil edilmesini istemiyorsanız, özellikleri ayrı ayrı belirtebilirsiniz. Bunu iki şekilde bildirebilirsiniz. Birinci şekilde
transition özelliğinin değeri olarak geçiş animasyonlarını aralarına birer virgül koyarak belirtebilirsiniz.
<style>
.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
background-color: blue;
transition: height 1s, background-color 2s;
}
/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 100px;
background-color:red;
}
</style>
<div class="sGecisliStil"></div>
İkinci şekilde ise
transition özelliklerini ayrı ayrı kullanıp, her bir özellik değerini değiştirilecek stil özelliğinin sırasına göre aralarına birer boşluk vererek belirtebilirsiniz.
<style>
.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
background-color:blue;
transition-property: height background-color;
transition-duration: 1s 2s;
}
/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 100px;
background-color:red;
}
</style>
<div class="sGecisliStil"></div>
Her iki örnekte de
height için 1 saniye süreli ve
background-color için 2 saniye süreli geçiş animasyonları tanımlanmaktadır.
Efektin sona erme olayı - ontransitionend
ontransitionend olayını karşılayacak bir fonksiyon bildirerek geçiş efekti sona erdiğinde eylem gerçekleştirebiliriz.
ontranisitonend olayını, bazı webkit tarayıcılarda
webkitTransitionEnd olarak bildirmeniz gerekebilir.
JavaScript ile bir olay geçekleştiğinde çalıştırılacak bir fonksiyon belirtmek için,
addEventListener yöntemi kullanılır. Olay, geçiş efekti kullanacak olan etikete atanır.
Fonksiyonu doğrudan olaya atayabilirsiniz ancak aynı olay için çoklu
fonksiyon atamaya izin verdiğinden biz burada addEventListener'i tercih
edeceğiz.
transitionend olayında olayı karşılayan fonksiyona gönderilen
event parametresi ile işimize yarayacak üç bilgiyi de alırız. Bunlar:
- target : Geçiş efekti çalıştırılan etiketin referansı.
- propertyName : Geçiş efekti için kullanılan stil özelliğinin adı
- elapsedTime : Efektin tamamlanma süresi.
Örnek:
<style>
.sGecisliStil {
background-color:blue;
height:50px;
width: 50px;
transition:width 1s;
}
.sGecisliStil:hover {
width: 100px;
}
</style>
<div id="dvGecisliStilKullananDiv" class="sGecisliStil"></div>
<div id="dvMesaj"></div>
<br />
Geçiş efektini tetiklemek için fareyi mavi kutunun üzerine getirin ve geri çekin.
<script>
function efektTamamlandi() {
document.getElementById("dvMesaj").innerHTML += "Geçiş efekti tamamlandı.<br />";
}
var el = document.getElementById("dvGecisliStilKullananDiv");
// Olayları karşılayacak fonksiyonları addEventListener ile bildirirken, olay
// adını başında on olmadan yazarız (ontransitionend -> transitionend)
// dvGecisliStilKullananDiv id değerine sahip etiketin geçiş animasyonu
// tamamlandığında efektTamamlandi isimli fonksiyonu çalıştır.
el.addEventListener("transitionend", efektTamamlandi);
</script>
Örneğin çalışan hali:
Aynı örneği
event parametresi ile beraber verelim.
event parametresinin getirdiği değerleri de kullanan örnek:
<style>
.sGecisliStil {
background-color:blue;
height:50px;
width: 50px;
transition:width 1s;
}
.sGecisliStil:hover {
width: 100px;
}
</style>
<div id="dvGecisliStilKullananDiv" class="sGecisliStil"></div>
Geçiş efektini tetiklemek için fareyi mavi kutunun üzerine getirin ve geri çekin.
<script>
function efektTamamlandi(event) {
var el = document.getElementById("dvMesaj");
el.innerHTML += event.propertyName +
" geçiş efekti " +
event.elapsedTime +
" saniyede tamamlandı.<br />";
}
var el = document.getElementById("dvGecisliStilKullananDiv");
el.addEventListener("transitionend", efektTamamlandi);
</script>
Örneğin çalışan bir şekli:
Efekt tamamlanmadan fareyi kutunun üzerinden çeker ve efekti bitirirseniz süre 1 saniyeden daha kısa görüntülenecektir.
ontransitioncanceled ve ontransitionstart Olayları:
Bu olaylar adlarından da anlaşılabileceği gibi, efekt iptal edildiğinde ve efekt başladığında çalıştırılırlar. Gönderdikleri
event parametresinin kullanabileceğiniz özellikleri
ontransitionend ile aynıdır. Ancak henüz tam bir tarayıcı desteğine sahip olmadıklarından, kullanmadan önce farklı tarayıcılarda test etmelisiniz.
Geçiş efektlerinde kullanılabilecek CSS stil özellikleri:
Geçiş efektlerinde tüm stil özellikleri kullanılamaz. Kullanılabilecek stil özelliklerinin listesi için şuraya bakabilirsiniz.
Bu kadar. Lütfen hata veya eksik görürseniz bildirin.
