update: 通話終了バーにスタイルを適用

public/index.html

@@ -267,7 +267,7 @@
           </div>
           <div class="touch"></div>
         </section>
-        <section class="controls-bar">
+        <section class="calling__controls-bar">
           <div class="inner">
             <div class="btn"><i class="fas fa-video"></i></div>
             <div class="btn"><i class="fas fa-phone"></i></div>

src/scss/keyframes/pc/_calling.scss

@@ -24,3 +24,7 @@
   to   { transform: scale(1) translate(0); opacity: 1; }
 }
 
+@keyframes calling__show-controls-bar {
+  from { width: 0; left: 50%; }
+  to   { width: 500px; left: calc(50% - 250px); }
+}

src/scss/modules/pc/_calling.scss

@@ -192,6 +192,34 @@
     }
   }
 
+  /*** controls-bar ***/
+  .calling__controls-bar {
+    position: absolute;
+    bottom: 60px; left: 50%;
+    width: 0px; height: 60px;
+    background-color: #222;
+    border-radius: 30px;
+
+    .inner {
+      width: 280px;
+      margin: 0 auto;
+    }
+
+    .btn {
+      float: left;
+      width: 60px; height: 60px;
+      font-size: 25px;
+      text-align: center;
+      line-height: 60px;
+      color: #999;
+      display: block;
+      margin-right: 50px;
+      opacity: 0;
+    }
+    .btn .fa-phone { transform: rotate(225deg); color: #af5853; font-size: 30px; }
+    .btn:last-child { margin-right: 0; }
+  }
+
   .calling[data-state="start"] {
     /*** bg ***/
     .calling__bg {
@@ -293,5 +321,25 @@
       }
       .touch { animation: calling__touch-btn 0.6s ease 5.9s forwards; }
     }
+
+    /*** controls-bar ***/
+    .calling__controls-bar {
+      animation: calling__show-controls-bar 0.4s ease 6.6s forwards;
+      div:nth-child(1) {
+        animation:
+          fadein 0.8s ease 7s forwards,
+          scale0-1 0.8s ease 7s forwards;
+      }
+      div:nth-child(2) {
+        animation:
+          fadein 0.8s ease 7.4s forwards,
+          scale0-1 0.8s ease 7.4s forwards;
+      }
+      div:nth-child(3) {
+        animation:
+          fadein 0.8s ease 7.2s forwards,
+          scale0-1 0.8s ease 7.2s forwards;
+      }
+    }
   }
 }