Giriş yap

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

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>

tayfunerbilen
27 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar