Html и css. Программирование. Верстка на таплинк

Question

Html и css. Программирование. Верстка на таплинк

Кирилл Ищейкин Ученик (182), на голосовании 4 месяца назад

Помогите пожалуйста, никак не получается поменять направление анимации, нужно сделать, чтобы логотип двигался не с правой стороны на левую, а с левой стороны на правую сторону. Вот код на scc:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #f2f2f2;
}

@keyframes slide {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}

.logos {
overflow: hidden;
padding: 5px 0;
background: #f2f1ed;
white-space: nowrap;
position: relative;
}

.logos:after {
position: relative;
top: 0;
width: 250px;
height: 100%;
content: "";
z-index: 2;
}

.logos-slide {
display: inline-block;
animation: 15s slide infinite linear;
}

.logos-slide img {
height: 50px;
margin: 0 1px;
}
надеюсь на помощь

Answer 1

AaacoB Aaac Мудрец (14181) 5 месяцев назад

ну так меняй проценты трансляции

⚠Оракул (50099) 5 месяцев назад

 глянуть
бы
рабочий вид
той проблемы

⚠Оракул (50099) 5 месяцев назад

Answer 2

Чтобы изменить направление анимации логотипа с левой стороны на правую, нужно поменять значения свойств from и to в анимации @keyframes slide. В вашем случае, изменение значений translateX на отрицательные значения поможет достигнуть желаемого эффекта.

 * {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
 
body {  
    background: #f2f2f2;  
}  
 
@keyframes slide {  
    from {  
        transform: translateX(-100%);  
    }  
    to {  
        transform: translateX(0%);  
    }  
}  
 
.logos {  
    overflow: hidden;  
    padding: 5px 0;  
    background: #f2f1ed;  
    white-space: nowrap;  
    position: relative;  
}  
 
.logos:after {  
    position: relative;  
    top: 0;  
    width: 250px;  
    height: 100%;  
    content: "";  
    z-index: 2;  
}  
 
.logos-slide {  
    display: inline-block;  
    animation: 15s slide infinite linear;  
}  
 
.logos-slide img {  
    height: 50px;  
    margin: 0 1px;  
}