Css3 animasyon özellikleri geçiş efektlerine benzer özellikleri ve daha fazlasını içermektedir. Animasyon işleri ile daha önce uğraşanlar için çok tanıdık kodları var. Css3 Animasyon özelliği; javascript veya flash olmadan bize animasyon yapma imkanı sağlamaktadır.
Animasyon tanımlarında tanımlamalar ve zamanlama önceden yapılır sonra uygulanacak elemana tanımlanır. Css Animasyonlar ile web sayfamızı daha canlı hale getirerek kullanıcıların beğeneceği bir yapı ortaya çıkartırız.
Keyframes
Elementimizin CSS özelliklerinin, animasyonun hangi aşamasında hangi eylemleri yapacağını belirlediğimiz alan. @keyframes etiketi ile kullanıyoruz. Animasyonun her bir aşamasını keyframes içerisinde rahatlıkla düzenleyebiliriz. Bu aşamalar genelde 0% ila 100% arasında değer almaktadır. Dilerseniz bu değerleri from (başlangıç) — to (bitiş) ikilisi ile değiştirebilirsiniz.
@keyframes animasyom_adı {
keyframe {
property : value;
}
}
@keyframes soldan_kayan {
0% {
left: 0;
}
50% {
left: 100px;
}
100% {
left: 200px;
}
}
Şeklinde animasyonunuzu oluşturabilirsiniz.
Animasyon oluştururken animasyon özelliklerinin ne işe yaradıklarından bahsedelim ;
@keyframes: Tüm animasyon ayarlarının yapıldığı ve css3 animasyon kodlarının yazıldığı css blogu.
animation: Alttaki özelliklerin tümünün tek satırda kullanılmasına yarayan css blogu .
animation-name: keyframes animasyon adını belirtir:
animation-duration: Bir animasyonun döngüsünü sağlaması için süre belirtilir.
animation-delay: Bir animasyonun başlaması için bir gecikme belirtir.
animation-direction: bir animasyon ters yönde veya alternatif döngülerinde oynaması gerektiğini belirtir.
animation-iteration-count: Animasyonun kaç kere tekrar etmesi gerektiğini belirtir.
animation-timing-function: Animasyonun akış hızını ve şeklini belirtir.
Bugün sizlerle Css animasyon oluşturmadan kısaca bahsettik. Bir sonraki web tasarım blogumuzda görüşmek üzere.
