cssのキーフレームアニメーションと使ってみる

-
カテゴリー:
CSS 

まだ、対応ブラウザの事など考えると利用頻度は少ないのですが、CSSによるキーフレームアニメーションを試してみました。

 

まずHTMLです。

上記のball.jpgをキーフレームアニメーションで動かします。
次にアニメーションをさせるimg要素のCSSを記述。

animation-name: キーフレーム名でキーフレームを設定。
animation-timing-functionでアニメーションの進行速度の割合を設定。※linear、ease-in、ease-out、ease-in-out等
animation-iteration-countでアニメーションさせる回数の設定。ここでは、infiniteを指定し、無制限に行っています。
animation-durationで1回のアニメーションにかかる時間の設定。4s=4秒。

 

次に、キーフレーム本体のCSSの記述です。

 

@keyframes キーフレーム名 { アニメーション処理 }のように記述を行います。
上記記述では@-webkit-keyframes キーフレーム名 { アニメーション処理 }とベンダープリフィックスをつけたキーフレームも記述していますが、iphoneでの動作を念頭に入れた記述を行っています。

アニメーションの内容はtransform: translate(X座標,Y座標)で座標を動かし、決められた枠内の移動を繰り返す内容です。
 

サンプルはこちら

 

 

HTMLソース内に任意のclassやidがあるかの判定を行う

-
カテゴリー:
javascript 

HTMLソース内に任意のclassやidがある場合のみ処理を実行したい時などに便利なので最近よく使う記述方法がこちら。
※jqueryが導入されていることが前提

 

 

夏季休業のお知らせ

-
カテゴリー:
お知らせ 

誠に勝手ながら、8月15日(木)から18日(日)は夏季休業とさせていただきます。
ご不便をおかけしますが、何卒ご理解いただきますようお願いいたします。