Css İle Animasyon
Yeni geliştirmeler sayesinde JQuery, JavaScript, Flash vb diller kullanmadan da sayfa içindeki nesnelere animasyonlar verilebilmektedir.
CSS ile oluşturulan animasyonlar hem daha pratik, hem de kod karmaşası daha az yaratmakta olduğu için, gittikçe daha fazla tercih edilmektedir.
Ancak eski tarayıcı versiyonlarında css animasyonlarının çalışmayacağı unutulmamalıdır.
|
|
Bu örneklerin kodları Konu Örnekleri kısmında verilmiştir. Öncelikle css ile animasyon nasıl yapılır öğrenelim.. |
|
|
CSS ile Animasyon Nasıl Yapılır?
CSS ile animasyon oluşturma işi iki aşamalı gerçekleştirilir.
1. Aşama:
@keyframes özelliği ile animasyonun hangi aşamasında hangi değişikliklerin meydana geleceği belirtilir. Bu kısımdaki zaman aşamaları farklı şekillerde belirtilebilir. Aşağıdaki iki örneği inceleyiniz.
Örnek1: Aşağıda animasyon1 adında bir animasyon oluşturulmuş, from kısmında başlangıçtaki özellikleri, to kısmında ise en son alacağı hal belirlenmiştir. Bu örnekte arkaplan renginin maviden yeşile döneceği belirlenmiştir.
@keyframes animasyon1 {
from {background-color: blue;}
to {background-color: green;}
}
Örnek2: Aşağıdaki gibi bir kullanım ile animasyonun istenilen zamanında istenilen değişikliklerin meydana gelmesi sağlanabilir. Bu örnekte arkaplan rengi sırayla mavi, kırmızı, turuncu ve yeşil renklere dönüşecektir. Animasyonun toplam süresine göre her renge dönüşme zamanı tarayıcı tarafından hesaplanacaktır.
@keyframes animasyon2 {
0% {background-color: blue;}
25% {background-color: red;}
50% {background-color: orange;}
100% {background-color: green;}
}
2. Aşama
Yukarıdaki şekilde animasyon oluşturulduktan sonra yine Css ile istenilen nesnelere uygulanabilir.
Uygulama aşamasında animasyonun toplam süresi, gecikme süresi, ivmelenme şekli, yönü gibi özellikler de belirtilir.
Css animasyonlarında şu özellikler kullanılabilir:
animation-name: @keyframes ile yukarıdaki gibi oluşturulan animasyonlardan hangisinin kullanılacağı
animation-duration: Animasyonun toplam süresi saniye cinsinden ( 4s gibi )
animation-delay: Animasyon başlamadan önce beklenecek süre saniye cinsinden ( 2s gibi )
animation-iteration-count: Animasyonun kaç kez tekrar edeceği (Sayı verilebilir veya infinite yapılarak sürekli dönmesi sağlanabilir.)
animation-direction: Reverse değeri ile animasyonun bu nesnede sondan başa uygulanması sağlanır. Alternate değeri verilerek ise sırayla bir düz bir ters çalışması sağlanabilir.
animation-timing-function: Animasyonun ivmelenme şekli burada belirtilir. Linear değeri sabit hızda olmasını sağlar. Diğer ihtimaller şunlardır:
ease – yavaş başlar, hızlanır, tekrar yavaşlar
linear – ivmesiz, yani sabit hızla çalışır
ease-in – yavaş başlar, gittikçe hızlanır
ease-out – sona doğru yavaşlar
ease-in-out – başta ve sonda yavaş çalışır
cubic-bezier(n,n,n,n) – bir fonksiyon yardımıyla kendi değerlerinizi oluşturabilirsiniz.
Örnek1: Bu örnekte kutu1 class’ı uygulanan nesnelere animasyon2 uygulanacaktır. Toplam süre 4 saniye yapılmıştır.
.kutu1 {
width: 50px;
height: 50px;
background-color: blue;
animation-name: animasyon2;
animation-duration: 4s;
}
Örnek2: Bu örnekte kutu2 class’ı uygulanan nesnelere animasyon2 uygulanacaktır. Toplam 4 saniye sürmesi, sabit hızlı olması, 1 sn gecikmesi, sürekli tekrar etmesi, ve bir düz bir ters oynaması sağlanmıştır.
.kutu2 {
animation-name: animasyon2;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Animasyon Özelliklerinin Kısa Yazılışı
Yukarıdaki örnekte kullanılan tüm animasyon özellikleri tek bir satırda da belirtilebilir. Örnek:
.kutu2 {
animation: animasyon2 4s linear 1s infinite alternate;
}
css ile animasyon nasıl yapılır, css animasyon oluşturma, css ile nesnelere hareket kazandırma, css animasyon örnekleri, how to make css animations transitions
KONU İLE İLGİLİ ÖRNEKLER
.kutu4 {
width: 120px;
padding:10px 5px;
position: relative;
animation-name:animasyon4;
animation-duration:4s;
border: 2px solid #F6F;
}
@keyframes animasyon4 {
0% {left:0px;border: 2px solid #F6F; -ms-transform: matrix(1, 0, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0, 1, 0, 0); /* Safari */
transform: matrix(1, 0, 0, 1, 0, 0);}
50% {left:110px;border: 2px solid #3FC;-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);}
100% {left:0px;border: 2px solid #F6F;-ms-transform: matrix(1, 0, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0, 1, 0, 0); /* Safari */
transform: matrix(1, 0, 0, 1, 0, 0);}
}
div {
width: 120px;
padding:10px 5px;
position: relative;
background-color: blue;
animation-name: animasyon3;
animation-duration: 6s;
animation-iteration-count: infinite;
font-weight: bold;
text-align: center;
}
@keyframes animasyon3 {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: yellow; left:0px; top:100px;}
50% {background-color: green; left:200px; top:100px;}
75% {background-color: orange; left:200px; top:0px;}
100% {background-color: blue; left:0px; top:0px;}
}
16472 kez okundu.