CSS (5): アニメーション

• アニメ名

アニメーション名
構文: anime-name:none|
アニメーション名は @keyframes によって定義されるため、要素によって定義されるアニメーション名はルール @keyframes と組み合わせて使用​​する必要があります。

• @keyframes

構文:
@keyframes {
[from|to|]{sRules}[,*]
}
はキーフレームと呼ばれ、Flash のキーフレームに似ています。 CSS3 では、主に「@keyframes」で始まり、その後にアニメーション名と中括弧のペア「{...}」が続きます。括弧内には、さまざまな期間のスタイル ルールが含まれています。

リーリー

• アニメーション期間

アニメーションの継続時間を設定します
構文: anime-duration:[,]*

リーリー

• アニメーションタイミング関数

アニメーションの遷移速度のタイプ
構文:animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out

リーリー

• アニメーション遅延

アニメーションの遅延時間を設定します
構文: anime-delay: [,]*

リーリー

• アニメーション反復数

アニメーションの実行回数を設定します
構文:animation-iteration-count:infinite|
infiniteは回数無制限を意味します

リーリー

• アニメーションディレクション

アニメーションをループ内で逆の順序で実行するかどうかを設定します
構文:animation-direction:normal|reverse|alternate|alternate-reverse
説明:
normal: 通常の方向
reverse: 逆方向に実行します
alternate:アニメーションは最初に通常通りに実行され、次に方向が逆になり、交互に実行され続けます
alternate-reverse: アニメーションは最初に逆方向に実行され、次に順方向に実行され、交互に実行され続けます

リーリー

• アニメーションフィルモード

アニメーションの開始と終了ステータスを設定します
構文: anime-fill-mode: none|forwards|backwards|both
説明:
none: デフォルト値。アニメーションの状態が設定されていません
forwards: オブジェクトの状態をアニメーション終了時の状態に設定します
backwards: オブジェクトの状態をアニメーションの開始時の状態に設定します
both: オブジェクトの状態をアニメーションの状態に設定しますアニメーションの終わりまたは始まりに

リーリー

• アニメーションの再生状態

アニメーションの再生状態を設定します
構文:animation-play-state:running|paused

リーリー

• アニメーション

アニメーションの省略された属性
構文:
animation: [アニメーション名] || [アニメーション-タイミング関数] || [アニメーション-反復回数] || [ アニメーションの方向 ] || <単一アニメーションの再生状態>