Question

我是CSS3动画的新手，我正在尝试使用DOM和CSS关键帧中的164个图像创建一个带图像序列的简单动画，以按顺序显示每个动画。

一切都运行良好，但动画没有完全运行，只显示前60个图像，持续时间为2秒。

事实上，如果我在动画对象中增加高度，我可以在下方看到运行动画的其他图像，就好像它将动画分成3个部分的60个图像中的每一个。

这是我正在使用的代码。

有可能HTML5只能使用60张图片而且只显示2秒吗？

我很感激你的帮助。

index.html文件：

html{
  background: #ffd25c;
}

.animation-object {
  width: 640px;
  height: 960px;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

img {
  width: auto;
  height: auto;
  display: inline-block;
  position: relative;
}

.animation-object__strip:nth-of-type(1){
  width: 34040px;
  display: block;
  font-size: 0;
  overflow: hidden;
  position: relative;
  animation-timing-function: step-start;
  -webkit-animation: intro 2s steps(30) infinite;
  animation: intro 2s steps(30) infinite; 
}

@-webkit-keyframes intro {
  from { -webkit-transform:  translateX(0px); }
  to { -webkit-transform:  translateX(-19200px); }
}

CSS文件：

if (i >= size - 1 && go == false)

CSS3动画不会拍摄所有图像

0 个答案: