Css3 Transitions (Geçişler) Ders 4

Merhaba,

Bu dersimizde Transitions (geçişler) konusunu inceleyeceğiz. Önce transitions hakkında kısa bir bilgi verelim. Adındanda anlaşılacağı üzere geçişler bir durumdan başka bir durum geçiş için kullanılmaktadır. Yani mevcutta kullanılan bir stilden başka bir stile geçiş. Bu bir kutu yada imaj döndürmek, yada opacity ile oynayarak yanıp sönme efekti vermek, kısaltıp uzatmak vs vs…

Genel olarak mantık şu şekilde işler ;

  • Hangi efekti yapacağız.
  • Ne kadar sürede yapacağız.

Başlayalım örneğimize ;

hemen bir div tanımlayalım.


 

dikkat ettiyseniz yukarıda oluşturduğumuz kutuya transition olarak width ve 2s parametrelerini verdik. Bunun anlamı ben senin widthinle oynayabilirim ve yaptığım işlemi 2 sn de tamamlayacaksın.


 

yukarıda yazdığımız kodu çalıştırdığımızda ve kutumuzun üzerine geldiğimizde width 200 den 500 e kadar uzayacak ve bu işlem 2sn içerisinde olacak.

Yukarıdaki örnekte sadece width i uzattık. Peki burada bir parametre daha ekleyebilirmiydik tabi ki eklerdik. Hemen ekleyelim.


 

Artık bir elemente geçiş ekleyebilecek bilgiye sahibiz. Şimdi biraz daha detaylandıralım.

Geçiş efektimizin hızı ya da hızı demeyelimde hız ile alakalı davranış şeklinide ayarlayabiliriz. Yani geçişimiz hızlı başlasın sonra yavaşlasın, ya dayavaş başlasın sonra hızlansın gibi bunun için kullanacağımız yapıyı yukarıda yaptığımız örneğe ekleyelim.


 

birde eğer geçişimiz hemen başlamasın örn 5 sn başlasın dersek ;

transition-delay:5s;

bu özellik bizim geciktirme için kullanacağımız özelliktir. Hemen kod içerisinde kullanalım. Hatta kodumuzun son halini tamamen kopyalayalım.


 

Geçişler konusunda tamamlamış olduk. Bir sonraki dersimizde animasyon yapısını inceleyeğiz.

İyi Günler Dilerim,

 

0 cevaplar

Cevapla

Want to join the discussion?
Feel free to contribute!

Bir Cevap Yazın