From c15facff598bdecb498d885aaaa1dfd56b4a41ee Mon Sep 17 00:00:00 2001
From: Michael Orlitzky <michael@orlitzky.com>
Date: Tue, 10 Oct 2023 20:35:41 -0400
Subject: [PATCH] src/index.html.in: animate the trees

---
 src/index.html.in | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/index.html.in b/src/index.html.in
index ff5410f..d6f4213 100644
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -58,6 +58,8 @@
       /************************/
       /* Scrolling animations */
       /************************/
+
+      /* Bus */
       @keyframes busroll {
 	from {
 	  transform: translateX(0%);
@@ -71,6 +73,8 @@
 	animation: busroll 20s linear infinite;
       }
 
+
+      /* Tram */
       @keyframes tramroll {
 	from {
 	  transform: translateX(0%);
@@ -84,6 +88,8 @@
 	animation: tramroll 15s linear infinite;
       }
 
+
+      /* Clouds */
       @keyframes cloudsfloat {
 	from {
 	  transform: translateX(0%);
@@ -109,6 +115,36 @@
       #cloudscopy {
 	animation: cloudscopyfloat 40s linear infinite;
       }
+
+
+      /* Trees */
+      @keyframes treespass {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(-50%);
+	}
+      }
+
+      #trees {
+        /* The trees move a little faster than the clouds */
+	animation: treespass 30s linear infinite;
+      }
+
+      @keyframes treescopypass {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(-50%);
+	}
+      }
+
+      #treescopy {
+        /* The trees move a little faster than the clouds */
+	animation: treescopypass 30s linear infinite;
+      }
     </style>
   </head>
 
-- 
2.44.2