0
Ich möchte zwei verschiedene Keyframes Animationen verwenden, aber wenn ich die zweite Animation benenne, scheint es nicht zu funktionieren. Grundsätzlich möchte ich die erste Animation zum ersten Wrapper und die zweite Animation zum zweiten Wrapper zur gleichen Zeit hinzufügen, warum das nicht funktioniert?Wie verwenden Sie mehrere Keyframe-Animationen in einem?
@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>
Es ist gut von allen Browsern bekannt sind, auf WebKit basiert. Es ist absolut kein Problem, alle Eigenschaften mit '-webkit-'voranzutreiben. In der Tat sollten Sie auch '-webkit-display: -webkit-block' verwenden und für den Fall '-webkit-webkit-display: -webkit-webkit-block'. – Oriol
@Oriol Sie fehlen Anzeige: -Webkit-Block; und -webkit-display: block; - nur für den Fall – vals