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