Merhaba bu yazımda CSS3 ile birlikte gelen keyframes özelliği geçişleri sayesinde güzel animasyonlar yapmamızı sağlıyor.
Kullanımı
Basit olarak kullanımında 2 kavram mevcut from ve to From başlangıçta, To Bitişte ne olacağını belirtiyor.
@keyframes ornek
{
from {background:#000;}
to {background:#fff;}
}
Bir diğer Kullanımına aşağıda görmüş olduğunuz gibi yüzdelik şeklindedir.
@keyframes ornek
{
from {color:#fff;}
25% {color:#666;}
50% {color:#000;}
75% {color:#333;}
to {color:#ccc;}
}
Bilgi: Animasyonun her tarayıcıda çalışmasını istiyorsak aşağıdaki ekleri eklememiz gerekiyor.
Buraya kadar olan kısım animasyonun nasıl olacağını renk,biçim,vs gibi şeyleri belirtiyor.Şimdide animasyonun tanmlamasını yapalım.
animation:ornek 5s; -moz-animation:ornek 5s; -webkit-animation:ornek 5s; -o-animation:ornek 5s;
Yukarıda görmüş olduğunuz gibi ornek divini animasyona belirttim.Tarayıcı ön eklerinide bellirttim @keyframes olarak tanımlama yaparken başına -moz ekleyerek firefox içinde uyumlu yapabilirsiniz.
Bu yazım bu kadar @keyframes ile ilgili animasyon örneklerine bir sonraki yazımda anlatacağım.