Continuous Scrolling Effect in CSS stopping on first line - html

Question

I'm trying to create a continuous vertical scroller effect, however having a couple of issues;
The first line appears, without stopping, like the rest of the
line
I can't seem to fade-in or fade-out
For the first point, I've tried adjusting the keyframe at 0%, too many different options and div heights, but haven't got anywhere.
On the second point, i've tried adding from: {opacity: 0.5} and to: {opacity: 0.5}, again to no success.
How do I stop the scrolling effect at the first line, like what happens with the subsequent line and add a fade-in fade-out effect?
JSFiddle: https://jsfiddle.net/ekzvLhmx/
CSS
.tagTextContainer {
text-align: left;
display: inline-flex;
width: 100%;
margin: 5px;
border-bottom: 1px solid #dcdfe5;
}
.tagText {
text-align: left;
color: black;
font-size: 13px;
}
.scrollCont {
font: normal 40px/50px monospace;
float: left;
overflow: hidden;
position: relative;
height: 18px;
top: 0px;
}
.scrollCont .scrollOptions {
font-size: 13px;
display: inline-block;
color: black;
position: relative;
top: 0;
left: 0;
/*animation*/
animation: scroll 10s;
/*animation-iteration-count*/
animation-iteration-count: infinite;
/*animation-delay*/
animation-delay: 1.5s;
}
#keyframes scroll {
0% {
top: 0px;
}
20% {
top: -66px;
}
40% {
top: -116px;
}
60% {
top: -166px;
}
80% {
top: -216px;
}
}
HTML
<div class="tagTextContainer">
<span class="tagText">
Options:
</span>
<div class="scrollCont">
<div class="scrollOptions">
SJDIUNE92323232<br />
FHD_231232_FSD<br />
RUG_12£321231$3<br />
LA21312321_TQ<br />
2132131/232 123
</div>
</div>
</div>

Answer 1

The problem is the first item is a little below what you expect.
I modified your version a little here
<div class="tagTextContainer">
<span class="tagText">
Options:
</span>
<div class="scrollCont">
<div class="scrollOptions">
SJDIUNE92323232<br />
FHD_231232_FSD<br />
RUG_12£321231$3<br />
LA21312321_TQ<br />
2132131/232 123
</div>
</div>
</div>
.tagTextContainer {
text-align: left;
display: inline-flex;
width: 100%;
margin: 5px;
border-bottom: 1px solid #dcdfe5;
}
.tagText {
text-align: left;
color: black;
font-size: 13px;
}
.scrollCont {
font: normal 40px/50px monospace;
float: left;
overflow: hidden;
position: relative;
height: 18px;
top: 0px;
}
.scrollCont .scrollOptions {
font-size: 13px;
display: inline-block;
color: black;
position: relative;
top: 0;
left: 0;
/*animation*/
animation: scroll 10s;
/*animation-iteration-count*/
animation-iteration-count: infinite;
/*animation-delay*/
animation-delay: 1.5s;
}
#keyframes scroll {
16% {
top: -15px;
}
32% {
top: -66px;
}
48% {
top: -116px;
}
64% {
top: -166px;
}
80% {
top: -216px;
}
}