CSS 共通スタイル (4) アニメーション

パート 3 一般的な CSS スタイル (3) このブログ投稿では、CSS のアニメーション効果を伴うトランジションとトランスフォームについてすでに紹介しました。今日は CSS のアニメーションについて話しましょう。アニメーションを追加すると、アニメーション効果がより楽観的になります。

アニメーション

アニメーションの実装はキーフレームを介して実装する必要があります。キーフレーム (キーフレーム)、Flash のキーフレームに似ています。キーフレームには独自の構文規則があり、その名前は「@keyframes」で始まり、その後に「アニメーションの名前」と 1 対の中括弧「{}」が続きます。 CSS スタイルの記述方法に少し似ています。 「0%」と「100%」の間など、複数のパーセンテージで構成される「@keyframes」のスタイル ルールの場合、このルールで複数のパーセンテージを作成でき、各パーセンテージにアニメーション効果が必要な要素を指定します。さまざまな属性が追加され、要素の色、位置、サイズ、形状などの移動、変更など、要素が常に変化する効果を実現できます。ただし、注意すべき点が 1 つあります。「fromt」と「to」を使用してアニメーションの開始位置と終了位置を表すことができます。つまり、「from」は「0%」に相当し、「to」は「100」に相当します。 %" の場合、「0%」は他の属性値のようにパーセント記号を省略できないことに注意してください。ここにパーセント記号 ("%") を追加する必要があります。そうでない場合、このキーフレームは無効であり、効果がありません。キーフレームの単位はパーセンテージ値のみを受け入れるためです。

カーネルタイプウェブキット(Chrome/Safari)Gecko(Firefox)プレスト(オペラ)トライデント(IE)W3C

属性の説明:

1. anime-name: オブジェクトに適用されるアニメーション名を取得または設定します。@keyframes ルールと組み合わせて使用​​する必要があります。アニメーション名は自由に選択でき、セマンティクスが向上します

2.animation-duration: オブジェクトアニメーションの継続時間を取得または設定します

3.animation-timing-function: オブジェクトアニメーションの遷移タイプを取得または設定します

値:

linear:線形遷移。ベジェ曲線(0.0, 0.0, 1.0, 1.0)に相当

easy: スムーズな移行。ベジェ曲線(0.25, 0.1, 0.25, 1.0)に相当

イーズイン: 遅いものから速いものまで。ベジェ曲線(0.42, 0, 1.0, 1.0)に相当

イーズアウト：速いものから遅いものまで。ベジェ曲線(0, 0, 0.58, 1.0)に相当

イーズインアウト: 遅い状態から速い状態、そして再び遅い状態へ。ベジェ曲線(0.42, 0, 0.58, 1.0)に相当

cubic-bezier(, , , ): 特定のベジェ曲線タイプ。4 つの値は区間 [0, 1] 内にある必要があります。

4.animation-iteration-count: オブジェクトアニメーションのサイクル数を取得または設定します

値:

infinite: 無限ループ

number: 指定されたオブジェクトアニメーションの特定のサイクル数

5.animation-direction:オブジェクトアニメーションがループ内で逆方向に動くかどうかを取得または設定します

値:

ノーマル：通常方向

交互：正逆交互

6.animation-play-state: オブジェクトアニメーションの状態を取得または設定します

ランニング：スポーツ

一時停止:一時停止

7. anime-fill-mode: アニメーション時間外のオブジェクトの状態を取得または設定します

値:

none: デフォルト値。オブジェクトアニメーション以外の状態を設定しないでください

forwards: オブジェクトの状態をアニメーションの終了時の状態に設定します

backwards: オブジェクトの状態をアニメーション開始時の状態に設定します

両方: オブジェクトのステータスをアニメーションの終了または開始の状態に設定します

以下は包括的な説明のための例です:

CSSコード:

リーリー

　　HTML代码：　

<span style="font-family: 'Microsoft YaHei'; font-size: 16px;"><span style="color: #000000;"><div id="animation">
    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text1"</span><span style="color: #0000ff;">></span>这是ly婠婠的博客<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text2"</span><span style="color: #0000ff;">></span>欢迎访问和评论！<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>            
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

效果如下：

解析说明：

在这个例子中，效果如上图。这里主要是利用animation和translate来达到一个文字渐进的效果。translate的作用是让文字根据给定值发生平移。animation则利用关键帧和百分比数值来将平移过程细分成几个帧，然后设置持续时间，一帧帧连接起来形成动画。

書き込み
-ウェブキット-アニメーション
-moz-アニメーション
-ms-アニメーション
アニメーション