Marquee effect using css3

I am trying to get marquee effect using css3. Its working along X axis but i wanted it to work along Y axis ie Bottom to top. Here is my code

Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="marquee">
    <span>Hi I m ur marquee!!</span>
</h1>
</body>
</html>

Css

@keyframes marquee {
0%   { -webkit-transform: translate(0,0); }
100% { -webkit-transform:translate(-100%,0); }
}

@-webkit-keyframes marquee {
0%   { -webkit-transform: translate(0,0); }
100% { -webkit-transform:translate(-100%,0); }
}

.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
animation: marquee 17s linear infinite;
-webkit-animation: marquee 17s linear infinite;
  }

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

Solution

If I understood you correctly you need to change -webkit-transform:translate(x,y); y value for continuous effect I have changed 100% to 50% and set the height to 100%

html,
body,
h1 {
  height: 100%
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translate(0, 0%);
  }
  25% {
    -webkit-transform: translate(0, -30%);
  }
  26% {
    opacity:0;
    -webkit-transform: translate(0, 110%);
  }
  27% {
    opacity:1;
    -webkit-transform: translate(0, 110%);
  }
  100% {
    -webkit-transform: translate(0, 0%);
  }
  
}
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  -webkit-animation: marquee 5s linear infinite;
}
.marquee:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
`

<h1 class="marquee">
    <span>Hi I m ur marquee!!</span>
</h1>