なぜ私のアニメーションはアクティブではありませんか？

Question

こんにちは私は背景を動かしたいが、アニメーションはアクティブではない。どうして ？そうでない場合は

@keyframes anima { 
    0% { 
     background-position-y: 0px; 
    } 100% { 
     background-position-y: -150px; 
    } 
} 

#bando { 
    border-radius: 4px; 
    background-image: url(neon.jpg); 
    background-size: 130%; 
    width: 600px; 
    padding-top:40px; 
    padding-bottom:40px; 
    margin-bottom: 10px; 
    font-size: 30px; 
    height:150px; 
    animation-name: anima; 
    animation-delay: 2s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
    animation-direction: alternate-reverse; 
} 

私を助けるために事前のおかげで4時間

がhttps://jsfiddle.net/526vttyg/

Answer 1

にあなたはanimation-durationが欠落している、とあなたはそれを指定する必要があり、これを試してくださいので、私はそれでブロックされていますので、アニメーションは何もしません。デフォルトanimation-durationは0

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration

#bando { 
 
    border-radius: 4px; 
 
    background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png); 
 
    background-size: 130%; 
 
    width: 600px; 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    margin-bottom: 10px; 
 
    font-size: 30px; 
 
    height: 150px; 
 
    animation-name: anima; 
 
    animation-duration: 2s; 
 
    animation-delay: 2s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    animation-direction: alternate-reverse; 
 
} 
 

 
@keyframes anima { 
 
    0% { 
 
    background-position-y: 0; 
 
    } 
 
    100% { 
 
    background-position-y: -150px; 
 
    } 
 
}

<div id="bando"></div>

です