スライドショー
CSSアニメーションの基本
CSSアニメーション定義
- サイズ
- 位置
- 回転角度
フレーム1
//左端、反時計回りに-45°
width:100px;
height:100px;
position:absolute;
left:0;
transform:rotate(-45deg);
フレーム2
//サイズ3倍、左端、時計回りに0°
width:300px;
height:300px;
position:absolute;
left:50%;
transform:rotate(0deg);
フレーム3
//左端、反時計回りに-45°
width:100px;
height:100px;
position:absolute;
left:100%;
transform:rotate(45deg);
animateの使い方
フレームの再生方法を定義する
| パラメータ | 説明 |
|---|---|
| アニメーション名 | アニメーション効果を定義したキーフレームの名前を自由に指定します。【省略不可】 |
| 変化時間 | アニメーション1回分の長さを秒単位で指定します。【省略不可】 |
| タイミング関数 | スタイルの変化にどのような緩急を付けるかをあらかじめ定義された名前で指定します。
定義された名前
|
| 遅延時間 | アニメーションが開始するまでの待機時間を秒単位（例:0.3s）で指定します。 |
| 繰り返し回数 | アニメーションの繰り返し回数を指定します。 infiniteを指定する無限に繰り返し、 省略すると1を指定したことになります。 |
| 再生方向 |
アニメーションを2回以上繰り返す場合に、偶数回目を逆再生するかどうかを指定します。
|
| 再生中・再生後のスタイル | アニメーション再生中・再生後のスタイルを指定します。
|
| 再生状態 |
アニメーションを再生中にするか一時停止するかを指定します。
|
活用方法
プロフィール
| 名前 | ぬえさぶろう |
|---|---|
| 仕事 | PCの修理受付・取扱説明書作成 |
| 好物 | 大豆食品 |
| スキル |
|
