update tangled video play

chrome/browser/resources/new_tab_page/logo.html

@@ -140,6 +140,10 @@
     --control-pulse-color: rgba(224, 224, 224, 0.4);
   }
 
+  .hidden {
+    visibility: hidden;
+  }
+
   .pulse {
     display: block;
     width: 32px;
@@ -195,65 +199,18 @@
     }
   }
 
-  .fade-in {
-    opacity: 1;
-    animation: fadeIn ease 1s;
-    -webkit-animation: fadeIn ease 1s;
-  }
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @-webkit-keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .fade-out {
-    opacity: 0;
-    animation: fadeOut ease 1s;
-    -webkit-animation: fadeOut ease 1s;
-  }
-
-  @keyframes fadeOut {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
-  }
-
-  @-webkit-keyframes fadeOut {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
+  .fade {
+    -webkit-transition: all 1s ease;
+    transition: all 1s ease;
   }
 </style>
 <link rel="stylesheet" href="fontawesome.css">
 <template is="dom-if" if="[[showLogo_]]" restamp>
   <div id="logo_container">
-    <!--i class="pulse far fa-play-circle" id="video_control" on-click="onPlayClick_"></i-->
-    <div id="logo" class="fade-in"></div>
-    <!--video id="video" preload="auto" height="284" class="fade-out">
+    <i class="pulse far fa-play-circle" id="video_control" on-click="onPlayClick_"></i>
+    <div id="logo" class="fade"></div>
+    <video id="video" preload="auto" height="284" class="fade hidden">
       <source src="./icons/tangled_browser.mp4" type="video/mp4">
-    </video-->
+    </video>
   </div>
 </template>
\ No newline at end of file