Belki CSS3 ile gelen en güzel örneklerden birisi. Artık herhangi bir flash animasyon ya da javascript olmadan CSS ile efekt vermek mümkün. Bunu yaparken sadece değişiklik yapılmak istenen CSS özelliğini ve bunun yanında da bu özellik için saniye cinsinden sürenin belirtilmesi yetiyor.
Örnek
<head>
<style type="text/css">
.oknpc{
width:150px;
height:150px;
background:#dddddd;
transition:width 2s,height 2s;
-webkit-transition:width 2s, height 2s, -webkit-trans-form 2s;
-o-transition:width: 2s, height 2s, -o-transform 2s;
}
.oknpc:hover{
cursor:pointer;
width:250px;
height:250px;
transform:rotate(90deg);
-webkit-transform:rotade(90deg);
o-otransform:rotate(90deg);
}
</style>
</head>
<body>
<div class="oknpc">Trasition Efekt</div>
</body>
Not: IE ve Firefox’ta transition özelliğinin desteği bulunmamaktadır.Chrome ve Safari için -webkit, Opera için -o prefix’i kullanılmaktadır.
Destekleyen Tarayıcılar
Chrome , Opera , Safari
