CSS3 transitions Nedir? Nasıl Kullanırız ?

Yayın tarihi

CSS3 transitions Nedir? Nasıl Kullanırız ?

CSS3 Transitions

 

Transitions Türkçeye geçiş olarak çevrilmektedir.Transitions ile javascript veya flash kullanmadan efektler uygulayabiliriz.İnternet Explorer dışındaki tarayıcılar desteklemektedir.Diğer tarayıcılarda sorun olmaması için aşağıda tarayıcılara göre ekleri yazdım.

•Firefox 4 -moz-.
•Chrome ve Safari -webkit-.
•Opera  -o-.

Örnekler üzerinde anlatmak  daha açıklayıcı olacaktır.
<!DOCTYPE html>
<html>
<head>
 <style>
 div{
 background-color:red;
 width:200px;
 height:100px;
 transition: width 2s ;
 -moz-transition: width 2s; /* Firefox 4 */
 -webkit-transition: width 2s; /* Safari ve Chrome */
 -o-transition: width 2s; /* Opera */
 }
 div:hover{
 width:300px;
 }
 </style>
</head>
<body>
 <div></div> 
</body>
</html>
transition-property Geçiş uygulanan CSS adını belirtir.
transition-duration Transition un uzunluğunu belirler, varsayılan 0 dır.
transition-timing-function Transition’un hızını belirler.
transition-delay Geçiş’in ne zaman başlayacağını belirler , varsayılan 0 dır.
 Birden fazla geçiş efekti uygulayabiliriz.Aşağıdaki örnekte döndürme efektini de uyguladık.Döndürme efekti için;

transform:rotate(360deg);
-moz-transform:rotate(360deg); /* Firefox 4 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-o-transform:rotate(360deg); /* Opera */

*360deg değerini değiştirerek istediğiniz şekilde döndürebilirsiniz.

transition:width 2s, height 2s; hem enine hem boyuna geçiş sağlayabilirsiniz. Hover içindeki width height değerlerini değiştirerek istediğiniz boyutlar arasında geçiş sağlayabilirsiniz.Div inize başka arkaplan rengi atayıp hoverda bu rengin değişmesini sağlayabilirsiniz.

<!DOCTYPE html>
<html>
<head>
<title>yusufcakmak</title>
 <style>
 div{
 background-color:red;
 width:200px;
 height:100px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
 }
 div:hover{
 width:300px;
 height:200px;
  transform:rotate(360deg);
-moz-transform:rotate(360deg); /* Firefox 4 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
 -o-transform:rotate(360deg); /* Opera */
 }
 </style>
</head>
<body>
 <div></div> 
</body>
</html>

 

Bir Cevap Yazın