CSSスプライトとアニメーションの操作 – browser-land

CSSスプライトとアニメーションの操作

 CSSスプライト

cssスプライトは透過png画像をコマ割りし、一定時間ごとにコマの幅分ずつ動かす事でアニメーションさせます。
アニメーションはキーフレームアニメーションのanimation-play-stateを使って操作しています。

<style type=”text/css”>
<!–
 .css1 {
  border:1px green solid;
  width:120px;
  height:120px;
  overflow:hidden;
 }

 /* 初期呼び出し時に再生中 */
 .css2 {
  width:960px;
  height:120px;
  background-size:100% 100%;
  background-image: url(“image.png”);
  animation: ani-effect-sprite-1 0.75s steps(8) infinite running;
 }

 /* 初期呼び出し時に停止中 */
 .css3 {
  width:960px;
  height:120px;
  background-size:100% 100%;
  background-image: url(“image.png”);
  animation: ani-effect-sprite-1 0.75s steps(8) infinite paused;
  opacity:0;
 }

 /* CSSスプライト用キーフレーム */
 @keyframes ani-effect-sprite-1 {
  0% { transform: translate3d(0% , 0%,0); }
  100% { transform: translate3d(-100%, 0%,0); }
 }
–>
</style>
<script>
 // ページ読込が完了後に実行する
 window.onload = function() {
  oPosition = document.getElementById(“oPosition”);
  oSprite = document.getElementById(“oSprite”);

  //アニメーションの反復が1回分終了たときに発生
  oSprite.addEventListener(‘animationiteration’, function (e){
   oSprite.style.animationPlayState = “paused”; //停止中に変更
   oSprite.style.opacity = 0;
  }, false);
 }

 function fClick(){
  oSprite.style.animationPlayState = “running”;  //再生中に変更
  oSprite.style.opacity = 1;
 }

</script>
//1コマずつアニメーション
<div class=’css1’>
 <div class=’css2’></div>
</div>

//クリックするとアニメーション
<div id=’oPosition’ class=’css1′ onclick=”fClick()”>
 <div id=’oSprite’ class=’css3’></div>
</div>


・透過png画像 8コマ

・1コマずつアニメーション

Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード