scrolling the advertisements from bottom to top - html

Question

Need to scroll the text from bottom continuously same as notice board adds as of now it is scrolling from bottom to top but the text is combined .It should work same as how notice board list scroll from bottom.Their are so many notices so it should display one by one by scrolling .
.marquee {
height: 100px;
overflow: hidden;
position: relative;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 5s linear infinite;
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-up {
0% {
-moz-transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%);
}
}
#-webkit-keyframes scroll-up {
0% {
-webkit-transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
}
}
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%);
/* Browser bug fix */
-webkit-transform: translateY(100%);
/* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%);
/* Browser bug fix */
-webkit-transform: translateY(-100%);
/* Browser bug fix */
transform: translateY(-100%);
}
}
<div class=" marquee">
<p>Patient information management.</p>
<p>Doctor information management.</p>
<p>User management.</p>
<p>Pathology.</p>
<p>Ward management</p>
<p>Pharmacy</p>
</div>
Jsfiddle link added css here http://jsfiddle.net/f1on2ejp/3/

Answer 1

The p tag for each element is getting animated separately, just put them in a single p tag separated by </br>
.marquee {
height: 100px;
overflow: hidden;
position: relative;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
/* Starting position */
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 5s linear infinite;
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%);
/* Browser bug fix */
-webkit-transform: translateY(100%);
/* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%);
/* Browser bug fix */
-webkit-transform: translateY(-100%);
/* Browser bug fix */
transform: translateY(-100%);
}
}
<div class=" marquee">
<p>Patient information management.<br> Doctor information management.<br> User management.<br> Pathology.
<br> Ward management<br> Pharmacy
</p>
</div>