Iphone解锁屏幕文本css技巧

我有这段代码，可以像iPhone解锁屏幕一样对文本进行动画制作，但我无法让动画从上到下。有人能帮我吗？它在开始时也会停止一点，我不想这样，但是我的CSS很棘手

html { background: black; }
#scroll-text { width: 300px; }

h2 {

  background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d)); 
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 5s infinite;
  font-size: 15px;
  font-family: Arial;
  font-weight: 300;

  padding: 0;
  width: 200%;

  -webkit-text-size-adjust: none;
}
@-webkit-keyframes slidetounlock {
    0% {
        background-position: -300px 0;
    }
    100%{
        background-position: 300px 0;
    }
}

---

你可以在这里看到它的作用：

我做了一些小的编辑，我想这应该是你想要的：

html { background: black; }
#scroll-text { width: 300px; height:15px }

h2 {

  background: -webkit-gradient(linear,right top, right bottom,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d)); 
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 3s infinite;
  font-size: 15px;
  font-family: Arial;
  font-weight: 300;

  padding: 0;
  width: 200%;
  height: 200%;

  -webkit-text-size-adjust: none;
}
@-webkit-keyframes slidetounlock {
    0% {
        background-position: 0px -15px;
    }
    100%{
        background-position: 0px 15px;
    }
}