add some animations

src/App.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import MainView from "./views/main.svelte"
+
+  //TODO: load config
+
 </script>
 
-<MainView />
-
+<main style:background-color="blue">
+  <MainView />
+</main>
 
 <style>
 :global(body) {

src/views/main.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { appWindow } from "@tauri-apps/api/window";
-  import { onDestroy, onMount } from "svelte";
+  import { onMount } from "svelte";
+  import { fly } from "svelte/transition";
 
   let transparent = false;
 
@@ -11,17 +12,46 @@
   });
 </script>
 
-<div class="container" class:transparent >
-<h1> Hell world</h1>
+<div class="container" class:transparent>
+  {#if !transparent}
+  <div transition:fly="{{ duration: 200, x: -200, opacity: 100}}" class="frames" > 
+    <p> 1 </p>
+    <p> 2 </p>
+    <p> 3 </p>
+    <p> 4 </p>
+  </div>
+  {/if}
 </div>
 
 <style>
+  .frames {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+}
+
+
+  @keyframes fade-out {
+   0% {background-color: inherit;}
+   100% {background-color: transparent;}
+}
+
+  @keyframes fade-in {
+   0% {background-color: transparent;}
+   100% {background-color: inherit;}
+}
   .container {
-    background-color: red;
+    background-color: inherit;
+    animation-name: fade-in;
+    animation-duration: 0.25s;
   }
   
   .container.transparent {
-    background-color: rgba(0,0,0,0);
+    animation-name: fade-out;
+    animation-duration: 0.25s;
+    background-color: transparent;
+
+
 }