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 |
|---|
| # | Time | Memory | Function | Location |
|---|
| 1 | 0.0001 | 360992 | {main}( ) | .../index.php:0 |
| 2 | 0.0035 | 444464 | require( '/home/prototurk.com/public_html/app/controller/category.php' ) | .../index.php:101 |
| 3 | 0.0230 | 455488 | require( '/home/prototurk.com/public_html/app/view/article.php' ) | .../category.php:34 |
| 4 | 0.0311 | 614408 | parseTemplate( ) | .../article.php:112 |
| 5 | 0.0311 | 614504 | preg_replace_callback
( ) | .../template.php:126 |
| 6 | 0.0311 | 615024 | bb_json( ) | .../template.php:126 |
| 7 | 0.0312 | 648208 | require( '/home/prototurk.com/public_html/app/view/article-css.php' ) | .../template.php:216 |
Hayır
(Daha fazla
detay)
|
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üle
