From 6538f84d21ea05f1c6652869e143793ddbfa4680 Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Tue, 19 Apr 2022 16:23:58 +0100
Subject: [PATCH] pause on hover

---
 index.html | 14 ++++++------
 style.css  | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 5a7513b..a53fbbd 100644
--- a/index.html
+++ b/index.html
@@ -9,13 +9,13 @@
     <div id="app" class="wrapper">
 			<ul class="orbitals clockwise">
 				<li class="orbital bg bg--red pulse"><div class="orbital-content content-center anti-clockwise"><p>Hallo!</p></div></li>
-			  <li class="orbital bg bg--green"><div class="orbital-content"></div></li>
-			  <li class="orbital bg bg--blue"><div class="orbital-content"></div></li>
-				<li class="orbital bg bg--red"><div class="orbital-content content-center anti-clockwise"><p>How's things?</p></div></li>
-			  <li class="orbital bg bg--green"><div class="orbital-content"></div></li>
-			  <li class="orbital bg bg--blue"><div class="orbital-content"></div></li>
-			  <li class="orbital bg bg--red"><div class="orbital-content"></div></li>
-			  <li class="orbital bg bg--green"><div class="orbital-content"></div></li>
+			  <li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li>
+			  <li class="orbital bg bg--blue pulse"><div class="orbital-content"></div></li>
+				<li class="orbital bg bg--red pulse"><div class="orbital-content content-center anti-clockwise"><p>How's things?</p></div></li>
+			  <li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li>
+			  <li class="orbital bg bg--blue pulse"><div class="orbital-content"></div></li>
+			  <li class="orbital bg bg--red pulse"><div class="orbital-content"></div></li>
+			  <li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li>
 			</ul>
 			<div class="inner-content">
 				<div class="image-hover">
diff --git a/style.css b/style.css
index aabc617..e3a3f58 100644
--- a/style.css
+++ b/style.css
@@ -167,17 +167,72 @@ ul, li {
 	}
 }
 
+.orbitals:hover {
+	&.clockwise,
+	& .anti-clockwise {
+		animation-play-state: paused;
+	}
+}
+
+.orbital.pulse:hover {
+	&::before {
+		animation-play-state: paused;
+	}
+}
+
 .clockwise {
-	animation: rotate var(--duration__rotation) linear infinite;
+	animation: rotate var(--duration__rotation) linear infinite running;
 }
 
 .anti-clockwise {
-	animation: rotate var(--duration__rotation) reverse linear infinite;
+	animation: rotate var(--duration__rotation) reverse linear infinite running;
 }
 
 .pulse {
 	&::before {
-		animation: pulse var(--duration__pulse) alternate ease-in-out infinite;
+		animation: pulse var(--duration__pulse) alternate ease-in-out infinite running;
+	}
+
+	&:nth-child(2) {
+		&::before {
+			animation-delay: 2s;
+		}
+	}
+
+	&:nth-child(3) {
+		&::before {
+		animation-delay: 0.4s;
+		}
+	}
+
+	&:nth-child(4) {
+		&::before {
+		animation-delay: 1.5s;
+		}
+	}
+
+	&:nth-child(5) {
+		&::before {
+		animation-delay: 0.7s;
+		}
+	}
+
+	&:nth-child(6) {
+		&::before {
+		animation-delay: 0.2s;
+		}
+	}
+
+	&:nth-child(7) {
+		&::before {
+		animation-delay: 1.1s;
+		}
+	}
+
+	&:nth-child(8) {
+		&::before {
+		animation-delay: 0.4s;
+		}
 	}
 }
 
@@ -195,6 +250,6 @@ ul, li {
 		transform: scale(1);
 	}
 	to {
-		transform: scale(1.15);
+		transform: scale(1.1);
 	}
 }