css 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.持っている、または機能する; 職務を遂行する三人称単数形: 機能 複数形: 機能 現在分詞: 機能している 過去形: 機能している 過去分詞: 機能しているcss animation-timing-function属性構文
アニメーションタイミング機能とは何ですか?
animation-timing-function は CSS のアニメーション プロパティであり、アニメーションの速度曲線、つまりアニメーションの再生方法を指定し、アニメーションを変更するために使用されます。よりスムーズに。
関数: animation-timing-function はアニメーションの速度曲線を指定します。速度カーブは、アニメーションがある CSS スタイル セットから別の CSS スタイル セットに変化するのにかかる時間を定義します。スピードカーブは変化をよりスムーズにするために使用されます。
構文: animation-timing-function: value;
説明: animation-timing-function は、Cubic Bezier Mathematical という名前を使用します。速度曲線を生成する 3 次ベジェ関数の関数。
この関数では独自の値、または事前定義された値を使用できます。
linear アニメーションの速度は最初から最後まで同じです。
イーズデフォルト。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。
イーズイン アニメーションは低速で始まります。
ease-out アニメーションは低速で終了します。
イーズインアウト アニメーションは低速で開始および終了します。
cubic-bezier(n,n,n,n) cubic-bezier 関数の独自の値。取り得る値は0から1までの数値です。
注: Internet Explorer 9 以前のバージョンでは、animation-timing-function 属性がサポートされていません。
css 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>インスタンスの実行 »
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します