C-11. アニメーションを使う

2021.12.25

transition効果を適用して使う

transition（時間的変化）効果を適用してアニメーション動作をさせてみます。

transitionプロパティは:hoverや:activeなど、要素が変化するためのトリガーが必要となります。:hoverや:activeによる要素の変化を、シームレスに行うためのプロパティがtransitionプロパティとなります。

それぞれの用語を調べて、使用方法を確認しておきましょう。

MDN transition-property 参考

記述して実際の動きを確認してみましょう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <style>
    .box{
      width:100px;
      height:100px;
      background: orange;
      /*　1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。 */
      transition-property:border-radius;
      /* アニメーションが完了するまでの所要時間 */
      transition-duration: 1s;
    }
    /* カーソル (マウスポインター) で要素の上をホバー (通過) させたときの状態 */
    .box:hover{
      border-radius: 50%;
    }
  </style>
 
  <body>
    <div class="box">
    </div>
  </body>

ブラウザ実行結果

transform効果 回転を使おう

移動、回転、伸縮、傾斜の4つがあり、2次元的な動きだけでなく、3次元的動きも可能になります。

MDN transform 参考

記述して実際の動きを確認してみましょう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <style>
    .box{
      width:100px;
      height:100px;
      background: orange;
      /* 要素の変形や回転　 */
      transition-property:transform;
      /* アニメーションが完了するまでの所要時間 */
      transition-duration: 1s;
    }
    /* カーソル (マウスポインター) で要素の上をホバー (通過) させたときの状態 */
    .box:hover{
      transform:rotate(45deg)
    }
 
  </style>
 
  <body>
    <div class="box">
    </div>
  </body>

ブラウザ実行結果

MDN transform 参考

transform効果 リサイズを使ってみよう

記述して実際の動きを確認してみましょう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <style>
    .box{
      margin: 60px;
      width:100px;
      height:100px;
      background: orange;
      /* 要素の変形や回転　 */
      transition-property:transform;
      /* アニメーションが完了するまでの所要時間 */
      transition-duration: 1s;
    }
    /* カーソル (マウスポインター) で要素の上をホバー (通過) させたときの状態 */
    .box:hover{
      /* scale(X方向の縮尺比率, Y方向の縮尺比率) */
      transform:scale(2.0,2.0);
    }
 
  </style>
 
  <body>
    <div class="box">
    <p> サイズの拡大</p>
    </div>
  </body>

ブラウザ実行結果

animationを使ってみよう

animationは, transition を連続して行うような、次から次へと別の状態に変化させることができるようにする場合に利用します。

「animation」は「keyframes」で指定した動きを要素に設定します。

「@keyframes」はアニメーションの動きを指定することができます。

MDN animation 参考

記述して実際の動きを確認してみましょう。どこを変えれば変化するか確認してみましょう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
  <style>
    .box{
      margin: 60px;
      width:100px;
      height:100px;
      background: orange;
      /* 要素の変形や回転　 */
      transition-property:transform;
      /* アニメーションが完了するまでの所要時間 */
      transition-duration: 1s;/* 拡大 */
      animation-iteration-count: infinite;
    }
    /* カーソル (マウスポインター) で要素の上をホバー (通過) させたときの状態 */
    .box:hover{
      /* scale(X方向の縮尺比率, Y方向の縮尺比率) */
      transform:scale(2.0,2.0);
      /* 5sで背景変更します */
      animation: bgChange 5s;
      animation-iteration-count: infinite;/* 繰り返し */
    }
    @keyframes bgChange {
      0% {
        background-color: red;
      }
      25% {
        background-color: yellow;
      }
      50% {
        background-color: green;
      }
      75% {
        background-color: blue;
      }
      100% {
        background-color: purple;
      }
    }
  </style>
 
  <body>
    <div class="box">
    <p> サイズの拡大</p>
    <p> 色の変更</p>
    </div>
  </body>

ブラウザ実行結果

animationも多くの手法がありますので、使いたい要素がある時に、都度検索してみてください。

課題

下記のようなタブ切り替え機能を作成してください。作成したファイル名をindex_2_21.htmlにして送ってください。

手順

１．ラジオボタンでコンテンツ切り替えの制御を行う。

２．ラジオボタンと、表示ラベルと、各タブで表示するdiv要素で連動させます。

３．連動させる要素にfor属性でラジオボタンのidを指定します。for属性参考サイト

４．「~」同じ親要素を持つ兄弟要素の結合子を利用します。CSSセレクタの結合子を使った階層指定参考サイト

※シンプルなタブの作成で可能です。

※他のサイトを参考でも可能です。

※タブの作成方法は、いろんな方法があります。自身で作りやすい方法を試してください。

実行結果

ヒント

一例の一部のパーツです。displayに入る値については、ご自身で理解いただけるように、検索して入れるようにしましょう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* HTML */
<div class="tab_wrap">
            <input id="tab1" type="radio" name="tab_btn" checked="">
            <div class="tab_area">
                <label class="tab1_label" for="tab1">タブ1</label>
            </div>
            <div class="panel_area">
                <div id="panel1" class="tab_panel">
                    <p>タブパネル-1</p>
                </div>
            </div>
        </div>
</div>
 
/* CSS */
input[type="radio"]{
    display:;/* ボタンを隠す 検索例:CSS dispaly ラジオボタンをなくす*/
}
.tab_area label{
    width:150px;
    margin:0 5px;
    display:; /* 隣接する要素と同じ行に配置 検索例:CSS display 同じ行に配置*/
    padding:12px 0;
    color:#999;
    background:#ddd;
    text-align:center;
    font-size:13px;
    cursor:pointer;
    transition:ease 0.2s opacity;/*タブの状態間の変化を定義*/
}
.tab_panel{
    display:none;
}
/* ラジオボタンでコンテンツ切り替えの制御 */
/* 連動させるため、連動させる要素にfor属性でラジオボタンのidを指定 */
/* ~ と同じ階層エリアに色変え　*/
#tab1:checked ~ .tab_area .tab1_label{
    background:#fff;
    color:#000;
}
#tab1:checked ~ .panel_area #panel1{
    display:block;/* ブロックスにする */
}

課題・復習用検索キーワード

検索例
🔍CSS　display　種類
🔍HTML/CSSだけでタブメニュー
🔍CSS　laber forの役割