◀︎STUDY JavaScript_027-1 animation:アクション
1
-----
-----
-----
-----
animation のプロパティ
- animation は CSS のプロパティで指定できる
- animation:4s ease-in 1s infinite reverse both running slidein;
- animation:4s linear 1s infinite alternate slidein;
- animation:4s linear 1s infinite running slidein;
▼ Download: ■ sample_JS_027-0ABCDE
設定方法
- animation-delay → animation-delay:4s;
- animation-fill-mode → animation-fill-mode:none;
- animation-direction
- animation-duration
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timeline
- animation-timing-function
サンプル - 1
width:2px / height:100px の赤い縦線を右に移動させる. リロードすると動く. 4秒かけて 400px 移動すると停止する.
サンプル - 2
width:2px / height:100px の赤い縦線を右に移動させる. リロードすると動く. 4秒かけて 400px 移動するとスタート地点に戻る.
サンプル - 3
width:2px / height:100px の赤い縦線を右に移動させる. リロードすると動く. 4秒かけて 400px 移動するが, スタートした直後はややゆっくりと動き, 停止直前もスピードが落ちる.
サンプル - 4
ボタンをクリックすると width:2px / height:100px の赤い縦線が右に移動する. 4秒かけて 400px 移動すると停止する.
animation-fill-mode いろいろな設定
- animation-fill-mode:none;
- animation-fill-mode:forwards;
- animation-fill-mode:backwards;
- animation-fill-mode:both;
- animation-fill-mode:inherit;
- animation-fill-mode:initial;
- animation-fill-mode:revert;
- animation-fill-mode:revert-layer;
- animation-fill-mode:unset;
- animation-fill-mode:none, backwards;
- animation-fill-mode:both, forwards, none;
1
-----
-----
-----
-----
◀︎Contents STUDY JavaScript_027-1
