CSS3动画过渡

Question

问题是我不知道如何禁用那种滚动效果以使每张图片占据整个盒子的空间。 要创建某种gif图像，请仅使用sprit-sheet和CSS。

 <title>Hey</title>
    <link rel="stylesheet" href="learn.css">
    <body>
      <div class="animation"></div>
    </body>

.animation {
  width: 128px;
  height: 128px;
  margin: 2% auto;
  background: url('http://s16.postimg.org/8f5770kpx/sprite.png') center;
  animatio-play-state: paused;
  animation: play 5s steps(10) infinite;
  transorm: translateZ(0);
}

@keyframes play {
    100% { background-position: 100px; }
}

Answer 1

这应该可以解决问题：

.animation {
  width: 128px;
  height: 128px;
  margin: 2% auto;
  background: url('http://s16.postimg.org/8f5770kpx/sprite.png');
  background-position:0px 0px;
  animation-play-state: paused;
  animation: play 5s steps(10) infinite;
  transorm: translateZ(0);
}

@keyframes play {
     from { background-position:0px 0px; }
  to   { background-position:1280px 0px; }
}

演示： http : //jsfiddle.net/Hyg3C/4421/

因此，从头到尾实际上是“步骤”，我们将背景位置移动10步。 如果从动画中删除步骤参数-可以得到很好的无限滚动，顺便说一句，但这提供了“类似gif的行为” ...

CSS3动画过渡

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-09-09 23:45:42

CSS3动画过渡

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-09-09 23:45:42

解决方案1
0 已采纳 2015-09-09 23:45:42