Bu yazımızda Css’te Animation özelliği nedir?, Nasıl kullanabiliriz? onu öğreneceğiz. Animation özelliği ile bir Html etiketi üzerinde javascript veya flash kullanmadan animasyon işlemlerini gerçekleştirebiliriz.
Animasyon için gerekli Css kodlarını @keyframes özelliği içerisine yazıyoruz.
Bunu 2 farklı yol ile yapabiliriz;
1 @keyframes özelliği içerisindeki from ve to içerisine kodlarımızı yazabiliriz.
Animasyon, belirtilen sürede from içerisindeki Css kodlarından başlar ve kademeli olarak to içerisindeki Css kodlarına dönüşünceye kadar devam eder.
Burda @keyframes özelliğinden hemen sonra dilediğimiz bir animasyon ismi vermemiz gerekiyor.
Kullanımı şu şekilde,
|
1 2 3 4 5 6 7 8 9 10 |
@keyframes animasyon_adı{ from { /* başlangıç css kodları buraya yazılacak. */ } to { /* bitiş css kodları buraya yazılacak. */ } } |
2 @keyframes özelliği içerisinde, animasyonun belirtmiş olduğumuz yüzde değerlerine göre kademeli olarak uygulanmasını sağlayabiliriz. Yine @keyframes özelliğinden hemen sonra dilediğimiz bir animasyon ismi vermemiz gerekiyor.
Kullanımı şu şekilde,
|
1 2 3 4 5 6 7 8 |
@keyframes animasyon_adı{ 0% { /* Başlangıç css kodu buraya yazılacak */ } 40% { /* Yüzde 40'a kadar olan css kodu buraya yazılacak */ } 90% { /* Yüzde 90'a kadar olan css kodu buraya yazılacak */ } 100% { /* Bitiş css kodu buraya yazılacak */ } } |
Animasyonumuz için gerekli Css kodlarını bu şekilde yazdıktan sonra şimdi de bir Html etiketi üzerinde bu animasyonu nasıl uygulayabileceğimize bakalım.
CSS ANİMATİON NAME ÖZELLİĞİ
Animasyonun hangi etikete uygulanmasını istiyorsak, o etikete animation-name özelliği ile yazmış olduğumuz animasyonun adı verilir.
Örneğin yukarda @keyframes ile yazmış olduğumuz bir animasyon olsun. Bunu bir div etiketine uygulamak istiyorsak,
|
1 2 3 4 5 |
div { animation-name:animasyon_adı; } |
şeklinde yazmamız gerekiyor.
CSS ANİMATİON DURATİON ÖZELLİĞİ
Animasyonun ne kadar sürede tamamlanacağını belirtir. Varsayılan değeri 0’dır.
Örneğin animasyonun 3 saniye sürmesini istiyorsak,
|
1 2 3 4 5 |
div { animation-duration:3s; } |
şeklinde yazmamız gerekiyor.
CSS ANİMATİON DELAY ÖZELLİĞİ
Animasyonun belirteceğimiz süre kadar geç başlamasını sağlayabiliriz.
Örneğin animasyonun 2 saniye geç başlamasını istiyorsak,
|
1 2 3 4 5 |
div { animation-delay:2s; } |
şeklinde yazmamız gerekiyor.
Şimdi buraya kadar öğrendiklerimizle basit bir animasyon örneği yapalım.
Hover olayı ile div’in üzerine gelindiğinde animasyonun başlamasını sağlayalım.
► Birinci div’de keyframes’in ilk kullanımını görelim.
► İkinci div’de keyframes’in ikinci kullanımını görelim.
► Üçüncü div’de ise animation delay özelliği ile animasyonu 2 saniye geç başlatalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<style> div { width: 80px; height: 80px; background-color: cornflowerblue; margin: 10px; display:inline-block; } /* Animasyon 1 */ @keyframes animation1 { from{ background-color:cornflowerblue; } to{ background-color:red; border-radius:50%; } } /* Animasyon 2 */ @keyframes animation2 { 0% {background-color: red; border-radius:10px;} 25% {background-color: yellow; border-radius:20px;} 50% {background-color: blue; border-radius:40px;} 100% {background-color: green; border-radius:50px;} } /* Animasyon 3 */ @keyframes animation3 { 0% { border-radius:10px;} 25% { border-radius:20px;} 50% { border-radius:40px;} 100% { border-radius:50px;} } #animation1:hover{ animation-name:animation1; animation-duration:3s; } #animation2:hover{ animation-name:animation2; animation-duration:3s; } #animation3:hover{ animation-name:animation3; animation-duration:5s; animation-delay:2s; } </style> <div id="animation1"></div> <div id="animation2"></div> <div id="animation3"></div> |
CSS ANİMATİON İTERATİON COUNT ÖZELLİĞİ
Bu özellik ile animasyonun kaç defa tekrar edeceğini belirtebiliriz.
Örneğin animasyonun 3 defa tekrar etmesini istiyorsak,
|
1 2 3 4 5 |
div { animation-iteration-count:3; } |
şeklinde yazmamız gerekiyor.
Eğer animasyonun sonsuz döngüye girmesini yani sürekli tekrar etmesini istiyorsak infinite değerini vermemiz gerekiyor.
|
1 2 3 4 5 |
div { animation-iteration-count:infinite; } |
Bir div oluşturalım ve infinite değeri ile animasyonun sürekli devam etmesini sağlayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<style> @keyframes sonsuz { 0% { border-radius:5px;} 20% { border-radius:10px;} 40% { border-radius:20px;} 60% { border-radius:30px;} 80% { border-radius:40px;} 100% { border-radius:50px;} } div{ width: 80px; height: 80px; background-color: cornflowerblue; margin: 10px; display:inline-block; animation-name:sonsuz; animation-duration:3s; animation-iteration-count:infinite; } </style> <div></div> |
CSS ANİMATİON DİRECTİON ÖZELLİĞİ
Animasyonun yönünü belirlememizi sağlar. Dört değer alabilir. Bunlar;
► normal : Varsayılan değerdir.
► reverse : Animasyonun ters yönde çalışmasını sağlar.
► alternate : Animasyonun önce normal sonra tam tersi yönde çalışmasını sağlar ve bu şekilde devam eder.
► alternate-reverse : Animasyonun önce ters yönde sonra normal yönde çalışmasını sağlar ve bu şekilde devam eder.
Şimdi bir div etiketi tanımlayalım ve animation-direction özelliğine 3 farklı değeri vererek aralarındaki farkı uygulamalı olarak görelim.
animation-direction : reverse
animation-direction : alternate
animation-direction : alternate-reverse
CSS ANİMATİON TİMİNG FUNCTİON ÖZELLİĞİ
Animasyon gerçekleşirken bunu farkı şekillerde yapabiliyoruz.
Örneğin 5 saniyede gerçekleşeceğini düşünelim. Gerçekleşecek animasyon, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir. Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir.
İşte bu gibi seçenekleri belirlemek için animation-timing-function özelliğini kullanıyoruz. Değer olarak şunları alabilir;
► ease : Animasyon, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.)
► linear : Animasyon, baştan sona aynı hızda devam eder.
► ease-in : Animasyonun yavaş başlamasını sağlar.
► ease-out : Animasyonun yavaş bitmesini sağlar.
► ease-in-out : Animasyon, yavaş başlar ve yavaş biter.
CSS ANİMATİON FİLL MODE ÖZELLİĞİ
Animasyonun bittikten sonraki durumu belirlememizi sağlar. Değer olarak şunları alabilir;
► none : Animasyon bittikten sonra başlangıç değerlerine döner. (Varsayılan değerdir.)
► forwards : Animasyon bittikten sonraki son durumunda kalır ve o son durumdaki değerler uygulanır.
► backwards : Animasyon bittikten sonra veya durdurulduğunda, başlangıç özellikleri uygulanır.
► both : forwards ve backwards değerleri birlikte uygulanır.
CSS ANİMATİON PLAY STATE ÖZELLİĞİ
Bu özellik ile animasyonları durdurabiliriz. 2 değer alabilir. Bunlar;
► running : Varsayılan değerdir ve animasyon normal bir şekilde çalışır.
► paused : Animasyonu durdurmamızı sağlar.
Şimdi bir div etiketi tanımlayalım ve üzerine geldiğimizde animation-play-state özelliği ile animasyonu durduralım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> div { width: 100px; height: 100px; background-color: cornflowerblue; position: relative; animation: example 5s infinite; } div:hover { animation-play-state: paused; } @keyframes example { from { left: 0px; } to { left: 200px; } } </style> <div></div> |
Öğrendiğimiz bu özellikleri, animation özelliği ile birlikte kullanabiliriz.
Kullanımı şu şekilde,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
animation : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction; /* Uzun hali */ animation-name: example; animation-duration: 3s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; /* Kısa hali */ animation: example 3s linear 2s infinite alternate; |
CSS ANİMATİON ÖZELLİĞİ TARAYICI DESTEĞİ
| Özellik | Chrome | IE | Firefox | Safari | Opera |
| @keyframes |
43.0 4.0 -webkit- |
10.0 |
16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation |
43.0 4.0 -webkit- |
10.0 |
16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Bu resimde tarayıcıların animation ve @keyframes özelliklerini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını ve özelliklerin ön ekler ile birlikte kullanıldığında, hangi versiyondan itibaren sorunsuz çalıştığını görebilirsiniz.
Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Önemli Bu özellikleri eski tarayıcılarda da sorunsuz bir şekilde kullanmak istiyorsanız, ön eklerle birlikte kullanmalısınız.
Örneğin,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* Ön ekler ile birlikte kullanım örnekleri */ -moz-animation-name: example; -o-animation-name: example; -webkit-animation-name: example; animation-name: example; -moz-animation-duration: 3s; -o-animation-duration: 3s; -webkit-animation-duration: 3s; animation-duration: 3s; -moz-animation-delay: 2s; -o-animation-delay: 2s; -webkit-animation-delay: 2s; animation-delay: 2s; -moz-animation-direction: reverse; -o-animation-direction: reverse; -webkit-animation-direction: reverse; animation-direction: reverse; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -moz-animation-play-state: paused; -o-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; -moz-animation: example 3s linear 2s infinite alternate; -o-animation: example 3s linear 2s infinite alternate; -webkit-animation: example 3s linear 2s infinite alternate; animation: example 3s linear 2s infinite alternate; |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
