CSS anlık geçişleri bünyesinde barındırır. Bu özelliği kullanarak butonlarımızın üzerine gelindiğinde rengini değiştirebiliriz.
Ancak bu geçişleri zamana yaymak ta mümkündür. Anlık geçiş yerine zamanla dönüşüm uygulayabiliriz.
Bunun için transition özellğini kullanacağız.
transition: property duration timing-function delay;Geçiş efektlerini uygulamak için aşağıdaki özelliklerden yararlanacağız.
transition-property : Uygulanacak geçişin hangi özelliği kullanılarak yapılacağını belirler. renk,boyutlar,padding,margin v.b.
transition-duration : Uygulanacak geçişin ne kadar süreceğini belirler. 0 ise geçiş anlık olacak demektir.
transition-delay : Uygulanan geçiş efektinin ne kadar zaman sonra başlayacağını belirler.
O zamana kadar animasyonu durdurur ve sonra başlatır.
transition-timing-function : ease, ease-in, ease-out, ease-in-out ve cubic-bezier gibi değerler alarak geçiş animasyonunu belirtir.
Bunları tek tek yazabildiğimiz gibi bir aradada yazabiliriz.
transition: background .9s ease-in-out, color .9s ease-in-out, padding .9s ease-in-out;
Şimdi bu özellikleri kullanarak bir sayfa yapalım ve sayfamıza bir link koyarak onu css ile süsleyelim.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<title> CSS3 İle Geçişler</title>
<style>
a {
color: white;
transition: background .9s ease-in-out, color .9s ease-in-out, padding .9s ease-in-out;
padding: 4px 6px;
background-color: red;
border-radius: 5px;
border: 1px solid #880000;
}
a:hover {
color: yellow;
background-color: blue;
border: 1px solid #000088;
padding: 4px 20px;
}
</style>
</head>
<body>
<a href="#"> Link </a>
</body>
</html>
Linkimiz padding ve verdiğimiz arkaplan sayesinde bir butona benzemekte ve üzerine gelindiğinde biçimini ve rengini değiştirmektedir.
Örnek çalışmaya
buradan ulaşabilirsiniz.
Düzenle Kullanıcı Tarafından 10 Eylül 2015 Perşembe 13:02:41(UTC)
| Sebep: Sebep Bildirilmesi
