Skip to content

Commit ff54101

Browse files
committed
Improve slider animation and performance
Refined the slideSteps keyframes for smoother transitions and added 'ease-in-out' timing to the animation. Included 'will-change: transform' for better animation performance.
1 parent 435d4f6 commit ff54101

1 file changed

Lines changed: 11 additions & 10 deletions

File tree

public/css/styles.css

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -753,7 +753,8 @@ a:focus {
753753
display: flex;
754754
width: calc(8 * 100vw);
755755
height: 100%;
756-
animation: slideSteps calc(var(--image-duration) * 8 * 1s) infinite;
756+
animation: slideSteps calc(var(--image-duration) * 8 * 1s) infinite ease-in-out;
757+
will-change: transform; /* Performance optimization for animation */
757758
}
758759

759760
.slider-image {
@@ -765,16 +766,16 @@ a:focus {
765766
filter: blur(1px);
766767
}
767768

768-
/* Step animation */
769+
/* Improved step animation with smoother transitions */
769770
@keyframes slideSteps {
770-
0%, 11% { transform: translateX(0); }
771-
12.5%, 23.5% { transform: translateX(-100vw); }
772-
25%, 36% { transform: translateX(-200vw); }
773-
37.5%, 48.5% { transform: translateX(-300vw); }
774-
50%, 61% { transform: translateX(-400vw); }
775-
62.5%, 73.5% { transform: translateX(-500vw); }
776-
75%, 86% { transform: translateX(-600vw); }
777-
87.5%, 98.5% { transform: translateX(-700vw); }
771+
0%, 10% { transform: translateX(0); }
772+
12.5%, 22.5% { transform: translateX(-100vw); }
773+
25%, 35% { transform: translateX(-200vw); }
774+
37.5%, 47.5% { transform: translateX(-300vw); }
775+
50%, 60% { transform: translateX(-400vw); }
776+
62.5%, 72.5% { transform: translateX(-500vw); }
777+
75%, 85% { transform: translateX(-600vw); }
778+
87.5%, 97.5% { transform: translateX(-700vw); }
778779
100% { transform: translateX(0); }
779780
}
780781

0 commit comments

Comments
 (0)