CSS GEÇİŞ EFEKTLERİ

Tarhi : 26-05-2017 12:45:42 | Yazar : ÇAĞLAR BOSTANCI

CSS GEÇİŞ EFEKTLERİ

Geçiş efekleri objelerin, yükseklik, konum, renk, şefafflık gibi çok sayıda özelliğinin hareket halinde değişmesi ile ilgili 2D ve 3D animasyon etkisine verilen addır. İlk konumu değişen bir nesne son konuma geçtikten sonra tekrar eski konuma geri dönmesi bir geçiş efektidir. Bu gibi işlemlere CSS3’te transition denir.
örn aşağıda fare linkin üzerine geldiğinde arkaplan rengi değişecek.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 ANİMASYON</title>
        <style>
		a{
			background-color:#333;
			color:white;
			padding:5px;
			}
		a:hover{
			background-color:#CCC;
			color:#333;
			}
			
			
        </style>
    </head>
  <body>

<a href="link">CSS3 ANİMASYON</a>

    
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 ANİMASYON</title>

<style>

background-color:#333;

color:white;

padding:5px;

}

a:hover{

background-color:#CCC;

color:#333;

}

</style>

</head>

<body>

<a href="link">CSS3 ANİMASYON</a>

</body>

</html>

Uygulamaya baktığımızda geçiş efekti fare üzerine geldiğinde hızlı bir şekilde olmaktadır. Biz ise bu değişimin daha yavaş ve gözle görülür bir şekilde olmasını istiyoruz. Bu işlemi transition ile göresel etkileşimleri belli bir sürede belirtilen efektlerle, gözle görülür bir şekilde gerçekleşmesini sağlayacaktır.
Geçiş efeklerini tetiklemek için :hover, :focus, :active, :target, :checked, :before, :after pseudo sınıflarından yararlanılır. Bu sınıfların dışında javascripte kullanılabilmektedir. Aşağıdaki yaptığımız uygulama geçişin 2 saniye içinde olmasını ve gözle görülür bir şekilde olmasını sağlaycaktır.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 ANİMASYON</title>
        <style>
		a{
			background-color:#333;
			color:white;
			padding:5px;
			transition-duration:2s;/*GEÇİŞİN İKİ SANİYE İÇERİSİNDE OLMASI İSTENDİ.*/
			transition-property:all;/*TÜM GEÇİŞLER İÇİN ALL KULLANILDI*/
			}
		a:hover{
			background-color:#CCC;
			color:#333;
			}
			
			
        </style>
    </head>
  <body>

<a href="link">CSS3 ANİMASYON</a>

    
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 ANİMASYON</title>

<style>

background-color:#333;

color:white;

padding:5px;

transition-duration:2s;/*GEÇİŞİN İKİ SANİYE İÇERİSİNDE OLMASI İSTENDİ.*/

transition-property:all;/*TÜM GEÇİŞLER İÇİN ALL KULLANILDI*/

}

a:hover{

background-color:#CCC;

color:#333;

}

</style>

</head>

<body>

<a href="link">CSS3 ANİMASYON</a>

</body>

</html>

Transiton-Duration Kullanımı
Bir geçişin ne kadar süre içinde olacağını tanımlar. Saniye (s) ve milisaniye (ms) değerleri alabilir. Diğer fonksiyonlara bağımlı değildir ve tek başına kullanılabilir.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 ANİMASYON</title>
        <style>
		div{
			width:15em;
			height:15em;
			background-color:#333;
			transition-duration:2s;/* Geçişin 2 saniye içerisinde olmasını istedik.
			 Sadece yukarıdaki kodu kullanırsak aşağıdaki kodları varsayılan olarak atamış gibi olur. */
			/*transition-property:all; 
			transition-timing-function:ease;
			transition-delay:0s;*/
			}
		div:hover{
			border-radius:50%;
			background-color:#CCC;
			color:#333;
			}
			
			
        </style>
    </head>
  <body>
		<div></div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 ANİMASYON</title>

<style>

div{

width:15em;

height:15em;

background-color:#333;

transition-duration:2s;/* Geçişin 2 saniye içerisinde olmasını istedik.

Sadece yukarıdaki kodu kullanırsak aşağıdaki kodları varsayılan olarak atamış gibi olur. */

/*transition-property:all;

transition-timing-function:ease;

transition-delay:0s;*/

}

div:hover{

border-radius:50%;

background-color:#CCC;

color:#333;

}

</style>

</head>

<body>

</body>

</html>

Transition-Timing-Function Kullanımı
Bir geçiş efektinin hareket tarzını belirler. Animasyon cubic-bezier ile sağlanır. cubic-bezier parametreleri ile uğraşmadan hareketleri basitçe tanımlamak için, sık sık kullanılan hareketler belli ismler altında standart olarak tanımlanmıştır. Bu hareketleri tanımlayan değerleri açıklamaları ile aşağıda verilmiştir.

transition-timing-function: cubic-bezier | ease | linear | ease-in | ease-out | ease-in-aout | staps | step-start | step-end;
cubic-bezier : (x1, y1, x2, y2) koordinatları ve zaman göre nesnenin hareket biçimini belirler.
ease : Düzgün hızlanan hareketi tanımlar. cubic-bezier(0.25,0.1,.25,1) karşılığı ilede tanımlanabilir. Varsayılan değerdir.
linear : Düzgün değişmeyen hızlı hareketi tanımlar. Geçiş boyunca hareket biçimi değişmez. Aynı hareketi cubic-bezier(0,0,1,1) karşılığı ile de tanımlayabiliriz.
easi-in : Yavaş hareketten hızlı harekete geçişi tanımlar. Aynı hareketi cubic-bezier(0.42,0,1,1) ile sağlayabiliriz.
ease-out : Hızlı hareketten yavaş harekete geçişi tanımlar. Aynı hareketi cubic-bezier(0,0,0.58,1) ile sağlayabiliriz.
ease-in-out : Yavaş hareketten hızlı harekete, hızlı hareketten yavaş harekete geçişi sağlar. Aynı hareketi cubic-bezier(0.42,0,0.58,1) ile sağlayabiliriz.
steps : Geçiş için başlangıç adınımını tanımlar. Örneğin steps(2, start) demekle iki basamaklı (merdiven gibi) geçişi iki adımda atlayarak yapar.
step-start : Geçiş süresine bakmaksızın doğrudan son konuma atlama yapar. steps(1, start) ile aynı anlama gelir.
step-end : Geçiş süresinin bitmesini bekler ve doğrudan son konuma atlama yapar. steps(1, end) ile aynı anlama gelir.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 ANİMASYON</title>
        <style>
		div{
			width:15em;
			height:15em;
			background-color:#333;
			transition-duration:2s;
			transition-property:all; 
			transition-timing-function:ease;
			
			}
		div:hover{
			border-radius:50%;
			background-color:#CCC;
			color:#333;
			}
			
			
        </style>
    </head>
  <body>
		<div></div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 ANİMASYON</title>

<style>

div{

width:15em;

height:15em;

background-color:#333;

transition-duration:2s;

transition-property:all;

transition-timing-function:ease;

}

div:hover{

border-radius:50%;

background-color:#CCC;

color:#333;

}

</style>

</head>

<body>

</body>

</html>

Transition-Delay Kullanımı
Bir geçiş efektinin belli bir süre gecikme ile başlatılmasını sağlar. Saniye (s) ve milisayniye (ms) değerleri alabilir.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 ANİMASYON</title>
        <style>
		div{
			width:15em;
			height:15em;
			background-color:#333;
			transition-duration:2s;/*Geçişin gerçekleşme süresi.*/
			transition-property:all; /*Tüm geçişler için*/
			transition-timing-function:ease;/*Geçişin gerçekleşme hız sitili*/
			transition-delay:1s;/*Bir saniye gecikme ile başlar.*/
			}
		div:hover{
			border-radius:50%;
			background-color:#CCC;
			color:#333;
			}
			
			
        </style>
    </head>
  <body>
		<div></div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 ANİMASYON</title>

<style>

div{

width:15em;

height:15em;

background-color:#333;

transition-duration:2s;/*Geçişin gerçekleşme süresi.*/

transition-property:all; /*Tüm geçişler için*/

transition-timing-function:ease;/*Geçişin gerçekleşme hız sitili*/

transition-delay:1s;/*Bir saniye gecikme ile başlar.*/

}

div:hover{

border-radius:50%;

background-color:#CCC;

color:#333;

}

</style>

</head>

<body>

</body>

</html>

Cubic-Bezier Eğerisi ve Anlamı
Fransız matematik Pierre Bezier tarrafından tanımlanmış eğrilere verilen addır. Bezier eğrisi algoritması kullanılarak, Kontrol noktası olarak adlandırılan noktaları giriş değeri alıp bu noktalara göre eğri oluşuturulabilir. 3 boyutlu grafiklerin ve yüzeylerin tasarlanmasında sıklıkla kullanılır.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 ANİMASYON</title>
        <style>
			 .kutu{
			width:15em;
			height:3em;
			background-color:#333;
			transition-property:width; /*Tüm geçişler için*/
			transition-duration:5s;/*Bir saniye gecikme ile başlar.*/
			border-bottom:1px solid white;
			color: white;
			}
		 .kutu:hover{
			width:20em; 
			 }
			 
			 
		 .ease{  transition-timing-function: ease;}
		 .linear{    transition-timing-function:linear;}
		 .ease-in{    transition-timing-function: ease-in;}
		 .ease-out{    transition-timing-function:ease-out;}
		 .ease-in-out{   transition-timing-function:ease-in-out;}
		 .step-start{   transition-timing-function:step-start;}
		 .step-end{    transition-timing-function:step-end;}
		 .steps{    transition-timing-function: steps(5,start);}
        </style>
    </head>
  <body>
		<div class="kutu ease" >ease</div>
        <div class="kutu linear">linear</div>
        <div class="kutu ease-in"> ease-in</div>
        <div class="kutu ease-out">ease-out</div>
        <div class="kutu ease-in-out">ease-in-out</div>
        <div class="kutu step-start">step-start</div>
        <div class="kutu step-end">step-end</div>
        <div class="kutu steps">steps(5,start)</div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 ANİMASYON</title>

<style>

.kutu{

width:15em;

height:3em;

background-color:#333;

transition-property:width; /*Tüm geçişler için*/

transition-duration:5s;/*Bir saniye gecikme ile başlar.*/

border-bottom:1px solid white;

color: white;

}

.kutu:hover{

width:20em;

}

.ease{ transition-timing-function: ease;}

.linear{ transition-timing-function:linear;}

.ease-in{ transition-timing-function: ease-in;}

.ease-out{ transition-timing-function:ease-out;}

.ease-in-out{ transition-timing-function:ease-in-out;}

.step-start{ transition-timing-function:step-start;}

.step-end{ transition-timing-function:step-end;}

.steps{ transition-timing-function: steps(5,start);}

</style>

</head>

<body>

<div class="kutu linear">linear</div>

<div class="kutu step-start">step-start</div>

<div class="kutu steps">steps(5,start)</div>

</body>

</html>

Transition Fonksiyonu
transition-property, transition-duraty, transition-timing-function, transition-delay fonksiyonlarının değerlerini tek başına kullanan bir CSS3 fonksiyonudur. transition fonksiyonu ile geçiş fonksiyonlarının değerlerini bir satırda tanımlayıp aynı işi yapabiliriz. Söz dizimi aşağıdaki gibidir. Crome ve safari için transition kodunun başına kesinlikle -webkit- konulmalıdır.

transition: özellikseçme , Animasyonsüresi , AnimasyonTipi , GecikmeSüresi;

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 ANİMASYON</title>
        <style>
			 #ana,.ic{ 
			 width:200px; height:200px ; background: white; border:1px solid #000;
			 }
			 #ana{ position:relative;}
			 .ic{
				position:absolute;
				left:0; top:0;
				-webkit-transition:left 1s ease-in-out; 
				transition:left 1s ease-in-out; 
				 }
			#bir{ z-index:100;}
			#iki{ z-index:90;}
			#uc{ z-index:80;}
			#ana:hover #bir{ left:200px;}
			#ana:hover #iki{ left:400px;}
			#ana:hover #uc{ left:600px;}
			
			#altanadiv,.yatayic{
				width:400px;
				height:100px;
				border:1px solid #999;
				background:#000;
				color:white;
				
				-webkit-transition:top 1s ease-in-out;
				transition:top 1s ease-in-out;
				}
			#altanadiv{ position:relative;}
			.yatayic{ position: absolute; left:0; top:0}
			#ybir{ z-index:100;}
			#yiki{ z-index:90;}
			#yuc{ z-index:80;}
			#altanadiv:hover #ybir{ top:100px;}
			#altanadiv:hover #yiki{top:200px;}
			#altanadiv:hover #yuc{top:300px;}
			
			
        </style>
    </head>
  <body>
		<div id="ana">ana içerik
        	<div id="bir" class="ic"> Birinci içerik </div>
            <div id="iki" class="ic">İkinici içerik </div>
            <div id="uc" class="ic">Üçüncü içerik </div>
        </div>
        <div id="altanadiv">anadiv
        	<div id="ybir" class="yatayic">BİR</div>
            <div id="yiki" class="yatayic">İKİ</div>
            <div id="yuc" class="yatayic">ÜÇ</div>
        </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 ANİMASYON</title>

<style>

#ana,.ic{

width:200px; height:200px ; background: white; border:1px solid #000;

}

#ana{ position:relative;}

.ic{

position:absolute;

left:0; top:0;

-webkit-transition:left 1s ease-in-out;

transition:left 1s ease-in-out;

}

#bir{ z-index:100;}

#iki{ z-index:90;}

#uc{ z-index:80;}

#ana:hover #bir{ left:200px;}

#ana:hover #iki{ left:400px;}

#ana:hover #uc{ left:600px;}

#altanadiv,.yatayic{

width:400px;

height:100px;

border:1px solid #999;

background:#000;

color:white;

-webkit-transition:top 1s ease-in-out;

transition:top 1s ease-in-out;

}

#altanadiv{ position:relative;}

.yatayic{ position: absolute; left:0; top:0}

#ybir{ z-index:100;}

#yiki{ z-index:90;}

#yuc{ z-index:80;}

#altanadiv:hover #ybir{ top:100px;}

#altanadiv:hover #yiki{top:200px;}

#altanadiv:hover #yuc{top:300px;}

</style>

</head>

<body>

<div id="ana">ana içerik

<div id="bir" class="ic"> Birinci içerik </div>

<div id="iki" class="ic">İkinici içerik </div>

<div id="uc" class="ic">Üçüncü içerik </div>

</div>

<div id="altanadiv">anadiv

</div>

</body>

</html>

İlgili

CSS

CSS GEÇİŞ EFEKTLERİ

Hemen Başla

Yorumlar

Yorum Yap

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

CSS GEÇİŞ EFEKTLERİ