Как сделать CSS Infinite Logo Slider Animation гладкой без прыжков?CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как сделать CSS Infinite Logo Slider Animation гладкой без прыжков?

Сообщение Anonymous »

Я создаю горизонтальный ползунок логотипа с несколькими треками. МОЙ ЦЕЛЬ: < /p>
ровные треки должны анимировать логотипы справа. Изменения). < /p>
Анимация должна работать гладко, без каких-либо прыжков, сбоя или отставания при повторении. они с Nth-Child (даже) и NTH-Child (ODD). Но анимация кажется непоследовательной-иногда она прыгает при перезапуске или не применяется к новым детям. анимации. < /p>
Я несколько выяснил, что нужно сделать для горизонтальной анимации, < /p>
Но у меня все еще возникают проблемы с тем, что анимация непрерывно без каких-либо прыжков. class = "Snippet-Code-Html Lang-Html PrettyPrint-Override">

Код: Выделить всё

    





Document


.logo-slider {
width: 100%;
display: flex;
flex-direction: column;
gap: 34px;
overflow: hidden;
}

.logo-slider__track {
width: 100%;
height: 150px;
border-radius: 20px;
display: flex;
background-color: hsl(215, 50%, 20%);
box-shadow:
inset 0 15px 15px -12px hsl(215, 50%, 5%),
inset 0 -15px 15px -12px hsl(215, 50%, 5%);
transition: all 0.4s linear;
overflow: hidden;
position: relative;
}

.logo-slider__track:hover {
box-shadow:
inset 0 15px 10px -12px hsl(198, 100%, 55%),
inset 0 -15px 10px -12px hsl(198, 100%, 55%);
}

.container-slider__list {
display: flex;
animation: scroll 30s linear infinite;
}

.container-slider__list:hover {
animation-play-state: paused;
}

.logo-slider__list {
display: flex;
align-items: center;
}

.logo-slider__list * {
width: auto;
height: 80px;
margin: 0 50px;
}

@keyframes scroll {
0% {
transform: translateX(0);
}

100% {
transform: translateX(-50%);
}
}

.logo-slider:nth-child(even) .logo-slider__track .container-slider__list {
animation-direction:  r e v e r s e ; < b r   / >                 } < b r   / >         & l t ; / s t y l e & g t ; < b r   / > & l t ; / h e a d & g t ; < b r   / > < b r   / > & l t ; b o d y & g t ; < b r   / >         & l t ; d i v   c l a s s = " l o g o - s l i d e r " & g t ; < b r   / >                 & l t ; d i v   c l a s s = " l o g o - s l i d e r _ _ t r a c k " & g t ; < b r   / >                         & l t ; d i v   c l a s s = " c o n t a i n e r - s l i d e r _ _ l i s t " & g t ; < b r   / >                                 & l t ; d i v   c l a s s = " l o g o - s l i d e r _ _ l i s t " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 0 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 4 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 5 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 6 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 7 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 8 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 9 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 0 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 1 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 2 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 3 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 4 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 5 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 6 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 7 " & g t ; < b r   / >                                 & l t ; / d i v & g t ; < b r   / > < b r   / >                                 & l t ; d i v   c l a s s = " l o g o - s l i d e r _ _ l i s t " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 0 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 4 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 5 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 6 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 7 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 8 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 9 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 0 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 1 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 2 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 3 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 4 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 5 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 6 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 7 " & g t ; < b r   / >                                 & l t ; / d i v & g t ; < b r   / >                         & l t ; / d i v & g t ; < b r   / >                 & l t ; / d i v & g t ; < b r   / > < b r   / >                 & l t ; d i v   c l a s s = " l o g o - s l i d e r _ _ t r a c k " & g t ; < b r   / >                         & l t ; d i v   c l a s s = " c o n t a i n e r - s l i d e r _ _ l i s t " & g t ; < b r   / >                                 & l t ; d i v   c l a s s = " l o g o - s l i d e r _ _ l i s t " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 8 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 9 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 0 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 1 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 2 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 3 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 4 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 5 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 6 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 7 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 8 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 9 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 0 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 1 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 2 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 3 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 4 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 3 5 " & g t ; < b r   / >                                 & l t ; / d i v & g t ; < b r   / > < b r   / >                                 & l t ; d i v   c l a s s = " l o g o - s l i d e r _ _ l i s t " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 8 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 1 9 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 0 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 1 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 2 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 3 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 4 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 5 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 6 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ l o g o "   s r c = " h t t p s : / / i . p r a v a t a r . c c / 1 5 0 ? i m g = 2 7 " & g t ; < b r   / >                                         & l t ; i m g   c l a s s = " l o g o - s l i d e r _ _ logo" src="https://i.pravatar.cc/150?img=28">
[img]https://i.pravatar.cc/150?img=29[/img]
[img]https://i.pravatar.cc/150?img=30[/img]
[img]https://i.pravatar.cc/150?img=31[/img]
[img]https://i.pravatar.cc/150?img=32[/img]
[img]https://i.pravatar.cc/150?img=33[/img]
[img]https://i.pravatar.cc/150?img=34[/img]
[img]https://i.pravatar.cc/150?img=35[/img]






[img]https://i.pravatar.cc/150?img=36[/img]
[img]https://i.pravatar.cc/150?img=37[/img]
[img]https://i.pravatar.cc/150?img=38[/img]
[img]https://i.pravatar.cc/150?img=39[/img]
[img]https://i.pravatar.cc/150?img=40[/img]
[img]https://i.pravatar.cc/150?img=41[/img]
[img]https://i.pravatar.cc/150?img=42[/img]
[img]https://i.pravatar.cc/150?img=43[/img]
[img]https://i.pravatar.cc/150?img=44[/img]
[img]https://i.pravatar.cc/150?img=45[/img]
[img]https://i.pravatar.cc/150?img=46[/img]
[img]https://i.pravatar.cc/150?img=47[/img]
[img]https://i.pravatar.cc/150?img=48[/img]
[img]https://i.pravatar.cc/150?img=49[/img]
[img]https://i.pravatar.cc/150?img=50[/img]
[img]https://i.pravatar.cc/150?img=51[/img]
[img]https://i.pravatar.cc/150?img=52[/img]
[img]https://i.pravatar.cc/150?img=53[/img]

[img]https://i.pravatar.cc/150?img=36[/img]
[img]https://i.pravatar.cc/150?img=37[/img]
[img]https://i.pravatar.cc/150?img=38[/img]
[img]https://i.pravatar.cc/150?img=39[/img]
[img]https://i.pravatar.cc/150?img=40[/img]
[img]https://i.pravatar.cc/150?img=41[/img]
[img]https://i.pravatar.cc/150?img=42[/img]
[img]https://i.pravatar.cc/150?img=43[/img]
[img]https://i.pravatar.cc/150?img=44[/img]
[img]https://i.pravatar.cc/150?img=45[/img]
[img]https://i.pravatar.cc/150?img=46[/img]
[img]https://i.pravatar.cc/150?img=47[/img]
[img]https://i.pravatar.cc/150?img=48[/img]
[img]https://i.pravatar.cc/150?img=49[/img]
[img]https://i.pravatar.cc/150?img=50[/img]
[img]https://i.pravatar.cc/150?img=51[/img]
[img]https://i.pravatar.cc/150?img=52[/img]
[img]https://i.pravatar.cc/150?img=53[/img]









Подробнее здесь: https://stackoverflow.com/questions/797 ... ut-jumping
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Как сделать CSS Infinite Logo Slider Animation гладкой без прыжков?
    Anonymous » » в форуме Html
    0 Ответы
    5 Просмотры
    Последнее сообщение Anonymous
  • Как сделать CSS Infinite Logo Slider Animation гладкой без прыжков?
    Anonymous » » в форуме CSS
    0 Ответы
    1 Просмотры
    Последнее сообщение Anonymous
  • Как сделать CSS Infinite Logo Slider Animation гладкой без прыжков?
    Anonymous » » в форуме Html
    0 Ответы
    17 Просмотры
    Последнее сообщение Anonymous
  • CSS Animation-Iteration-Count портит режим Animation-fill-mode [закрыто]
    Anonymous » » в форуме CSS
    0 Ответы
    75 Просмотры
    Последнее сообщение Anonymous
  • Swiftui: MatchEdgeMetryEffect и Animation Animation Clipshape
    Anonymous » » в форуме IOS
    0 Ответы
    10 Просмотры
    Последнее сообщение Anonymous

Вернуться в «CSS»