pause on hover

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--green pulse"><div class="orbital-content"></div></li>
-			  <li class="orbital bg bg--blue"><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"><div class="orbital-content content-center anti-clockwise"><p>How's things?</p></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"><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"><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"><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"><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">

style.css

@@ -1,9 +1,12 @@
 :root {
-	--width__inner-content: 10em;
+	--width__inner-content: 11em;
-	--width__orbital: 7em;
+	--width__orbital: 7.5em;
 
 	--radius__orbital: 14em;
 	--radius__orbital--diagonal: calc(var(--radius__orbital) / 1.4142);
+
+	--duration__rotation: 50s;
+	--duration__pulse: 1.5s;
 }
 
 body, html {
@@ -98,7 +101,8 @@ ul, li {
 	top: 50%;
 	transform: translate(-50%, -50%);
 
-	opacity: 0.3;
+	border-radius: 3em;
+	overflow: hidden;
 }
 
 .image-hover {
@@ -163,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 20s linear infinite;
+	animation: rotate var(--duration__rotation) linear infinite running;
 }
 
 .anti-clockwise {
-	animation: rotate 20s reverse linear infinite;
+	animation: rotate var(--duration__rotation) reverse linear infinite running;
 }
 
 .pulse {
 	&::before {
-		animation: pulse 2s 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;
+		}
 	}
 }
 
@@ -191,6 +250,6 @@ ul, li {
 		transform: scale(1);
 	}
 	to {
-		transform: scale(1.2);
+		transform: scale(1.1);
 	}
 }