Pear::Auth 認証

Pear::Auth 認証応用 CSS ファイル作成

Pear::Auth 認証応用ファイルがほぼ準備できましたので、最後に CSS ファイルを作成します。
作成ファイル auth.css の内容は、
63Pear Village に戻り
左サイドナビ｢Pear::Auth 認証｣の中の
Pear::Auth 認証組込ドキュメント CSS ファイル
から見てください。
ユ－ザ ID とパスワ－ドの明示ボ－ドを動かすために、アニメ－ション CSS を作成します。
そのためには、CSS3 で記述する必要があります。
@keyframes で動く軌跡を規定します。
@keyframes は HTML5/CSS3 で初めて出てきた書式です。
これが理解できれば、アニメ－ションはできたも同然です。
後は、各DIVに、animationプロパティを設定するだけです。

@keyframes

@keyframes は、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を明示することで、CSS animation の流れの中の各地点を指定します。
キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 animation-name プロパティで指定したものと同じ名前（今回の名前は、symp です）がついた @keyframes 規則を作成します。
それぞれの @keyframes 規則は、アニメーションの途中でそのキーフレームの状態になるパーセント値と
25%{
transform:translate(0px,250px);
}
のようなキーフレームのスタイル情報が含まれているブロックと、で構成されています。
すなわち、上記の記述例では、DIV が25％動く時、Ｘ座標 0px,Ｙ座標 250px の位置まで動きなさい、ということを指示しています。

-webkit-@keyframes

-webkit-@keyframes と @keyframesは全く同じものです。
なぜ２つも同じことを書く必要があるのか？
ベンダ－プレフィクションを書くのは、面倒なだけですよね。
ここが、HTML5/CSS3 の発展途上の問題点です。
現状は、@keyframes を認識できるのは、Safari を除く PC 系の最新版のブラウザだけです。
私が持っている携帯情報端末の Android は認識しません。
どうも iOS も認識しないようです。
仕方がないので、ベンダ－プレフィクションを付加して -webkit-@keyframes を追加して対処します。
-webkit-transform も必要になります。
また、次項で説明する animation プロパティも同様に -webkit- を追加する必要があります。
もう少し時間がたてば、-webkit- は必要なくなると思うのですが。
困ったものです。

translate(X,Y座標)

transformプロパティのtranslate()は、要素の表示位置を移動させる際に使用します。
translate (X方向の距離, Y方向の距離) 関数では、X方向とY方向の距離を指定します。
translate(X,Y座標) の位置指定は DIV の向かって左上が基準です。
最初の位置を
0%{
transform:translate(0px,0px);
}
と設定しています。
次ぎに、DIV が 25% 動いた時の位置を指定します。
25%{
transform:translate(0px,180px);
}
同様に DIV が 50% 、75%、100% 動いた時の位置も指定します。
50%{
transform:translate(180px,180px);
}
75%{
transform:translate(180px,0px);
}
100%{
transform:translate(0px,0px);
}
各 transform にも -webkit- を追加した行を追加することも忘れずに。

div id="object1,2" の animation プロパティ

animation-name
animation-name プロパティは、@keyframes で定義した名前と同じにします。
今回は symp としました。
animation-duration
animation-duration プロパティは、アニメーション一回分の時間の長さ(秒)を指定します。
今回は 8s としました。
animation-timing-function
animation-timing-functionプロパティは、アニメーションが継続している際に、そのアニメーションの進行速度の割合を変更して調整することで動きを滑らかにすることができます。
これは一般的にイージング機能と呼ばれるものです。
ease（開始と完了を滑らかにする)（初期値）
linear（一定）
ease-in（ゆっくり始まる）
ease-out（ゆっくり終わる）
ease-in-out（ゆっくり始まってゆっくり終わる）
等が指定できます。
今回は linear としました。
animation-iteration-count
animation-iteration-count プロパティは、アニメーションの繰り返し回数を指定します。
初期値は 1 でアニメーションが開始から終了まで一回再生されます。
値に infinite を指定すると、アニメーションの再生を無限に繰り返します。
値に整数以外の数値を指定すると、再生サイクルの途中でアニメーションが終了します。
今回は infinite としました。
animation-delay
animation-delay プロパティの値には、アニメーションの開始を遅らせる時間を指定します。
初期値は 0 でアニメーションがすぐに実行されます。
今回は object1 の指定はなしとしすぐに開始するようにし、 object2 の開始は 0.5 秒遅らせるべく 0.5s としました。
ﾍﾞﾝﾀﾞ-ﾌﾟﾚﾌィｸｼｮﾝ -webkit- 付加
各 animation プロパティにも -webkit- を追加することを忘れずに。
#object1{
animation-name:symp;
-webkit-animation-name:symp;
animation-duration:8s;
-webkit-animation-duration:8s;
animation-timing-function
:linear;
-webkit-animation-timing-function
:linear;
animation-iteration-count
:infinite;
-webkit-animation-iteration-count
:infinite;
}
こんな感じです。

以上で、Pear::Auth 認証応用 CSS ファイルの作成は完了です。
引き続き、Pear::Auth 認証応用動作確認について説明します。