html长图折叠迅速跳跃,HTML – 移动一张长长的照片,就像用css闪烁一样

您可以使用应用于简单CSS3背景动画的steps()函数

http://codepen.io/anon/pen/JoEoPL

HTML

Acquiring signal...

CSS

div {

background-repeat: no-repeat;

background-image: url(http://i.stack.imgur.com/CAIVQ.png);

width: 80px;

height: 80px;

overflow: hidden;

text-indent: 100%;

white-space: nowrap;

-webkit-animation: blinksignal 6s steps(6,end) infinite;

animation: blinksignal 6s steps(6,end) infinite;

}

@-webkit-keyframes blinksignal {

0% { background-position: 0 0 }

100% { background-position: 0 -480px }

}

@keyframes blinksignal {

0 { background-position: 0 0 }

100% { background-position: 0 -480px }

}

从MDN开始

The steps() functional notation defines a step function dividing the domain of output values in equidistant steps. This subclass of step functions are sometimes also called staircase functions.