html - 关键帧功能无法正常工作

Question

我正在编写教程，但停在了这个简单的关键帧。我想移动图形，但整个图像都在移动:

HTML:

<div class= "figuren"></div>
 <div id="skrollr-body">
   <div id="background" class="hello">
     <div class="page page_falling falling_hello" data-mood="hello">
       <p> heyho im nicole bla</p>
     </div>
     <div class="page page_falling falling_hobbys" data-mood="hobbys">
       <p> heyho im nicole bla</p>
     </div>
     <div class="page page_falling falling_portfolio" data-mood="portfolio">
       <p> heyho im nicole bla</p>
     </div>
     <div class="page page_falling falling_contact" data-mood="contact">
       <p> heyho im nicole bla</p>
     </div>
   </div>
 </div>

CSS:

@keyframes freak-out {
  0% { background-position: 0 0;}
  100% { background-position: 0 200%;}
}


.hello .figuren {
  animation: freak-out 1.5s steps(2) infinite;
  background: url('hello.png') 0 0 no-repeat;
  background-size: 100% auto;
}

Answer 1

试试这个:

@keyframes freak-out {
  0% { background-position: 0 0;}
  25%{ background-position: 0 30%;}
  75%{ background-position: 0 70%;}
  100% { background-position: 0 100%;}
}


.hello  {
  animation: freak-out 1.5s infinite;
  -webkit-animation: freak-out 5s infinite;
  background: url('http://www.fotos-hochladen.net/uploads/hellobo9mwya340.png') 0 0 no-repeat;
  background-size: 100% auto;
}

jsfiddle 链接:https://jsfiddle.net/uqtqzt39/6/