CSS animation-direction Özelliği
CSS3
Bu özellik, animasyonun oynatılacağı yönü belirlemek için kullanılır. Örneğin animasyon ilk kareden başlayıp sonda bitebilir, son kareden başlayıp ilk karede bitebilir ya da animasyon ilk kareden başlar, son kareye geldiğinde tekrar ilk kareye geri döner ve bu şekilde tekrarlar ya da tam tersi son kareden başlar, ilk kareye geldiğinde animasyon kendini tekrar eder.
Yapısı (Syntax)animation-direction: normal | reverse | alternate | alternate-reverse
NOT
Normal bir animasyon işleminde bu özelliği kullanmanıza gerek yoktur. Zaten varsayılan olarak animasyon olması gerektiği gibi uygulanır. Özelliğin getirdiği yeniliği görebilmek için
infinite ile tekrar eden animasyon olarak daha net göreceğimiz için örnekleri buna göre oluşturdum. | Varsayılan Değer | normal |
| JavaScript Yapısı |
object.style.animationDirection="reverse"
|
| Animasyon Özellikleri Uygulanabilir | Hayır (Daha fazla detay) |
Değerler
| Değer | Açıklama | Versiyon |
|---|---|---|
| normal | Animasyon olması gerektiği gibi ilerler. | CSS3 |
| reverse | Animasyon son kareden başlar ve ilk karede sonlanır. | CSS3 |
| alternate | Animasyon ilk kareden başlar, son kareye geldiğinde bu sefer tam tersine son kareden başlar ve tekrar ilk karede biter. | CSS3 |
| alternate-reverse | Animasyon son kareden başlar, ilk kareye geldiğinde bu sefer tam tersine ilk kareden başlar ve son karede biter. | CSS3 |
Örnekler
Son kareden başlayacak bir animasyon oluşturalım.
<div class="box"></div>
<style>
.box {
width: 60px;
height: 60px;
background: blue;
position: relative;
animation: boxAnimation 3s infinite;
animation-direction: reverse;
}
@keyframes boxAnimation {
from {left: 0; opacity: 0}
to {left: 200px; opacity: 1}
}
</style>Baştan başlayıp tekrar eden bir animasyon oluşturalım.
<div class="box"></div>
<style>
.box {
width: 60px;
height: 60px;
background: blue;
position: relative;
animation: boxAnimation 1s infinite;
animation-direction: alternate;
}
@keyframes boxAnimation {
from {left: 0; opacity: 0}
to {left: 200px; opacity: 1}
}
</style>Sondan başlayıp tekrar eden bir animasyon oluşturalım.
<div class="box"></div>
<style>
.box {
width: 60px;
height: 60px;
background: blue;
position: relative;
animation: boxAnimation 1s infinite;
animation-direction: alternate-reverse;
}
@keyframes boxAnimation {
from {left: 0; opacity: 0}
to {left: 200px; opacity: 1}
}
</style>Tarayıcı Desteği
| Chrome | Firefox | Edge | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|---|
animation-direction
|
43 -webkit-
|
16
-webkit-
|
12
-webkit-
|
10 |
30
-webkit-
|
9
-webkit-
|
alternate-reverse
|
1 | 16 | 12 | 10 | 12.1 | 6 |
reverse
|
1 | 16 | 12 | 10 | 12.1 | 6 |
Destekliyor
Desteklemiyor
