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);
}
}