我正在编写一个教程,并停在这个简单的关键帧上。我想移动图形,但整个图像移动:
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;
}
答案 0 :(得分:0)
试试这个:
@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/