CSS3 アニメーションの詳細な紹介 アニメーション関連のプロパティとキーフレーム ルール キーフレーム

昨日 3 次元立方体を書いたとき、アニメーション

の構文を使用しました今日はシステムに来てレビューしてください

遷移には制限があります単純ではありますが、2 つの 状態にしかなりません
間を変更するには、 イベント の ドライバー が必要で、
単独で移動することはできません
したがって、この問題を解決するには、
アニメーション アニメーション

アニメーション

が必要です。アニメーション効果を実現する
アニメーション 属性のみを使用する だけでは不十分です
@keyframes ルールも必要です
まず例を見てみましょう

p class="demo"></p>

rreeee

マウスをホバーすると、要素は最初に赤くなり、次に遷移します紫に変化し、次に緑に移行します

@ keyframes のルールを見てみましょう

keyframes

@keyframes では、アニメーションのキーフレームを定義します
その後、キーフレームで指定したフレームの状態に従ってアニメーションが遷移し、実行されます
0% - 100% はアニメーションの時間遷移を表します
ルール 0% と 100% では、
from キーワードと to キーワードに置き換えることができます

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 2s linear;}@keyframes change {
    0% {        background-color: red;    }
    50% {        background-color: purple;    }
    100% {        background-color: lime;    }}

---

開始フレームを省略すると、ブラウザは次に従って遷移します。オリジナルのスタイルです

@keyframes xxx {    from {        ......
    }
    to {
        ......
    }
}

---

さらに、このように同じフレームを一緒に書くこともできます

@keyframes change {
    100% {        background-color: lime;    }}

animation

animation は、次のサブプロパティを持つ複合属性です

• animation-name
  キーフレームアニメーションの名前を指定します

• animation-duration
  アニメーションの実行時間を指定します

• animation-timing-function
  アニメーションのスピードカーブを指定します、デフォルトは「ease」です

• animation-delay
  アニメーションの遅延時間を指定します、デフォルトは「0」です なし Delay

• animation-iteration-count
  アニメーションの再生回数を指定します、デフォルトは「1」です" 1 回実行します

• animation-direction
  アニメーションの実行方向を指定します。デフォルトは「通常」です

この複合属性は遷移よりも複雑です
最初の 4 つの属性については説明しませんかなり、私たちの遷移と似ています
忘れた人はここをクリック -> ポータル

animation-iteration-count アニメーション 再生回数を記入することに加えて、よく使われるキーワード無限
ループも使用できます

animation-directionには、normalに加えて、次の属性値もあります

• reverse 逆再生アニメーション
  

• alternate 代替アニメーション
  

• alternate-reverse 反転アニメーション
  

例で説明

@keyframes change {    from,to {        background-color: red;    }
    50% {        background-color: blue;    }}

デフォルト

normal:
2つのテストアニメーション:
100px -> 200px
100px -> 200px

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 1s 2 linear;}@keyframes change {    to {        width: 200px;    }}

---

reverse:
2 つのテスト アニメーション:
200px -> 100px
200px -> 100px

---

2 つのテストアニメーション:ピクセル -> 200ピクセル

アニメーション-フィルモード
以下で説明する 2 つのプロパティはアニメーションのサブプロパティではないため、アニメーション内で記述することはできません

animation-fill-mode はアニメーション時間外のオブジェクト
の状態を規定しており、デフォルトは"none"

以外 none に加えて、次の属性値があります

---

for
wards

アニメーションが完了した後、最後の属性（最後のフレームで定義された）を保持します

backwards
在animation-delay指定时间内、动画显示之前，应用起始属性（定义在第一帧）

both
应用forwards和backwards两种模式

---

forwards
这个属性还是蛮有用的
还是我们上面的例子

.demo:hover {    animation: change 1s linear; /*改*/
    animation-fill-mode: forwards; /*改*/}

我们发现1s之后，元素并没有回到最初的100px，而是保持了我们最后一帧的200px状态

---

backwards
理解这个属性，我们需要先加一个延时

.demo:hover {    animation: change 1s linear 1s; /*改*/
    /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change {    from {  /*增*/
        width: 150px;    }
    to {        width: 200px;    }}

我就不配图了
我们发现鼠标悬浮后，1s后瞬间变为150px，然后再过渡到200px
hover-0s -> 1s -> 2s
100px ->瞬变150px –> 过渡到200px

现在增加backwards

.demo:hover {    animation: change 1s linear 1s; /*改*/
    animation-fill-mode: backwards; /*增*/}

这回我们发现鼠标悬浮的一瞬间就变为15px，然后1s后过渡到200px
hover-0s -> 1s -> 2s
瞬变150px ->150px –> 过渡到200px
这就是backwards的作用，延迟前就应用第一帧动画的样式，然后准备过渡

animation-play-state

animation-play-state 指定动画的运行或暂停。默认 “running”
除了running还有paused
利用这个属性再配合js我们可以控制动画的暂停和运行

demo.style.animationPlayState = "paused";

---

今天的动画就先写这么多，感觉写了很长时间
日后再总结动画相关的性能问题

以上がCSS3 アニメーションの詳細な紹介 アニメーション関連のプロパティとキーフレーム ルール キーフレームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。