時間的変化 (CSS Transition) と アニメーション (CSS Animation) – browser-land

時間的変化 (CSS Transition) と アニメーション (CSS Animation)

 時間的変化 (CSS Transition) によるシンプルなアニメーション

transition:[property] [duration] [delay] [timing-function];
transition-property:変化させるプロパティ名

* all:変化を適用できるプロパティすべてが変化する (初期値)
* none:どのプロパティも変化しない
* プロパティ名:変化させるプロパティ名のリストをカンマ (,) 区切りで指定

transition-duration:所要時間
transition-delay:遅延時間
transition-timing-function:タイミング・進行割合

* ease:開始と完了を滑らかにする (初期値)
* linear:一定
* ease-in:ゆっくり始まる
* ease-out:ゆっくり終わる
* ease-in-out:ゆっくり始まってゆっくり終わる
* cubic-bezier(x1, y1, x2, y2):3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

CASE. 要素をホバーした時にアニメーションする

.box {
 transition:background 1s 0s ease;
}
.box:hover {
 background:#f2e26d;
}

 キーフレームアニメーション(CSS Animation)

animation:[name] [duration] [timing..] [delay] [iteration..] [direction] [fill..] [play..];
animation-name:アニメーション名
animation-duration:所要時間
animation-timing-function:タイミング・進行割合

* ease:開始と完了を滑らかにする (初期値)
* linear:一定
* ease-in:ゆっくり始まる
* ease-out:ゆっくり終わる
* ease-in-out:ゆっくり始まってゆっくり終わる
* cubic-bezier(x1, y1, x2, y2):3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

animation-delay:遅延時間
animation-iteration-count:ループ回数

* infinite:アニメーションは無制限に繰り返されます。

animation-direction:アニメーション再生の向き

* ease:開始と完了を滑らかにする (初期値)
* normal:毎回順方向に再生
* reverse:毎回逆方向に再生
* alternate:毎回反転させ再生 (順 → 逆 → 順 → 逆・・・
* alternate-reverse:毎回反転させ再生 (逆 → 順 → 逆 → 順・・・

animation-fill-mode:CSS アニメーションの実行前後のスタイル設定;

* none:既定値
* forwards: (実行後) 実行の最後のキーフレームで設定された計算値を保持
* backwards: (実行前) キーフレームで定義された値を delay の期間中も適用
* both:アニメーションの設定は実行前と実行後の両方に適用

animation-play-state:再生中か一時停止かを指定

* running:アニメーションを再生中にする (初期値)
* paused:アニメーションを一時停止にする

CASE. 要素をホバーした時にアニメーションする

.box:hover {
 animation:ani-color 1s ease 0s 1 normal forwards running;
}
@keyframes ani-color{
 100% { background:#f2e26d; }
}
Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード