Add css animation

Author: lukehorvat

src/index.css

@@ -55,12 +55,6 @@ body,
   text-transform: uppercase;
 }
 
-canvas {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
 .fork {
   position: absolute;
   bottom: 0;
@@ -73,3 +67,22 @@ canvas {
   font-size: x-small;
   z-index: 1; /* Above the canvas. */
 }
+
+.scene {
+  width: 100%;
+  height: 100%;
+  display: block;
+  animation: 4s ease-in-out showScene;
+}
+
+@keyframes showScene {
+  0% {
+    transform: scale(0);
+    border-radius: 100%;
+  }
+
+  100% {
+    transform: scale(1);
+    border-radius: 0;
+  }
+}

src/lib/scene-manager.ts

@@ -57,7 +57,9 @@ export class SceneManager {
   }
 
   render(containerEl: Element): void {
-    containerEl.appendChild(this.renderer.domElement);
+    const canvas = this.renderer.domElement;
+    canvas.classList.add('scene');
+    containerEl.appendChild(canvas);
     this.renderer.setAnimationLoop(this.animate.bind(this));
     this.spawnSound();
   }