animation
英[??n??me??n] 美[??n??me??n]
n. 怒っている、活発、漫畫制作、漫畫撮影、[映畫とテレビ] アニメーション
複數(shù)形: アニメーション
タイミング
## English[?ta?m??] US[?ta?m??] n.タイミング; タイミング制御; 配光; 計時function
English[?f??k?n] US[?f??k??n] n. 関數(shù)、効果、応答変數(shù)、関數(shù)、立場、主要政黨vi.持っている、または機(jī)能する; 職務(wù)を遂行する三人稱単數(shù)形: 機(jī)能 複數(shù)形: 機(jī)能 現(xiàn)在分詞: 機(jī)能している 過去形: 機(jī)能している 過去分詞: 機(jī)能している
css3 animation-timing-function屬性 構(gòu)文
関數(shù): animation-timing-function はアニメーションの速度曲線を指定します。速度カーブは、アニメーションがある CSS スタイル セットから別の CSS スタイル セットに変化するのにかかる時間を定義します。スピードカーブは変化をよりスムーズにするために使用されます。
構(gòu)文: animation-timing-function: value;
説明: animation-timing-function は、Cubic Bezier Mathematical という名前を使用します。速度曲線を生成する 3 次ベジェ関數(shù)の関數(shù)。この関數(shù)では獨自の値、または事前定義された値を使用できます。 リニア アニメーションの速度は最初から最後まで同じです。デフォルトを緩和します。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。イーズインアニメーションは低速で始まります。 ease-out アニメーションは低速で終了します。 easy-in-out アニメーションは低速で開始および終了します。 cubic-bezier(n,n,n,n) cubic-bezier 関數(shù)內(nèi)の獨自の値。取り得る値は0から1までの數(shù)値です。
注: Internet Explorer 9 以前のバージョンでは、animation-timing-function 屬性がサポートされていません。
CSS3 のアニメーション タイミング関數(shù)プロパティを使用してアニメーション速度をカスタマイズします。アニメーション速度を一定速度、低速で開始、低速で終了、低速で開始および終了するように設(shè)定できます。速度、最初は遅く、次に速く、その後は遅くなります。または、値をカスタマイズすることもできます
css3 animation-timing-function屬性 例
<!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>インスタンスの実行 ?
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します