楕円運動アニメ
楕円運動アニメ初期ファイル作成
ファイル内容は、左サイドナビ｢楕円運動アニメ｣の中の
｢楕円運動アニメ初期 PHP ファイル｣
から見てください。
アニメのための CSS を PHP で書込むため、
<style>
<?php
include "oval.php";
?>
</style>
と記述しています。
これにより、@keyframes を作成します。
楕円運動アニメ CSS ファイル作成
ファイル内容は、左サイドナビ｢楕円運動アニメ｣の中の
｢楕円運動アニメ CSS ファイル｣
から見てください。
アニメ－ション CSS を作成するには、CSS3 で記述する必要があります。
HTML5/CSS3 で初めて出てきた書式 @keyframes で動く軌跡を規定します。
しかしながら、今回はこの部分はこの CSS ファイルでは規定せず、oval.php
で設定しています。
よって、このCSS ファイルでは、@keyframes 部分は書かず、その他の必要部分を記述します。
-webkit- はなぜ必要
-webkit-animation- と -animation- は全く同じものです。
なぜ２つも同じことを書く必要があるのか？
ベンダ－プレフィクションを書くのは、面倒なだけですよね。
ここが、HTML5/CSS3の発展途上の問題点です。
現状は、-animation- を認識できるのは、Internet Explorer、Mozilla Firefox だけです。
他のブラウザ、Google Chrome、Opera は、-webkit-animation- しか認識できないのです。
もう少し時間がたてば、-webkit-animation- は必要なくなると思うのですが。
困ったものです。
animationプロパティ
animation-nameプロパティは、@keyframesで定義した名前と同じにします。
今回は、test1 としました。
animation-duration プロパティは、アニメーション一回分の時間の長さ(秒)を指定します。
今回は 5s としました。
animation-timing-function プロパティは、アニメーションが継続している際に、
そのアニメーションの進行速度の割合を変更して調整することで動きを滑らかに
することができます。
これは一般的にイージング機能と呼ばれるものです。
ease（開始と完了を滑らかにする)（初期値）
linear（一定）
ease-in（ゆっくり始まる）
ease-out（ゆっくり終わる）
ease-in-out（ゆっくり始まってゆっくり終わる）
等が指定できます。
今回は linear としました。
animation-iteration-count プロパティは、アニメーションの繰り返し回数を指定します。
初期値は、１でアニメーションが開始から終了まで一回再生されます。
値にinfiniteを指定すると、アニメーションの再生を無限に繰り返します。
値に整数以外の数値を指定すると、再生サイクルの途中でアニメーションが終了します。
今回は infinite としました。
animation-delay プロパティの値には、アニメーションの開始を遅らせる時間を指定します。
初期値は、０でアニメーションがすぐに実行されます。
今回は、０（初期値指定なし）としました。
position
position 指定がやっかいです。
動くイメ－ジが同じ位置関係で表示される必要があります。
よって、absolute 指定にする必要があります。
ただ、今回は他に表示がなにもありませんので、他の position 指定でも動くはずです。
楕円運動ｱﾆﾒ Function ﾌｧｲﾙ作成概要へ
楕円運動アニメファイル概要に戻る