v2.5.2
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
( ! ) Notice: Undefined property: stdClass::$animatable in /home/prototurk.com/public_html/app/view/article-css.php on line 82
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
Hayır (Daha fazla detay)

Değerler

Değer Açıklama Versiyon
linear Animasyon başlangıçtana bitişe kadar aynı hızda oynar.
( ! ) Notice: Undefined property: stdClass::$version in /home/prototurk.com/public_html/app/view/article-css.php on line 118
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
ease Varsayılan değerdir. Animasyon yavaş başlar, hızlanır ve yine yavaş biter.
( ! ) Notice: Undefined property: stdClass::$version in /home/prototurk.com/public_html/app/view/article-css.php on line 118
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
ease-in Animasyon yavaş başlar.
( ! ) Notice: Undefined property: stdClass::$version in /home/prototurk.com/public_html/app/view/article-css.php on line 118
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
ease-out Animasyon yavaş biter.
( ! ) Notice: Undefined property: stdClass::$version in /home/prototurk.com/public_html/app/view/article-css.php on line 118
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
ease-in-out Animasyon yavaşlar başlar, yavaş biter.
( ! ) Notice: Undefined property: stdClass::$version in /home/prototurk.com/public_html/app/view/article-css.php on line 118
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
step-start steps(1, start) değerine eşittir
( ! ) Notice: Undefined property: stdClass::$version in /home/prototurk.com/public_html/app/view/article-css.php on line 118
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
step-end steps(1, end) değerine eşittir
( ! ) Notice: Undefined property: stdClass::$version in /home/prototurk.com/public_html/app/view/article-css.php on line 118
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
steps(sayı, start | end) Adımlı olarak animasyonu çalıştırır, animasyon akmaz belirlenen sayıya göre bölerek çalışır.
( ! ) Notice: Undefined property: stdClass::$version in /home/prototurk.com/public_html/app/view/article-css.php on line 118
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
cubic-bezier(n,n,n,n) Özel hız eğrisi oluşturmak için kullanılır
( ! ) Notice: Undefined property: stdClass::$version in /home/prototurk.com/public_html/app/view/article-css.php on line 118
Call Stack
#TimeMemoryFunctionLocation
10.0003360192{main}( ).../index.php:0
20.0056443664require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0264454688require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0377613608parseTemplate( ).../article.php:112
50.0377613704preg_replace_callback ( ).../template.php:126
60.0377614224bb_json( ).../template.php:126
70.0379647408require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216

Ö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>

Tarayı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
tayfunerbilen
1224 gün önce eklendi - 2875 kez görüntülendi.
Github'da Düzenle
Önceki animation-play-state Sonraki animation