Animasi

英[ˈtaɪmɪŋ ] AS [ˈtaɪmɪŋ]

n.Kawalan masa; peranan; pembolehubah, fungsi ; kedudukan; utama Parti

vi.Mempunyai atau berfungsi;

css3 animation-timing-function property sintaks

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. mudah Lalai. Animasi bermula pada kelajuan perlahan, kemudian dipercepatkan, kemudian perlahan sebelum tamat. animasi mudah masuk bermula pada kelajuan perlahan. ease-out Animasi tamat pada kelajuan perlahan. animasi mudah-masuk-keluar bermula dan berakhir pada kelajuan perlahan. 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.

Gunakan atribut animasi-masa-fungsi dalam CSS3 untuk menyesuaikan kelajuan animasi Ia boleh menetapkan kelajuan animasi kepada kelajuan malar, bermula pada kelajuan rendah, tamat pada kelajuan rendah, mula dan tamat pada kelajuan rendah, perlahan. mula-mula, kemudian cepat dan kemudian perlahan, atau tetapkan sendiri nilai

css3 animation-timing-function property contoh

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