ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS3でアニメーションの回転速度を設定する方法
CSS3でアニメーションの回転速度を設定する方法
- WBOYオリジナル
- 2022-04-28 16:32:122899ブラウズ
CSS3 では、「animation-timing-function」属性を使用してアニメーションの回転速度を設定できます。この属性は、アニメーションがどのようにサイクルを完了するかを指定し、アニメーションの速度カーブを設定するために使用されます。構文は「要素{アニメーションタイミング関数:速度属性値;}」です。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 でアニメーションの回転速度を設定する方法
animation-timing-function は、アニメーションがサイクルを完了する方法を指定します。
スピード カーブは、アニメーションがある CSS スタイル セットから別の CSS スタイル セットに変化するのにかかる時間を定義します。
スピードカーブは変化をよりスムーズにするために使用されます。
デフォルト値:ease
構文は次のとおりです:
animation-timing-function: value;
animation-timing-function で使用される数学関数は、3 次ベジェ曲線、スピード カーブと呼ばれます。この関数を使用すると、独自の値を使用することも、事前定義された値の 1 つを使用することもできます。
プロパティ値は次のとおりです。
linearアニメーションは最初から最後まで同じです。テスト
easy デフォルト。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。テスト
イーズイン アニメーションは低速で始まります。 Test
ease-out アニメーションは低速で終了します。 Test
ease-in-out アニメーションは低速で開始および終了します。 Test
steps(int,start|end) は、時間関数の間隔 (ステップ) の数を指定します。パラメータは 2 つあり、最初のパラメータは関数の間隔数を正の整数 (0 より大きい) で指定します。 2 番目のパラメータはオプションで、アニメーションが期間の最初から最後まで連続しているかどうかを示します。意味は次のとおりです。 start: 直接開始することを意味します。 end: デフォルト値。突然の終了を示します。
cubic-bezier(n,n,n,n) cubic-bezier 関数の独自の値。取り得る値は0から1までの数値です。
例は次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s;
animation-timing-function:ease-in-out;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
.div2{
width:100px;
height:100px;
background-color:pink;
animation:fadenums 5s;
animation-timing-function:linear;
}
@keyframes fadenums{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="div1"></div><br><br>
<div class="div2"></div>
</body>
</html>出力結果:
(学習ビデオ共有: css ビデオ チュートリアル )
以上がCSS3でアニメーションの回転速度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。