ホームページ > 記事 > ウェブフロントエンド > CSS3アニメーション効果を実現するために何を使用するか

CSS3アニメーション効果を実現するために何を使用するか

WBOYオリジナル: 2022-06-07 16:51:512273ブラウズ

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: アニメーションエフェクトの遅延トリガー時間

値の説明

##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>

出力結果:

カスタムアニメーションを実現するアニメーション CSS3アニメーション効果を実現するために何を使用するか

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 を通じてキーフレームを定義します。

したがって、回転したい場合は、要素を円で囲む場合は、開始フレームと終了フレームを定義するだけです。

@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 サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSの上部マージンの属性は何ですか次の記事：CSSの上部マージンの属性は何ですか

続きを見る