Как использовать несколько анимаций ключевых кадров в одном?

Я хочу использовать две различные анимации ключевых кадров, но когда я называю вторую анимацию, она не работает. В принципе, я хочу добавить первую анимацию к первой обертке, а вторую анимацию ко второй обертке в то же время, почему это не работает?Как использовать несколько анимаций ключевых кадров в одном?

@keyframes scroll { 
 
    0% { 
 
    -webkit-transform: translate(-30%, 0); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate(-100%, 0); 
 
    } 
 
} 
 
@keyframes second { 
 
    0% { 
 
    -webkit-transform: translate(0, 0); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate(-200%, 0); 
 
    } 
 
} 
 
.marquee { 
 
    display: block; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
.wrapper { 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    padding-left: 100%; 
 
    animation: scroll 20s infinite linear; 
 
} 
 
.wrapper div { 
 
    background-color: whitesmoke; 
 
    display: inline-block; 
 
    margin-right: 10rem; 
 
} 
 
.wrapper div:last-child { 
 
    margin-right: 0px; 
 
} 
 
.wrapper2 { 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    padding-left: 100%; 
 
    animation: second 40s infinite linear; 
 
} 
 
.wrapper2 div { 
 
    background-color: whitesmoke; 
 
    display: inline-block; 
 
    margin-right: 10rem; 
 
} 
 
.wrapper2 div:last-child { 
 
    margin-right: 0px; 
 
}

<div class="marquee"> 
 
    <div class="wrapper"> 
 
    <div>Akinfenwa</div> 
 
    <div>Dickenson</div> 
 
    <div>Watkins</div> 
 
    <div>Cowan-Hall</div> 
 
    </div> 
 
    <div class="wrapper2"> 
 
    <div>Akinfenwa</div> 
 
    <div>Dickenson</div> 
 
    <div>Watkins</div> 
 
    <div>Cowan-Hall</div> 
 
    </div> 
 
</div>

источник

2017-01-07 Diego Cervantes

Это хорошо известно, что все браузеры основаны на WebKit. Нет никакой проблемы при префиксах всех свойств с помощью '-webkit-'. Фактически, вы также должны использовать '-webkit-display: -webkit-block' и на всякий случай' -webkit-webkit-display: -webkit-webkit-block'. – Oriol

@Oriol у вас отсутствует дисплей: -webkit-block; и -webkit-display: block; - на всякий случай – vals

@keyframes scroll { 
 
    0% { 
 
    -webkit-transform: translate(-30%, 0); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate(-100%, 0); 
 
    } 
 
} 
 
@keyframes second { 
 
    0% { 
 
    -webkit-transform: translate(0, 0); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate(-200%, 0); 
 
    } 
 
} 
 
.marquee { 
 
    display: block; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
.wrapper { 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    padding-left: 100%; 
 
    animation: scroll 10s infinite linear; 
 
} 
 
.wrapper div { 
 
    background-color: whitesmoke; 
 
    display: inline-block; 
 
    margin-right: 10rem; 
 
} 
 
.wrapper div:last-child { 
 
    margin-right: 0px; 
 
} 
 
.wrapper2 { 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    padding-left: 100%; 
 
    animation: second 20s infinite linear; 
 
} 
 
.wrapper2 div { 
 
    background-color: whitesmoke; 
 
    display: inline-block; 
 
    margin-right: 10rem; 
 
} 
 
.wrapper2 div:last-child { 
 
    margin-right: 0px; 
 
}

<div class="marquee"> 
 
    <div class="wrapper"> 
 
    <div>Akinfenwa</div> 
 
    <div>Dickenson</div> 
 
    <div>Watkins</div> 
 
    <div>Cowan-Hall</div> 
 
    </div> 
 
    <div class="wrapper2"> 
 
    <div>Akinfenwa2</div> 
 
    <div>Dickenson2</div> 
 
    <div>Watkins2</div> 
 
    <div>Cowan-Hall2</div> 
 
    </div> 
 
</div>

источник

2017-01-07 22:12:00 Banzay

Как использовать несколько анимаций ключевых кадров в одном?

ответ

Смежные вопросы