CSS’deki animasyon özelliği; renk, arka plan rengi, yükseklik veya genişlik gibi birçok CSS özelliğini canlandırmak, hareketlendirmek ve efekt vermek için kullanılabilir. Animasyonlar, bir öğenin kademeli biçimde, bir stilden diğer stile geçmesine olanak tanır. CSS animasyonunu kullanmak için önce animasyon için bazı ana kurallar çerçevesinde kurallar ve parametreler belirtmelisiniz. Anahtarlar ve parametreler, öğenin belirli zamanlarda hangi stillere sahip olacağını belirtmektedir.
CSS Animasyonlarını kullanabilmek için @keyframes kuralını kullanmamız gerekmektedir.
@keyframes kuralı, animasyonun ana yapısı oluşturulur. Animasyonun belirli zamanlarda hangi türden stile dönüşeceğini belirten bir kuraldır.
İçindekiler
CSS Animasyonlar ile renklendirme ve renk geçişleri
keyframes çalışma mantığını daha iyi anlamak için renk geçişi örneği yapalım.
Style etiketleri arasında bir keyframes uygulayalım ve ismi renk animasyonu olsun.
Renk geçişi uygulayacağımız renk hangi renkten başlayacaksa “from” kısmında,
hangi renge doğru geçiş olacağını belirtmek için ise “to” biçiminde belirtmemiz gerekiyor.
1 2 3 4 5 | @keyframes cssanimasyonlar1 { from {background-color: yellow;} to {background-color: purple;} } |
Animasyonumuzu, class ismi .kutu1 olan bir div bloğu üzerinde çalıştıralım. Style etiketleri arasında div bloğumuzu özelleştirmeye başlayabiliriz. Burada animasyonumuzun ismini ve animasyon süresini tanımlamamız gerekiyor. Aynı zamanda bir div bloğu üzerinde çalıştığımız için yükseklik ve genişlik belirtmemiz gerekiyor.
animation-name: keyframes ile belirtilen animasyonun ismi yazılmalıdır. Birden fazla animasyonda, keyframesin hangi animasyonu etkileyeceğini belirtmek için kullanılır. Türkçe karakter kullanmadan ve boşluk bırakmadan yazılmalıdır. Tire , altçizgi ve sayılar kullanılabilir. (Örn: renkanimasyonu, renk-animasyonu, renkanimasyonu1)
animation-duration: Animasyonun kaç saniye süreceğini yani uzunluğunu belirten parametredir. 0 saniye girildiği zaman hiçbir tepkime vermez ve animasyon gerçekleşmez.
1 2 3 4 5 6 7 | .kutu1 { width: 350px; height: 350px; background-color: yellow; animation-name: cssanimasyonlar1; animation-duration: 30s; } |
Aşağıda renk geçiş animasyonunu görebilirsiniz. Sarı renkten mor renge bir geçiş animasyonu tanımladık ve süresini 30sn yaptık.
Keyframes animasyon değerini aynı zamanda yüzde cinsinden belirterek de renk değişikliği yaptırabiliriz.
Örneğin animasyon renklerini 4 ayrı bölüme ayıralım. Animasyon sürecinde;
%10 tamamlandığı zaman kırmızı renk, %40 tamamlandığı zaman yeşil renk,
%60 tamamlandığı zaman mavi renk, %100 tamamlandığı zaman ise sarı renkte animasyon bitecek.
1 2 3 4 5 6 7 | @keyframes cssanimasyonlar2 { 10% { background-color: red; } 40% { background-color: green; } 60% { background-color: blue; } 100% { background-color: yellow; } } |
Bu animasyonu çalıştıracağımız div bloğunu da tanımlayalım. Animasonumuzun ismi ” renkanimasonu2 ” , süresini de hızlı olması açısından “1s” olarak tanımladık.
1 2 3 4 5 6 7 | .kutu2 { width: 350px; height: 350px; background-color: yellow; animation-name: cssanimasyonlar2; animation-duration: 1s; } |
Yüzdeli olarak renk geçişi nasıl oluyor ona bakalım:
CSS Animasyonlar ile hareketlendirme
keyframes ile sadece renklendirme değil aynı zamanda objelerin yerlerini de değiştirerek hareket efekti verebiliriz ve hareket animasyonu yapabiliriz.
Örneğin kutucuğumuzu aşağı doğru hareketlendirmek istersek konumlandırma etiketlerini kullanmamız gerekmekte. Eğer ki konumlandırma konusu hakkında eksiğiniz varsa CSS Konumlandırma adlı konumuzu okuyabilirsiniz.
Örnek konumlandırma: 100% {background-color: red; right:100px;}
Keyframes anahtarımızı belirtelim ve içerisine kodlarımızı yazalım. Aşamalı olarak 10’ar px aşağı doğru gidecek şekilde belirtiyoruz.
1 2 3 4 5 6 | @keyframes cssanimasyonlar3 { 10% {background-color: peru; top:10px;} 15% {background-color: deeppink; top:20px;} 20% {background-color: lawngreen; top:30px;} } |
Div bloğumuzun kodlarını belirtelim. Aynı zamanda position relative olarak ayarladık. Relative olarak ayarlamamızın sebebi ise: Relative; div bölümlerinin birbirleriyle olan konumlandırması için kullanılır. Div bölümlerinin arasındaki uzaklık, konumu, durumu gibi ayarlamalar yapmak için kullanılır.
1 2 3 4 5 6 7 | .kutu3 { width: 150px; height: 150px; position: relative; animation-name: cssanimasyonlar3; animation-duration: 3s; } |
Kodun çıktısı ise:
Çeşitli örnekler ile hareket animasyonunu aşağıda inceleyebilirsiniz.
1 2 3 4 5 6 7 8 | @keyframes cssanimasyonlar4 { 0% {background-color:darkgoldenrod; left:100px; top:0px; bottom: 5px;} 25% {background-color:seagreen; left:0px; top:100px; bottom: 0px;} 50% {background-color:aqua; left:100px; top:0px; bottom: 5px;} 75% {background-color:blueviolet; left:0px; top:100px; bottom: 0px;} 100% {background-color:darkred; left:100px; top:0px; bottom: 5px;} } |
1 2 3 4 5 6 7 | .kutu4 { width: 150px; height: 150px; position: relative; animation-name: cssanimasyonlar4; animation-duration: 3s; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | @keyframes cssanimasyonlar5 { 10% {background-color:cadetblue; right:110px; top:0px; bottom: 120px;} 20% {background-color:darkblue; left:50px; top:110px; bottom: 0px;} 30% {background-color:rebeccapurple; right:130px; top:0px; bottom: 130px;} 40% {background-color:gold; left:70px; top:120px; bottom: 0px;} 50% {background-color:hotpink; right:150px; top:0px; bottom: 140px;} 60% {background-color:antiquewhite; left:80px; top:130px; bottom: 0px;} 70% {background-color:lawngreen; right:160px; top:0px; bottom: 150px;} 80% {background-color:greenyellow; left:90px; top:140px; bottom: 0px;} 90% {background-color:brown; right:170px; top:0px; bottom: 160px;} 100% {background-color:red; left:100px; top:150px; bottom: 0px;} } |
1 2 3 4 5 6 7 | .kutu5 { width: 150px; height: 150px; position: relative; animation-name: cssanimasyonlar5; animation-duration: 3s; } |
Animasyonların tekrarını belirleme
Yaptığımız animasyonların kaç defa tekrarlayacağını animation-iteration-count: etiketi ile belirlemekteyiz. Bunu sayısal olarak (1 defa tekrarla, 6 defa tekrarla gibi) veya sonsuz döngü içerisinde yapabiliriz. Örneğin animasyonun 10 defa tekrarlamasını istersek aşağıdaki örneği inceleyebiliriz:
1 2 3 4 5 6 7 8 | @keyframes cssanimasyonlar6 { 0% {background-color:gold; left:50px;} 25% {background-color:lime; left:100px;} 65% {background-color:brown; left:150px;} 85% {background-color:dodgerblue; left:200px;} 100% {background-color:orangered; left:250px;} } |
1 2 3 4 5 6 7 8 | .kutu6 { width: 150px; height: 150px; position: relative; animation-name: cssanimasyonlar6; animation-duration: 3s; animation-iteration-count:10; } |
Animasyonun geçişini biçimlendirme
Animasyonun üzerinde uygulanan efektlerde geçiş efektinin türlerini değiştirebilmek mümkün.
Geçiş efektlerinin türünü animation-timing-function: etiketi ile yapmaktayız.
animation-timing-function: linear; => Duraksamadan doğrusal bir şekilde geçiş sağlar.
animation-timing-function: ease; => Geçişleri adım adım duraksayarak yapar.
animation-timing-function: ease-in-out; => Yavaştan hızlıya ağır bir şekilde geçer.
animation-timing-function: ease-out; => Yavaş başlar, hızlıca biter.
animation-timing-function: ease-in; => Hızlı başlar, yavaşça biter.
Örneklerini aşağıda inceleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @keyframes cssanimasyonlar7 { 00% {background-color:yellow; left:10px;} 10% {background-color:green; left:50px;} 20% {background-color:blue; left:100px;} 30% {background-color:red; left:150px;} 40% {background-color:yellow; left:200px;} 50% {background-color:green; left:250px;} 60% {background-color:blue; left:300px;} 70% {background-color:red; left:350px;} 80% {background-color:yellow; left:400px;} 90% {background-color:green; left:450px;} 100% {background-color:blue; left:500px;} } |
1 2 3 4 5 6 7 8 9 | .kutu7 { width: 150px; height: 150px; position: relative; animation-name: cssanimasyonlar7; animation-duration: 3s; animation-iteration-count:infinite; animation-timing-function: linear; } |
Çeşitli animasyon örnekleri
Keyframes kodlarımız bütün örneklerde aynı olacaktır. Sadece animasyon ismi değişik olacak.
Yalnızca div kodlarında değişiklik olduğu için div css kodlarını incelemeniz daha iyi olacaktır.
Animasyon 1
Fareyle div kutucuğunun üzerine geldiğimiz zaman 5000derece dönen bir animasyon yapalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @keyframes animasyon_ornek1 { 00% {background-color:yellow; left:10px;} 10% {background-color:green; left:50px;} 20% {background-color:blue; left:100px;} 30% {background-color:red; left:150px;} 40% {background-color:yellow; left:200px;} 50% {background-color:green; left:250px;} 60% {background-color:blue; left:300px;} 70% {background-color:red; left:350px;} 80% {background-color:yellow; left:400px;} 90% {background-color:green; left:450px;} 100% {background-color:blue; left:500px;} } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .animasyon1{ width: 150px; height: 150px; position: relative; animation-name: animasyon_ornek1; animation-duration: 3s; animation-iteration-count:infinite; animation-timing-function: linear; transition: 1s ease; } .animasyon1:hover{ transform: rotate(5000deg); } |
Animasyon 2
Fareyle div kutucuğunun üzerine geldiğimiz zaman küçülen bir animasyon yapalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .animasyon2{ width: 0; height: 0; border: 150px solid transparent; border-top: 0; border-bottom: 300px solid white; position:relative; animation-name: animasyon_ornek2; animation-duration: 10s; animation-iteration-count:infinite; animation-timing-function: ease-in; transition: 1s ease; } .animasyon2:hover{ transform: scale(.10); } |
