CSSだけで簡単に作れる実際に使えるアニメーションの作り方

• メニューボタンの作成
  1. 黒の正方形を作る

     「40px」の黒の正方形を作ります。

     この後の工程で3本の白いバーの設置とメニューボタンの配置します。

     その際に「fixed」が重要になるので、忘れないようにしましょう。

     .menubutton {

     position: fixed;

     width: 40px;
     height: 40px;
     background: black;

     }
  2. 白い3本の長方形を作る

     「iタグ」を使って白い3本のバーを作ります。

     <i></i>
     <i></i>
     <i></i>
     .menubutton i {

     display: block;
     width: 30px;
     height: 5px;
     background: white;

     }
     「iタグ」について

     1. 本来は斜め文字に装飾するタグ

        iタグの本来の使い方は「Naname Letter」のように斜め文字にしたい時に使用するタグですが、今回のようにアイコン用のためにiタグを使用します。

        斜め文字はCSSでも出来るのでiタグは使われなくなりました。そのため、よくアイコン用に使われるようになりました。
     2. displayプロパティの上書き

        iタグのdisplayプロパティの初期値は「inline」という値で、大きさを変えられません。なので、大きさを変えられるように「block」に上書きします。

        デザインの都合上必要な上書きという認識で大丈夫です。
        display: block;
  3. 白いバーを配置する
     • 共通部分

       3本の共通部分をまとめて設定します。

       1. 左から50%の位置に指定する

          黒の正方形の左から50%(半分)の位置に指定します。

       2. 位置を修正する

          白いバーの縦横それぞれの50%(半分)の大きさ分を左と上に位置を修正します。

       3. アニメーション設定

          クリックされた時の白いバーの変化を「0.5秒」かけてアニメーションさせます。

       .menubutton i {
       position: absolute;
       left: 50%;
       transform: translate(-50%,-50%);

       transition: all .5s
       }
     • 1本目

       上から1本目のバーの縦方向の位置を指定します。

       1. 上から10pxの位置に指定する

          黒の正方形の上から「10px」の位置に指定します。

       2. 位置を修正する

          上記の共通部分で指定した「translate」で上に修正します。

       .menubutton i:first-child {
       top: 10px;
       }
     • 2本目

       上から2本目のバーの縦方向の位置を指定します。

       1. 上から50%の位置に指定する

          黒の正方形の上から「50%」の位置に指定します。

       2. 位置を修正する

          上記の共通部分で指定した「translate」で上に修正します。

       .menubutton i:nth-child(2) {
       top: 50%;
       }
     • 3本目

       上から3本目のバーの縦方向の位置を指定します。

       1. 上から30pxの位置に指定する

          黒の正方形の上から「30px」の位置に指定します。

       2. 位置を修正する

          上記の共通部分で指定した「translate」で上に修正します。

       .menubutton i:last-child {
       top: 30px;
       }
• メニューボタンの配置
  • position: fixed

    メニューボタンを画面に固定してスクロールしても付いてくるようにします。

  • top: 0

    画面の上部に固定して配置します。

  • left: 0

    画面の左側に固定して配置します。

  • cursor: pointer

    マウスを乗せたの時にマウスカーソルの形をポインターに変えます。

  • z-index: 100
    100

    50

    20

    positionで要素同士が重なるデザインの時に「z-index」というプロパティで重ねていく順番を指定します。

    もしヘッダーの裏に隠れて見えなかったらもったいないので必ず上に重ねて表示されるようにします。

    このz-indexの数字が大きいほど優先的に上に重なるようになります。

    .menubutton {
    position: fixed;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 100;
    }
    z-indexについて

    z-indexの初期値は「0」が基準になります。z-indexの値が大きい順に手前に表示されます。

    反対に背景画像など奥に表示させたい時は「-1」のようにマイナス値を指定することも出来ます。

    z-index: -1;

1. openクラスを付加する

   JavaScriptでopenクラスを付加します。

   openクラスが付加されたきっかけでアニメーションが動き出します。

   <div class="menubutton" onclick="toggle()>

   <i></i>
   <i></i>
   <i></i>

   </div>

   <script>

   function toggle() {

   document.querySelector('.menubutton').classList.toggle('open');

   }

   メソッド名:toggle {

   'menubutton'クラスにトグルで'open'クラスを付加または消去する;

   }

   </script>
2. 中央のバーを消す

   中央にある必要ないので透明にして消します。

   .menubutton.open i:nth-child(2){
   opacity: 0;
   }
3. 上下のバーをクロスさせる

   上下の2本のバーを使ってクロスさせます。

   • 上のバー

     1本目のバーを45度回転させて中央に寄せます。

     1. 45度回転する

        「rotate」を使って角度を変更します。

        45度は英語で「45 degrees」
     2. 中央に寄せる

        黒の正方形の中央に寄せます。

     .menubutton.open i:first-child {
     top: 50%;
     transform: translate(-50%,-50%) rotate(45deg);
     }
   • 下のバー

     3本目のバーを-45度回転させて中央に寄せます。

     1. -45度回転する

        「rotate」を使って先ほどとは反対の角度に変更します。

     2. 中央に寄せる

        黒の正方形の中央に寄せます。

     .menubutton.open i:last-child {
     top: 50%;
     transform: translate(-50%,-50%) rotate(-45deg);
     }
   transformの値が2つ？

   transformの値に「translate(-50%,-50%)」と「rotate(45deg)」の2つの値が指定されています。

   もちろん、要素の回転させているのは「rotate(45deg)」です。

   では、どうして「translate(-50%,-50%)」が必要なのでしょうか？

   • translateを残した理由

     理由は位置がズレてしまうからです。

     もし下記のようにした場合、元から指定していた「translate(-50%,-50%)」は上書きされて「rotate(45deg)」のみが適用されます。

     /* 下にズレるからNG */
     transform: rotate(45deg);

     これを上書きされても「translate」は残したいので1つ目に「translate」、2つ目に「rotate」を間にスペースを空けて2つ適用させています。

     /* これでOK */
     transform: translate(-50%,-50%) rotate(45deg);

• メニューを最大まで広げる
  • About
  • Access
  • Recruit
  • Contact
  • 横幅を画面いっぱいに広げる

    メニューの横幅を画面の最大の大きさまで広げます。

    .menu {
    width: 100%;
    }
  • 高さを画面いっぱいに広げる

    メニューの高さを画面の最大の大きさまで広げます。

    .menu {
    height: 100vh;
    }
    100vh

    「vh」という単位は「viewport height」の略で画面(ブラウザ)の縦の大きさを基準にした単位です。

    vh

    つまり「100vh」は画面の高さと同じ大きさを意味します。

    • 100vh = 画面の高さ
    • 50vh = 画面の半分の高さ

    vw

    ちなみに「vw」という単位「viewport width」は画面(ブラウザ)の横の大きさを基準にした値になります。

    • 100vw = 画面の横幅
    • 50vw = 画面の半分の横幅
• 上部にスペースを作る
  • About
  • Access
  • Recruit
  • Contact

  上部に「40px」のスペースを作ります。

  左上に設置するメニューボタンと被らないようにします。

  .menu ul {
  margin: 40px 0 0 0;
  }
• メニューの配置
  • About
  • Access
  • Recruit
  • Contact
  • position: fixed

    スクロールしても画面に固定されるようにします。

  • top: 0

    画面の上部に固定して配置します。

  • left: -100%

    メニュ-を画面の左側に配置して、画面の外に飛ばします。

    メニューの左側を横幅の大きさ(100%)をマイナス値で指定します。

  .menu {
  position: fixed;
  top: 0;
  left: -100%;
  }

• アニメーションの設定
  • トランジション

    なめらかに変化させてスライドするようにします。

  • アニメーションする対象

    今回は「left」の値のみですが、「all」にしてすべてを対象にします。

  • 変化させる時間

    変更前と変更後を「0.5秒」かけてアニメーションさせたいので、「.5s」にして0.5秒かけてなめらかに変化します。

  .menu {
  transition: all .5s;
  }
• スライドして表示
  • openクラスを付加する

    JavaScriptのトグルを使ってクラスの付加・消去をして表示・非表示を切り替えます。

    <div class="menubutton" onclick="toggle()">

    ...

    </div>
    <div class="menu">

    ...

    </div>

    <script>

    function toggle() {

    document.querySelector('.menu').classList.toggle('open');

    }

    メソッド名:toggle {

    'menu'クラスにトグルで'open'クラスを付加または消去する;

    }

    </script>
  • メニューの表示

    JavaScriptで「open」クラスが付加された時に、CSSで表示するように上書きします。

    「left: -100%」で画面の外に飛ばしていたメニューを「left: 0」で戻します。

    .menu.open {
    left: 0;
    }

• メニューの基本デザイン
  ドロワーメニュー

  • About
  • Access
  • Recruit
  • Contact
  • 横幅の大きさ

    メニューの横幅を「200px」にして記事の部分は見えるようにします。

  • 位置

    最初はメニューが見えない状態にしたいので、「left: -200px」で画面の外に飛ばします。

    メニューの横幅と同じ「200px」をマイナス値で画面の左側に飛ばしています。

    表示する時は、「left: 0」にして見える状態にします。

  • アニメーション

    メニューの開閉を「0.5秒」かけてアニメーションします。

  .menu {
  position: fixed;
  top: 0;
  left: -200px;
  width: 200px;
  height: 100vh;
  background: white;

  transition: all .5s;
  }
  .menu.open {
  left: 0;
  }
• メニューリストの動作
  • About
  • Access
  • Recruit
  • Contact
  • 透明度

    メニューが開く前は透明にして、開いた後は不透明にします。

    「opacity」の値を最初は「0」に設定して、メニューが開いた時に「1」にして見えるようにします。

  • マージン

    メニューが開く前はリストを左に寄せて、開いた後は元の位置に戻します。

    マージンの左側を「-20px」を指定して、マイナス値でリストを左に寄せます。

    メニューが開いた時にマージンの値を「0」にして元の位置に戻します。

  .menu li {
  opacity: 0;
  margin-left: -20px;
  }
  .menu.open li {
  opacity: 1;
  margin-left: 0;
  }
• アニメーション設定

  メニューのリストを「0.5秒」かけて変化させて、さらに開始タイミングを遅らせます。

  • リスト全体

    「0.5秒」かけて変化をアニメーションさせます。

    .menu li {
    transition: all .5s;
    }
  • 1つ目(About)

    「0.5秒」遅らせて表示させます。

    メニューが完全に開くまで「0.5秒」かかるので、開き終わった後に1番目のリストを表示させます。

    .menu.open li:first-child {
    transition-delay: .5s;
    }
  • 2つ目(Access)

    「0.7秒」遅らせて表示させます。

    メニューが開くまでの「0.5秒」と1つ目のリストが開始して「0.2秒後」に表示させます。

    .menu.open li:nth-child(2) {
    transition-delay: .7s;
    }
  • 3つ目(Recruit)

    「0.9秒」遅らせて表示させます。

    メニューが開くまでの「0.5秒」と1つ目と2つ目のリストが開始して「0.4秒後」に表示させます。

    .menu.open li:nth-child(3) {
    transition-delay: .9s;
    }
  • 4つ目(Contact)

    「1.1秒」遅らせて表示させます。

    メニューが開くまでの「0.5秒」と1つ目と2つ目と3つ目のリストが開始して「0.6秒後」に表示させます。

    .menu.open li:nth-child(4) {
    transition-delay: 1.1s;
    }

アニメーションは開始タイミングを遅らせることが出来ます。

マウスを乗せた時やクリックがきっかけでアニメーションをスタートさせていました。

そのきっかけから何秒後にアニメーションをスタートするか決めることが出来ます。

• 遅延時間を設定する
  transition-delay: 1s;

  「transition-delay」というプロパティを使ってアニメーションの開始を遅らせます。

  1. 1s

     アニメーションが開始するタイミングを「1秒」遅らせます。

  transition: all 2s;
  transition-delay: 1s;
• まとめてアニメーション設定する
  transition: all 2s 1s;

  これまでの書き方に1ヵ所付け加えるだけで遅延することが出来ます。

  1. all

     アニメーションさせたい対象をすべてにしています。

  2. 2s

     アニメーションで変化させる時間を「2秒」に設定しています。

  3. 1s

     アニメーションが開始するタイミングを「1秒」遅らせます。

  transition: all 2s 1s;
  記述する順番

  まとめて設定する場合は、記述する順番が重要になってきます。

  基本的には最初に「all」、次に「変化する時間」、その後に「遅延する時間」の順番で記述していきます。

  • allの位置を変えると？
    transition: 2s 1s all ;

    例えば「all」の位置を一番後ろに変えるとどうなるのでしょうか？

    この場合は、特に問題はありません。

    「all」は順番に関係なく記述可能です。

  • 秒数を入れ替えると？
    transition: all 1s 2s;

    秒数の記述する順番が変わるとどうなるのでしょうか？

    上記のように「2s」と「1s」を入れ替えると意味が反対になってしまいます。

    この場合、「1秒かけて変化」「2秒遅延する」という意味なってなってしまいます。

    もし「2秒かけて変化」「1秒遅延」のアニメーションを設定する場合は、下記の順番で記述します。

    transition: all 2s 1s;

• アニメーション設定

  ローディングアニメーションのs設定をします。

  「animation」プロパティを使って設定を行います。

  .spinner {
  animation: guru-guru 1s linear infinite;
  }
  • guru-guru

    アニメーションの名前を「guru-guru」にします。

    名前はなんでもOKですが、「opacity」「color」などCSSのプロパティとして使われる文字列は避けるようにしてください。
  • 1s

    開始から終了まで「1秒」かけて１回転するようにします。

  • linear

    アニメーションの変化の速さを一定にします。

    変化を一定の速さに設定してなめらかに回転させます。

    変化に速さ

    変化の速さに緩急を付けたり、一定にしたり変化の速さを変えることが出来ます。

    すべて同じタイミング・同じ秒数でアニメーションさせてみました。

    • ease(初期値)

      開始と終了をなめらかにします。

      何も指定しなかった場合、初期値の「ease」が自動で適用されます。

      transition: all 1s;
      animation: guru-guru 1s;
    • ease-in

      ゆっくり始まります。

      transition: all 1s ease-in;
      animation: guru-guru 1s ease-in;
    • ease-out

      ゆっくり終わります。

      transition: all 1s ease-out;
      animation: guru-guru 1s ease-out;
    • ease-in-out

      ゆっくり始まってゆっくり終わります。

      transition: all 1s ease-in-out;
      animation: guru-guru 1s ease-in-out;
    • linear

      一定の速さで回ります。

      transition: all 1s linear;
      animation: guru-guru 1s linear;
  • infinite

    アニメーションを無限に繰り返すようにします。

    アニメーションが終わったら、また最初からアニメーションをして繰り返します。

    繰り返す回数を決める

    • 何も書かなかった時

      アニメーションは1回で終わります。

      animation: guru-guru 1s linear;
    • 数字を入れた時

      数字を入れた時はその回数分繰り返します。

      下のサンプルは3回アニメーションします。

      animation: guru-guru 1s linear 3;
    • infinite

      無限に繰り返します。

      animation: guru-guru 1s linear infinite;
• 回転アニメーションを作る
  • キーフレーム

    キーフレームで「0%〜100%」でその都度CSSを書き換えてアニメーションしています。

    最初(0%)の時は「0°」から始まり、最後(100%)の時は「360°」で終わるようにします。

    「360°」まで回転し終わったら、アニメーション設定で指定した「infinite」で繰り返します。

    角度は英語で「degrees」
    @keyframes guru-guru {
    0% {

    transform: rotate(0);

    }
    100% {

    transform: rotate(360deg);

    }
    }

• リストのデザイン調整

  アニメーションさせるために、まず先にリスト(liタグ)のデザインを作ります。

  パーツごとに重要なポイントを押さえて説明していきます。

  1. relativeを指定する

     リストの左側に「Before要素」、下に「After要素」を設置するため、「relative」を必ず指定します。

  2. 左側に20pxのスペース(外側)

     リスト同士の間隔(上下)を「.8em」^※のスペースを作ります。

     さらに、左側に「20px」のスペースを作ります。

     これは左側に「Before要素」を設置するのでそのために空けています。

     文字サイズが「16px」の時、「12.8px」の大きさでスペースを作ります。
  3. 左側に10pxのスペース(内側)

     リストの左側にある「Before要素」と間に「10px」のスペースを作って、見やすくします。

  .mokuji li {
  position: relative;
  margin: .8em 0 .8em 20px;
  padding-left: 10px;
  
  }
• 擬似要素のデザイン
  • 共通設定

    擬似要素の「before」と「after」の共通部分をまとめて指定します。

    .mokuji li::before,
    .mokuji li::after {
    position: absolute;
    content: '';
    }
  • Before要素
    CSSについて
    1. 正方形を作る

       「10px」の紺色の正方形を作ります。

    2. 左側に寄せる

       正方形をリストの左側に置くため、「right: 100%」と指定します。

       もし「right: 0」だったら右側に配置されますよね。

       「right: 100%」は、リスト本体の大きさ(100%)分を右から左に移動＝左寄せにします。

    3. 中央寄せ

       上下の位置を中央寄せします。

       まず、上から「50%」の位置(半分の高さ)に設置します。

       その後、正方形の半分の大きさ「5px」を上に修正して、中央に寄せます。

    .mokuji li::before {
    top: calc(50% - 5px);
    right: 100%;
    width: 10px;
    height: 10px;
    background: #01558d;
    }
    calcってなに？

    今回は位置の指定に「calc」という計算してくれる関数を使いました。

    簡単にいうと「%」「px」「em」など、単位の違うものでも計算してくれる関数です。

    • どんな計算になる？

      例えば上記ような「10px」の正方形を中央に配置したい時の計算を考えます。

      「100px」の高さのある要素の中で正方形を中央に寄せる時、その半分の高さ「50%」は「50px」の位置に配置されます。

      さらにそこから正方形の半分の大きさ「5px」を引いて上に修正します。

      計算結果は「top: 45px」が指定されます。

      top: calc(50% - 5px);
    • こんな方法でも出来る

      calc関数を使わないで、「translate」でもほぼ同じ働きが可能です。

      上から「50%」の値で中央まで移動します。

      その後に「translateY」で高さを「5px」上に戻して中央寄せしています。

      top: 50%;
      transform: translateY(-5px);
  • After要素
    CSSについて
    1. 横に長い線を作る

       高さ「2px」の紺色の線を引きます。

       横幅は「0px」にして、ホバーした時に「100%」にして広げます。

    2. 左下に寄せる

       「top: 100%」と「left: 0」で左に寄せます。

    .mokuji li::after {
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background: #01558d;
    }

リストをマウスカーソルでホバーした時にアニメーションさせます。

• 共通アニメーション設定

  擬似要素の「Before」と「After」を「0.2秒」かけてアニメーションするように、まとめて指定します。

  .mokuji li::before,
  .mokuji li::after {
  transition: all .2s;
  }
• ホバーした時
  • Before要素

    正方形のブロックを「top: 100%」で一番下まで移動しながら高さを「2px」に変えて、ブロックを潰したような演出をします。

    .mokuji li:hover::before {
    top: 100%;
    height: 2px;
    }
  • After要素

    横幅を「0」にしていたものほ「100%」にして、横に伸びる線を演出します。

    .mokuji li:hover::after {
    width: 100%;
    }
• アニメーションの遅延
  CSSについて

  アニメーションの遅延を利用して、Before要素とAfter要素を繋がったアニメーションにします。

  • ホバーした時
    1. 先にBefore要素がスタート

       遅延を「0秒」にして先にアニメーションします。

       遅延しないのに「0秒遅延」と記述した理由は後ほど説明します。
       .mokuji li:hover::before {
       transition-delay: 0s;
       }
    2. 次にAfter要素がスタート

       「0.2秒」かけてBefore要素が変化した後、After要素がスタートします。

       After要素を「0.2秒後」にスタートさせます。

       .mokuji li:hover::after {
       transition-delay: .2s;
       }
  • ホバーを解除した時
    1. 先にAfter要素を元に戻す

       ホバーした時に「0.2秒」遅らせていたAfter要素を「0秒」の遅延に上書きして遅延をなくします。

       .mokuji li::after {
       transition-delay: 0s;
       }
    2. 次にBefore要素を元に戻す

       ホバーした時に「0秒」遅らせていたBefore要素を「0.2秒」の遅延に上書きして遅らせます。

       .mokuji li::before {
       transition-delay: .2s;
       }
  0秒の遅延の理由

  遅延しないのになぜ「0秒」の遅延を記述する必要があったのでしょうか？

  理由は、「ホバーした時」と「ホバーを解除した時」にBefore要素とAfter要素の遅延設定を入れ替えるためです。

  • ホバーした時のCSS

    ホバーした時はBefore要素の後にAfter要素がアニメーションするように、After要素を「0.2秒」を遅延しています。

    .mokuji li:hover::before {
    transition-delay: 0s;
    }
    .mokuji li:hover::after {
    transition-delay: .2s;
    }
  • ホバー解除した時のCSS

    ホバーを解除した時はAfter要素の後にBefore要素の順で元に戻します。

    そのために、遅延設定を入れ替えています。

    .mokuji li::before {
    transition-delay: .2s;
    }
    .mokuji li::after {
    transition-delay: 0s;
    }

• 基本デザイン
  • 基本フレーム

    「120px」の正方形を作成していきます。

    この正方形を基準に円・テキスト・波紋を作成していきます。

    .round {
    position: relative;
    width: 120px;
    height: 120px;
    }
  • 円の作成

    Before要素を使って、直径「60px」の紺色の円を作成します。

    そして、作成した円を正方形の中心に配置します。

    .round::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: #3992ce;
    border-radius: 100%;
    }
  • テキストを上に重ねる

    After要素を使って「Wave」というテキストを円の上に作成します。

    「left: 0」「right: 0」で左右を最大まで広げて、その後テキストを中央寄せしています。

    また、contentにattr()という関数を使って、HTMLからCSSへ「Wave」というテキストを引き継いで表示させます。

    .round::after {
    position: absolute;
    content: attr(data-text);
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: 30px;
    color: white;
    }
    attr(data-text)ってなに？

    HTMLからCSSにテキスト形式で引き継いで、擬似要素の「content」に代入することができます。

    その際に「attr()」という関数を使って「data-text」の値を受け取り・代入をして表示します。

    このようにするとAfter要素またはBefore要素の「content」は修正しなくても、再利用が可能になります。

    <div data-text="Wave"></div>
    <div data-text="Wave2"></div> div::after {

    content: attr(data-text);

    }
• 波紋の作成
  • 波紋のデザイン

    waveクラスの「Before要素」と「After要素」を使って２つの波紋を作成します。

    直径「50px」の円に、ボーダーで「2px」の白い枠を作成します。

    そして、作成した2つの円を正方形の中心に配置します。

    .wave::before,
    .wave::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    border: solid 2px white;
    border-radius: 100%;
    }
  • 波紋は後ろに隠す

    波紋は最初見せたくないので、要素の重なりを利用して波紋を隠します。

    z-indexを使って「1〜3」で重なる順番を指定します。

    数字が大きいほど出前に重なって表示されます。

    .wave::before,
    .wave::after {
    z-index: 1;
    }
    .round::before {
    z-index: 2;
    }
    .round::after {
    z-index: 3;
    }

• ホバーしたらアニメーション

  ホバーした時にアニメーションを設定して波紋を表現します。

  「round」クラスにホバーした時に、その中の波紋である「wave」クラスをアニメーションします。

  さらに、「wave」クラスの「After要素」を「0.7秒」遅らせてスタートします。

  <div class="round" data-text="Wave">
  <div class="wave"></div>
  </div> .round:hover .wave::before,
  .round:hover .wave::after {
  animation: wave 2s linear infinite;
  }
  .waves:hover .wave::after {
  animation-delay: .7s;
  }
• アニメーション作成

  アニメーションの動きを作成します。

  アニメーションの遅延をすることで、2つの波紋を表現しています。

  • 大きくする(0%〜90%)
    1. 「0%〜90%」の間で「50px〜100%」まで大きくします。
    2. 「90%〜100%」の間はその場に止まり続けます。
    大きさは「100%＝120px」になります。
  • 透明・不透明
    1. 「0%〜70%」の間は見える状態にします。
    2. 「70%〜90%」の間で徐々に透明にします。
    3. 「90%〜100%」の間は透明のままにします。
  @keyframes wave {
  0% {

  width: 50px;
  height: 50px;
  opacity: 1;

  }
  70% {

  opacity: 1;

  }
  90% {

  width: 100%;
  height: 100%;
  opacity: 0;

  }
  100% {

  width: 100%;
  height: 100%;
  opacity: 0;

  }
  }