fadein effect

css/style.css

@@ -77,7 +77,10 @@ body {
       .header__text-box {
         width: 98vw; } }
     .header__text-box .title__img {
-      width: 100%; }
+      width: 100%;
+      animation-duration: 2s;
+      animation-name: fadein;
+      animation-iteration-count: 1; }
     .header__text-box .pen__img {
       position: absolute;
       width: 110px;
@@ -887,3 +890,9 @@ input[type="checkbox"]:checked + .fs-label-info {
     @media screen and (max-width: 576px) {
       .footer .deco__rightline {
         opacity: 1; } }
+
+@keyframes fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }

index.html

@@ -1237,7 +1237,7 @@
           
                   <label class="fs-label mb">建案或社區類型</label>
                   <div class="fs-label">
-                    <input type="radio" class="check_button" value="預售屋" name="q5" id="pre-sold" />
+                    <input type="radio" class="check_button" value="預售屋" name="q5" id="pre-sold" required/>
                     <label for="pre-sold" class="fs-label-type mr">預售屋</label>
                     <input type="radio" class="check_button ml" value="新成屋" name="q5" id="new" />
                     <label for="new" class="fs-label-type mr">新成屋</label>
@@ -1265,7 +1265,7 @@
                     <br/>
                     <div class="fs-label">
                       <label class="fs-label">預計裝修預算(不含活動型傢俱/廚具/空調/窗簾/主燈)?<small>(單選)</small></label>
-                      <input type="radio" value="50萬以下" name="q7" id="7a" />
+                      <input type="radio" value="50萬以下" name="q7" id="7a" required/>
                       <label class="mr fs-label-info mt" for="7a">50萬以下</label>
                       <input type="radio" value="50~100萬" name="q7" id="7b" />
                       <label class="mr fs-label-info mt" for="7b">50~100萬</label>
@@ -1286,7 +1286,7 @@
                     <br>
                     <div class="fs-label">
                       <label class="fs-label">預計裝修坪數?<small>(單選)</small></label>
-                      <input type="radio" value="20坪以下" name="q8" id="8a" />
+                      <input type="radio" value="20坪以下" name="q8" id="8a" required/>
                       <label class="mr fs-label-info mt" for="8a">20坪以下</label>
                       <input type="radio" value="20~30坪" name="q8" id="8b" />
                       <label class="mr fs-label-info mt" for="8b">20~30坪</label>

scss/main.scss

@@ -90,6 +90,9 @@ body {
         }
         .title__img {
             width: 100%;
+            animation-duration: 2s;
+            animation-name: fadein;
+            animation-iteration-count: 1;
             @media screen and(max-width: 576px) {
             }
         }
@@ -1027,3 +1030,12 @@ input[type="checkbox"]:checked + .fs-label-info {
         }
     }
 }
+
+@keyframes fadein {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+  }