CSS-Laufschrift zeigt nicht alle Daten

Question

Ich habe eine einfache CSS-Laufschrift Daten scrollen, die gut funktioniert, aber es stoppt die Anzeige der Daten nach etwa 10 Zeilen. Wenn ich es größer mache, macht es nur ein Durcheinander der Seite.

Code:

<div class="col-sm-2"> 
    <h3>AREAS COVERED</h3><h5><div class="microsoft areas"> 
    <p class="marquee"><? echo $areas ?></p> 
</div> 

CSS:

.areas { 
    width: 100px; 
    height: 140px; 
    margin: 1em auto; 
    overflow: hidden; 
    background: white; 
    position: relative; 
    box-sizing: border-box; 
} 

.marquee { 
    top: 0px; 
    position: relative; 
    box-sizing: border-box; 
    animation: marquee 15s linear infinite; 
} 

.marquee:hover { 
    animation-play-state: paused; 
} 

/* Make it move! */ 
@keyframes marquee { 
    0% { top: 8em } 
    100% { top: -11em } 
} 

/* Make it look pretty */ 
.microsoft .marquee { 
    margin: 0; 
    padding: 0 1em; 
    line-height: 1.5em; 
    font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif; 
} 

.microsoft:before, .microsoft::before, 
.microsoft:after, .microsoft::after { 
    left: 0; 
    z-index: 1; 
    content: ''; 
    position: absolute; 
    pointer-events: none; 
    width: 100%; height: 2em; 
    background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0)); 
} 

.microsoft:after, .microsoft::after { 
    bottom: 0; 
    transform: rotate(180deg); 
} 

.microsoft:before, .microsoft::before { 
    top: 0; 

} 

Die areas.php Datei ist etwa 100 Zeilen in diesem Format:

WestMidlands 
WestSussex 
WestYorkshire 
Wiltshire 

es alles geladen ist es ja gerade stoppen anzeigt. Was mache ich falsch?

Answer 1

Ihre Animation sollte von top: 100%; bis top: 0; transform: translateY(-100%) gehen.

top: 100% wird die Oberseite des Laufrahmens auf den Boden des Behälters legen.

top: 0; transform: translateY(-100%); wird die Unterseite der Laufschrift an der Spitze des Behälters.

.areas { 
 
    width: 100px; 
 
    height: 140px; 
 
    margin: 1em auto; 
 
    overflow: hidden; 
 
    background: white; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
.marquee { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    animation: marquee 15s linear infinite; 
 
} 
 

 
.marquee:hover { 
 
    animation-play-state: paused; 
 
} 
 

 

 
/* Make it move! */ 
 

 
@keyframes marquee { 
 
    0% { 
 
    top: 100%; 
 
    } 
 
    100% { 
 
    top: 0; 
 
    transform: translateY(-100%); 
 
    } 
 
} 
 

 

 
/* Make it look pretty */ 
 

 
.microsoft .marquee { 
 
    margin: 0; 
 
    padding: 0 1em; 
 
    line-height: 1.5em; 
 
    font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif; 
 
} 
 

 
.microsoft:before, 
 
.microsoft::before, 
 
.microsoft:after, 
 
.microsoft::after { 
 
    left: 0; 
 
    z-index: 1; 
 
    content: ''; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    width: 100%; 
 
    height: 2em; 
 
    background-image: linear-gradient(180deg, #FFF, rgba(255, 255, 255, 0)); 
 
} 
 

 
.microsoft:after, 
 
.microsoft::after { 
 
    bottom: 0; 
 
    transform: rotate(180deg); 
 
} 
 

 
.microsoft:before, 
 
.microsoft::before { 
 
    top: 0; 
 
}

<div class="col-sm-2"> 
 
    <h3>AREAS COVERED</h3> 
 
    <div class="microsoft areas"> 
 
    <p class="marquee"> 
 
     WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire 
 
    </p> 
 
    </div>