Iphone解鎖屏幕文本的CSS技巧

Question

我有這樣的代碼，動畫像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; 
    } 
} 

您可以在這裏的行動看出來：http://jsfiddle.net/efcojx28/

Answer 1

我做了一些小的修改，我想這應該是你在找什麼： https://jsfiddle.net/qebb07mc/2/

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