CSS animation-timing-function Özelliği
Animasyonun hız eğrisini belirler. Bu sayede animasyon oynatılırken nasıl bir akışta oynatılacağı belirlenir, belli başlı zamanlama fonksiyonları hariç kendinizde özel olarak cubic-bezier()
kullanarak hız eğrisini oluşturabilirsiniz.
Yapısı (Syntax)animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(sayı, start | end) | cubic-bezier(n,n,n,n)
Varsayılan Değer | ease |
JavaScript Yapısı |
object.style.animationTimingFunction="linear"
|
Animasyon Özellikleri Uygulanabilir | Hayır (Daha fazla detay) |
Değerler
Değer | Açıklama | Versiyon |
---|---|---|
linear | Animasyon başlangıçtana bitişe kadar aynı hızda oynar. | |
ease | Varsayılan değerdir. Animasyon yavaş başlar, hızlanır ve yine yavaş biter. | |
ease-in | Animasyon yavaş başlar. | |
ease-out | Animasyon yavaş biter. | |
ease-in-out | Animasyon yavaşlar başlar, yavaş biter. | |
step-start | steps(1, start) değerine eşittir | |
step-end | steps(1, end) değerine eşittir | |
steps(sayı, start | end) | Adımlı olarak animasyonu çalıştırır, animasyon akmaz belirlenen sayıya göre bölerek çalışır. | |
cubic-bezier(n,n,n,n) | Özel hız eğrisi oluşturmak için kullanılır |
Örnekler
Tüm fonksiyonların bir arada kullanıldığı örnek
<div class="box"></div>
<div class="box timing-ease-in">ease-in</div>
<div class="box timing-ease-out">ease-out</div>
<div class="box timing-ease-in-out">ease-in-out</div>
<div class="box timing-linear">linear</div>
<div class="box timing-step-start">step-start</div>
<div class="box timing-step-end">step-end</div>
<div class="box timing-steps-start">steps(4, start)</div>
<div class="box timing-steps-end">steps(4, end)</div>
<div class="box timing-custom">steps(4, end)</div>
<style>
.box {
width: 100px;
height: 60px;
margin-bottom: 10px;
background: blue;
position: relative;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
font-weight: bold;
animation: boxAnimation 1s infinite alternate;
}
.box.timing-ease-in {
animation-timing-function: ease-in;
}
.box.timing-ease-out {
animation-timing-function: ease-out;
}
.box.timing-ease-in-out {
animation-timing-function: ease-in-out;
}
.box.timing-linear {
animation-timing-function: linear;
}
.box.timing-step-start {
animation-timing-function: step-start;
}
.box.timing-step-end {
animation-timing-function: step-end;
}
.box.timing-steps-start {
animation-timing-function: steps(4, start);
}
.box.timing-steps-end {
animation-timing-function: steps(4, end);
}
.box.timing-custom {
animation-timing-function: cubic-bezier(0.105, 1.345, 0.790, -0.105);
}
@keyframes boxAnimation {
from {left: 0}
to {left: 250px}
}
</style>
Editörde GörüntüleTarayıcı Desteği
Chrome | Firefox | Edge | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|---|
animation-timing-function
|
43 -webkit-
|
16
-webkit-
|
12
-webkit-
|
10 |
30
-webkit-
|
9
-webkit-
|
jump
|
1 | 65 | 79 | 64 | 14 |
Destekliyor
Desteklemiyor