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.

div {

width:200px;

height:150px;

transition: width, 2s;

background: linear-gradient(blue,red,black)

}

div {

width:200px;

height:150px;

transition: width, 2s;

background: linear-gradient(blue,red,black)

}

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.

div:hover

{

width:500px;

}

div:hover

{

width:500px;

}

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.

div {

width:200px;

height:150px;

transition: width, height, 2s;

background: linear-gradient(blue,red,black)

}

yeni divimizde geçiş için hem width hemde height tanımlamış olduk.

div.hover

{

width:500px;

height:50px;

}

div {

width:200px;

height:150px;

transition: width, height, 2s;

background: linear-gradient(blue,red,black)

}

yeni divimizde geçiş için hem width hemde height tanımlamış olduk.

div.hover

{

width:500px;

height:50px;

}

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.

div {

width:200px;

height:150px;

transition: width, height, 2s;

transition-timing-function:ease-in; /* yavaş başla hızlı devam et*/

background: linear-gradient(blue,red,black)

}

div.hover

{

width:500px;

height:50px;

}

div {

width:200px;

height:150px;

transition: width, height, 2s;

transition-timing-function:ease-in; /* yavaş başla hızlı devam et*/

background: linear-gradient(blue,red,black)

}

div.hover

{

width:500px;

height:50px;

}

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.

<!DOCTYPE html>

<html>

<head>

<style>

div {

width:200px;

height:150px;

transition: width, height, 2s;

transition-timing-function:ease-in;

transition-delay:1s;

background: linear-gradient(blue,red,black)

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

width:200px;

height:150px;

transition: width, height, 2s;

transition-timing-function:ease-in;

transition-delay:1s;

background: linear-gradient(blue,red,black)

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

</body>

</html>

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

İyi Günler Dilerim,

Css3 Transitions (Geçişler) Ders 4

Bunu beğen:

İlgili

Cevapla

Bir Cevap YazınCevabı iptal et

Son Yorumlar

Bunu paylaş:

Bunu beğen:

İlgili

Möglicherweise interessiert Sie:

Cevapla

Bir Cevap YazınCevabı iptal et

Etiketler

Son Yorumlar