■StyleSheet Top

１．スタイルシートの変更

２．JavaScriptによるアニメーション

３．CSS3によるアニメーション

■スタイルシートの変更

スタイルシートの設定
id、class、タグによるスタイル設定 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
</head>
<body>
   <div id='foo_id'>あああ</div>
   <div class='foo_class'>いいい</div>
   <div class='foo_class'>ううう</div>
   <input type='text' value='aaa'/>
</body>
</html>




/* id属性のフォントカラーを赤にする */
#foo_id{
   color:red
}

/* class属性のフォントカラーを青にする */
.foo_class{
   color:blue
}

/* divタグの背景色を黄色にする */
div{
   background-color:yellow
}

子要素の検索
子要素はスペース区切りで検索する 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
</head>
<body>
   <div id='foo_id'>あああ
      <div class='foo_class'>えええ</div>
      <input type='text' class='foo_class' value='aaa'/>
   </div>
   <div class='foo_class'>いいい</div>
   <div class='foo_class'>ううう</div>
   <input type='text' value='aaa'/>
</body>
</html>




/* id=foo_idとなる要素の子要素のうちdiv要素でclass=foo_classが対象 */
#foo_id div.foo_class{
   color:red
}

スタイルの継承
カスケードの性質を持つスタイルシートは親要素のスタイルを引き継ぐ 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
</head>
<body>
   <div id='foo_id'>あああ
      <div class='foo_class'>えええ</div>
   </div>
   <div class='foo_class'>いいい</div>
</body>
</html>




#foo_id{
   color:red
}

/* foo_idのスタイルシートの性質を引き継ぐ */
.foo_class{
   background-color:yellow
}

クラス名で変更
classNameを変更してスタイルを変更する 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
   <script>
      window.addEventListener('load', function(){
         var obj = document.getElementById('foo_id');
   
         obj.addEventListener('mouseenter', function(){
            obj.className = 'foo_class1';
         }, false);

         obj.addEventListener('mouseleave', function(){
            obj.className = 'foo_class2';
         }, false);

      }, false);
   </script>
</head>
<body>
   <div class='foo_class2' id='foo_id'>あああ
      <div class='foo_class'>えええ</div>
   </div>
   <div class='foo_class'>いいい</div>
</body>
</html>




.foo_class1{
   color:red
}

.foo_class2{
   color:blue
}

スタイルシートを無効にする
スタイルシートを無効にする 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
   <script>
      window.addEventListener('load', function(){
         var obj = document.getElementById('foo_id');
         var styles = document.styleSheets;
   
         obj.addEventListener('mouseenter', function(){
            // すべてのスタイルシートを無効にする
            for(let i=0; i<styles.length;i++){
               styles[i].disabled = true;
            }
         }, false);

         obj.addEventListener('mouseleave', function(){
            // クラス名を変更
            obj.className = 'foo_class1';

            // すべてのスタイルシートを有効にする
            for(let i=0; i<styles.length;i++){
               styles[i].disabled = false;
            }
         }, false);

      }, false);
   </script>
</head>
<body>
   <div class='foo_class1' id='foo_id'>あああ
      <div class='foo_class'>えええ</div>
   </div>
   <div class='foo_class'>いいい</div>
</body>
</html>




.foo_class1{
   color:red
}

.foo_class2{
   color:blue
}

■JavaScriptによるニメーション

JavaScriptによるアニメーション
JavaScriptを使用してアニメーションする。setInterval()関数を使用する。
サンプルでは右方向に移動させている。 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <script>
      window.addEventListener('load', function(){
         var obj = document.getElementById('foo_id');
         var frame = 0;
         setInterval(function(){
            frame+=1;
            obj.style.left = frame * 10 + 'px';   // 横方向の表示位置をイベントが発生するごとに10ピクセル右に移動
            
            obj.style.opacity *= 0.9;   // 透明度を徐々に薄くする
         }, 100);   // 100ミリ秒ごとにイベント発生

      }, false);
   </script>
</head>
<body>
   <!-- absolute:その要素を含む親要素に対する相対座標。通常はbody-->
   <div id='foo_id' style='position: absolute; opacity:1'>あああ</div>
   <!-- fixed:ブラウザを基準とした相対座標。Webページのスクロール位置にかかわらず常に同じ位置に表示させる場合に使用する-->
   <div class='foo_class' style='position: fixed; top:20px'>いいい</div>
   <div class='foo_class' style='position: absolute; top:2000px'>ううう</div>
</body>
</html>

■CSS3によるアニメーション

平行移動
CSS3を使用してアニメーションする。JavaScriptが不要( しかしイベント操作を行う場合は別 )
サンプルでは右方向に移動させている。 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
</head>
<body>
   <div id='foo_id'>あああ</div>
</body>
</html>




#foo_id{
   transition: all 5s 0s ease;       /* 以下の４つのプロパティをまとめて設定 */

   /*
   transition-property: all;         /* transitionを適用させるCSSプロパティ。allの場合すべて。複数指定する場合はカンマ区切り */
   transition-duration: 5s;          /* アニメーション開始から終了するまでの所要時間 */
   transition-delay: 0s;             /* アニメーションを開始させるまでの遅延時間 */
   transition-timing-function: ease; /* アニメーションの変化率。easeの場合滑らかに変化する */
   */
}

#foo_id:hover{                       /* mousehoverイベントが発生したときにアニメーションさせる */
   transform: translateX(300px);     /* x方向に300px移動 */
   opacity: 0;                       /* アニメーション終了時には透明になる */
}

回転
回転 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
</head>
<body>
   <div id='foo_id'>あああ</div>
</body>
</html>




#foo_id{
   transition: all 5s 0s ease;       /* 以下の４つのプロパティをまとめて設定 */
   width: 50px;
   
   /*
   transition-property: all;         /* transitionを適用させるCSSプロパティ。allの場合すべて。複数指定する場合はカンマ区切り */
   transition-duration: 5s;          /* アニメーション開始から終了するまでの所要時間 */
   transition-delay: 0s;             /* アニメーションを開始させるまでの遅延時間 */
   transition-timing-function: ease; /* アニメーションの変化率。easeの場合滑らかに変化する */
   */
}

#foo_id:hover{                       /* mousehoverイベントが発生したときにアニメーションさせる */
   transform: rotateZ(180deg);      /* z軸を軸とする角度。度数指定。 */
   transform-origin: 50% 50%;        /* 回転の中心。50%で要素の中心 */
}

スケーリング
スケーリング 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
</head>
<body>
   <div id='foo_id'>あああ</div>
</body>
</html>




#foo_id{
   transition: all 5s 0s ease;       /* 以下の４つのプロパティをまとめて設定 */
   width: 50px;
   
   /*
   transition-property: all;         /* transitionを適用させるCSSプロパティ。allの場合すべて。複数指定する場合はカンマ区切り */
   transition-duration: 5s;          /* アニメーション開始から終了するまでの所要時間 */
   transition-delay: 0s;             /* アニメーションを開始させるまでの遅延時間 */
   transition-timing-function: ease; /* アニメーションの変化率。easeの場合開始と終了を滑らかにする */
   */
}

#foo_id:hover{                       /* mousehoverイベントが発生したときにアニメーションさせる */
   transform: scaleX(3);             /* x方向にスケーリング。元のタグの大きさに対する比率で指定 */
   transform-origin: 50% 50%;          /* スケーリングの中心。50%で要素の中心。 */
}

キーフレームアニメーション
キーフレームアニメーション 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
   <script>
      window.addEventListener('load', function(){
         var obj = document.getElementById('foo_id2');
         obj.addEventListener('click', function(){
            var obj2 = document.getElementById('foo_id1');
            if( obj2 != null ){
               obj2.id = 'anim_id';
            }
         }, false);
      }, false);
   </script>
</head>
<body>
   <div id='foo_id1'>あ</div>
   <input type='button' value='start' id='foo_id2' />
</body>
</html>




#anim_id{
  width: 20px;
  
  animation-name: anim;                     /* 要素に適用するキーフレーム名 */
  animation-duration: 5s;                   /* アニメーション開始から終了までの所要時間 */
  animation-timing-function: ease-in-out;   /* アニメーションの変化率。ease-in-outの場合ゆっくり始まってゆっくり終わる */
  animation-delay: 0s;                      /* アニメーションを開始させるまでの遅延時間 */
  animation-iteration-count: 1;             /* 再生回数。infiniteを指定するとループする。 */
  animation-direction: normal;              /* アニメーションの再生方向。 */
  animation-fill-mode: none;                /* キーフレームアニメーションで指定したプロパティをアニメーション開始前、終了後に適用するか */
  animation-play-state: running;            /* 再生 or 一時停止 */
}

@keyframes anim{
   /* 初期状態 */
   0%{
      transform: translate(0px, 0px);
   }

   20%{
      transform: translate(100px, 0px);
   }

   50%{
      transform: translate(100px, 0px) scale(3);   /* 行列の合成。右からかける。 */
      transform-origin: 50% 50%;                   /* スケーリングの中心 */
   }
   
   /* 終了時の状態 */
   100%{
      transform: translate(100px, 0px) scale(3) rotateZ(180deg);
      transform-origin: 50% 50%;
   }
}

コマ送り
コマ送り 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
   <script>
      window.addEventListener('load', function(){
         var obj = document.getElementById('foo_id2');
         obj.addEventListener('click', function(){
            var obj2 = document.getElementById('foo_id1');
            if( obj2 != null ){
               obj2.id = 'anim_id';
            }
         }, false);
      }, false);
   </script>
</head>
<body>
   <div id='foo_id1'>あ</div>
   <input type='button' value='start' id='foo_id2' />
</body>
</html>




#anim_id{
  width: 20px;
  
  animation-name: anim;                       /* 要素に適用するキーフレーム名 */
  animation-duration: 5s;                     /* アニメーション開始から終了までの所要時間 */
  animation-timing-function: steps(2, start); /* 各キーフレームごと(サンプルでは0%-20%、20%-50%、50%-100%の３か所)のフレームの分割数 */
  animation-delay: 0s;                        /* アニメーションを開始させるまでの遅延時間 */
  animation-iteration-count: 1;               /* 再生回数。infiniteを指定するとループする。 */
  animation-direction: normal;                /* アニメーションの再生方向。 */
  animation-fill-mode: none;                  /* キーフレームアニメーションで指定したプロパティをアニメーション開始前、終了後に適用するか */
  animation-play-state: running;              /* 再生 or 一時停止 */
}

@keyframes anim{
   /* 初期状態 */
   0%{
      transform: translate(0px, 0px);
   }

   20%{
      transform: translate(100px, 0px);
   }

   50%{
      transform: translate(100px, 0px) scale(3);   /* 行列の合成。右からかける。 */
      transform-origin: 50% 50%;                   /* スケーリングの中心 */
   }
   
   /* 終了時の状態 */
   100%{
      transform: translate(100px, 0px) scale(3) rotateZ(180deg);
      transform-origin: 50% 50%;
   }
}

アニメーションイベント
アニメーション開始、終了、反復終了時のイベントを捕捉する 
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
   <script>
      window.addEventListener('load', function(){
         var obj = document.getElementById('foo_id2');
         obj.addEventListener('click', function(){
            var obj2 = document.getElementById('foo_id1');
            if( obj2 != null ){
               obj2.id = 'anim_id';
            }

            // アニメーション開始(delay終了時)
            obj2.addEventListener('animationstart', listener, false);

            // アニメーション終了
            obj2.addEventListener('animationend', listener, false);

            // 反復終了時
            obj2.addEventListener('animationiteration', listener, false);

         }, false);
      }, false);
   
      function listener(event){
         switch(event.type){
         case 'animationstart':
            console.log('animationstart');
            break;
      
         case 'animationend':
            console.log('animationend');
            break;
      
         case 'animationiteration':
            console.log('animationiteration');
            break;
         }
      }
   </script>
</head>
<body>
   <div id='foo_id1'>あ</div>
   <input type='button' value='start' id='foo_id2' />
</body>
</html>




#anim_id{
  width: 20px;
  
  animation-name: anim;                       /* 要素に適用するキーフレーム名 */
  animation-duration: 5s;                     /* アニメーション開始から終了までの所要時間 */
  animation-timing-function: ease-in-out;     /* アニメーションの変化率。ease-in-outの場合ゆっくり始まってゆっくり終わる */
  animation-delay: 3s;                        /* アニメーションを開始させるまでの遅延時間。3秒後にアニメーション開始。 */
  animation-iteration-count: 2;               /* 再生回数。2回再生する */
  animation-direction: normal;                /* アニメーションの再生方向。 */
  animation-fill-mode: none;                  /* キーフレームアニメーションで指定したプロパティをアニメーション開始前、終了後に適用するか */
  animation-play-state: running;              /* 再生 or 一時停止 */
}

@keyframes anim{
   /* 初期状態 */
   0%{
      transform: translate(0px, 0px);
   }

   20%{
      transform: translate(100px, 0px);
   }

   50%{
      transform: translate(100px, 0px) scale(3);   /* 行列の合成。右からかける。 */
      transform-origin: 50% 50%;                   /* スケーリングの中心 */
   }
   
   /* 終了時の状態 */
   100%{
      transform: translate(100px, 0px) scale(3) rotateZ(180deg);
      transform-origin: 50% 50%;
   }
}

Top
inserted by FC2 system