ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS3アニメーション効果を実現するために何を使用するか
CSS3アニメーション効果を実現するために何を使用するか
- WBOYオリジナル
- 2022-06-07 16:51:512397ブラウズ
CSS3 アニメーション効果を実現する: 1. アニメーション効果を実現するには、アニメーション属性で「@keyframes」ルールを使用します。 2. アニメーション効果を実現するには、transition 属性を使用します。構文は、「element {transition: 属性名」です。時間速度曲線遅延} "。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 アニメーション効果を達成するために使用するもの
1.とは
CSS アニメーション (CSS アニメーション) は、カスケード スタイル シートに推奨されます。スケーラビリティ マークアップ言語 (XML) 要素は CSS アニメーション モジュールを使用します
要素が 1 つのスタイルから別のスタイルに徐々に移行するプロセスを指します
移動、回転、スケーリングなどの一般的なアニメーション効果が多数ありますなど、複雑なアニメーションは、複数の単純なアニメーションを組み合わせたものです。
CSS でアニメーションを実装する方法には、次のようなものがあります。
グラデーション アニメーションを実装するためのトランジション
アニメーション カスタム アニメーションを実装する
2. 実装方法
transition グラデーションアニメーションの実装
transition のプロパティは以下の通りです:
プロパティ: 変更する必要がある CSS プロパティを入力します。
-
duration: トランジション効果を完了するのに必要な時間単位 (秒またはミリ秒)
timing-function: 完成したエフェクトのスピード カーブ
- ##lay: アニメーション エフェクトの遅延トリガー時間 # ここで、timing-function 値は次のとおりです。
値の説明
- linear 均一速度 (cubic-bezier(0,0, 1,1))
- 低速から高速、そして再び低速にイーズ (cubic-bezier(0.25,0.1,0.25,1))
- ease-in はゆっくりと速くなります (cubic-bezier (0.42,0,1,1) と同等)
- ##ease-out はゆっくりと遅くなります (cubic-bezier(0,0 と同等) ,0.58,1))
- イーズインアウトは最初は速くなり、その後遅くなります (cubic-bezier(0.42,0,0.58,1) に等しい)、フェードイン効果
- cubic-bezier(n,n,n,n) cubic-bezier 関数で独自の値を定義します。可能な値は、0 から 1 までの数値です。
- 注: すべての属性で、display:nonedisplay:block などのトランジションを使用できるわけではありません。 ##例として、マウスを上に移動すると変化するアニメーション効果を実現します
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>出力結果:
カスタムアニメーションを実現するアニメーション
animation は、次の 8 つの属性の省略形です。
animation-duration は、アニメーションが 1 サイクルを完了するのに必要な時間を秒単位で指定します。 (s) またはミリ秒 (ms)、デフォルトは 0 です。
animation-timing-function はアニメーション タイミング関数、つまりアニメーションのスピード カーブを指定します。デフォルトは " ease"、linear、ease、ease-in、ease-out、ease-in-out
animation-delay は、アニメーションの遅延時間を指定します。つまり、アニメーションの開始時のデフォルトです。は 0 です。
animation-iteration-count はアニメーションの再生回数を指定します。デフォルトは 1 です。
animation-direction はアニメーションの方向を指定します。アニメーションの再生。デフォルトは、normal、normal、reverse、alternate、alternate-reverseです。
animation-fill-mode アニメーションのフィル モードを指定します。デフォルトは、前方、後方、両方なしです。
animation-play-state は、アニメーションの再生状態 (実行中または一時停止) を指定します。デフォルトは running running、pauser
animation-name は @keyframes アニメーションの名前を指定します
CSS アニメーションはいくつかのキー フレームを定義するだけで済みます残りのフレームについては、ブラウザはタイミング関数に基づいて補間および計算します。
したがって、回転したい場合は、要素を円で囲む場合は、開始フレームと終了フレームを定義するだけです。 @keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}from は最初のフレームを表し、to は最後のフレームを表します
パーセンテージを使用して説明することもできます。ライフ サイクル
@keyframes rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}キーフレームを定義した後、それを直接使用できます:
animation: rotate 2s;3. 概要
transition (トランジション) は次の目的で使用されます。要素のオーバースタイルはアニメーションと同様の効果を持っていますが、詳細は大きく異なります。transform (変換) は要素の回転、拡大縮小、移動、傾斜に使用され、アニメーションとは何の関係もありません。スタイルの設定。色と同じように、関係は要素の「外観」を設定するために使用されます。
translate (動き) は、transform、つまり動きの単なる属性値です。
アニメーション (アニメーション) は、アニメーションのプロパティを設定するために使用されます。これは、6 つの属性を含む省略された属性です。
(学習ビデオ共有:
css ビデオ チュートリアル)
以上がCSS3アニメーション効果を実現するために何を使用するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。