CSSマーキーがすべてのデータを表示していません

Question

私はシンプルなCSSマーキースクロールのデータを持っていますが、うまく機能しますが、約10行後にデータの表示が停止します。私がそれを大きくすれば、それは単にページの混乱を招くだけです。

コード：

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

CSS：それはすべてをロードだ

WestMidlands 
WestSussex 
WestYorkshire 
Wiltshire 

ちょうどそれを表示する停止：

.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; 

} 

areas.phpファイルがこの形式では約100行です。私は間違って何をしていますか？

Answer 1

アニメーションはtop: 100%;からtop: 0; transform: translateY(-100%)になります。

top: 100%は、マーキーの上部をその容器の底に置きます。

top: 0; transform: translateY(-100%);は、マーキーの底をその容器の上部に置きます。

.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>

あなたが行っている何