css animation-timing-function property
Hasil terjemahan：
英[ˈtaɪmɪŋ ] AS [ˈtaɪmɪŋ]
n.Kawalan masa; peranan; pembolehubah, fungsi ; kedudukan; utama Partivi.Mempunyai atau berfungsi;css animation-timing-function propertysintaks
Apakah fungsi pemasaan animasi?
fungsi pemasaan-animasi ialah atribut animasi CSS, yang digunakan untuk menentukan lengkung kelajuan animasi, iaitu, cara animasi dimainkan, untuk menjadikan perubahan animasi lebih lancar.
Fungsi: fungsi pemasaan-animasi menentukan lengkung kelajuan animasi. Lengkung halaju mentakrifkan tempoh masa yang diambil untuk animasi berubah daripada satu set gaya CSS kepada yang lain. Keluk kelajuan digunakan untuk membuat perubahan lebih lancar.
Syntax: animation-timing-function: value;
Penerangan: animation-timing-function menggunakan fungsi matematik yang dipanggil fungsi Cubic Bezier untuk menjana lengkung kelajuan.
Anda boleh menggunakan nilai anda sendiri dalam fungsi ini, atau nilai pratakrif:
linear Kelajuan animasi adalah sama dari awal hingga akhir.
memudahkan Lalai. Animasi bermula pada kelajuan perlahan, kemudian dipercepatkan, kemudian perlahan sebelum tamat.
Animasi mudah masuk bermula pada kelajuan rendah.
ease-out Animasi tamat pada kelajuan rendah.
Animasi mudah masuk bermula dan tamat pada kelajuan rendah.
cubic-bezier(n,n,n,n) nilainya sendiri dalam fungsi cubic-bezier. Nilai yang mungkin adalah nilai angka dari 0 hingga 1.
Nota: Internet Explorer 9 dan versi terdahulu tidak menyokong atribut fungsi pemasaan animasi.
css animation-timing-function propertycontoh
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;
/* Safari and Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-timing-function:linear;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p>
<div></div>
</body>
</html>Run Instance »
Klik butang "Run Instance" untuk melihat instance dalam talian