CSS动画延迟会停止淡入淡出

Question

我试图在页面加载时动画一些SVG图像并找到一个构建示例。该示例在对象中淡入淡出，同时向左移动。通过复制示例很容易设置。

接下来我想添加延迟，以便图像一个接一个地淡入淡出。但延迟导致在动画开始之前看到对象的问题。我找到了另一个添加了animation-fill-mode:forwards;和opacity: 0;的代码段，这解决了问题但创建了另一个问题。现在这些图像已经消失，但没有移动。

我该如何解决这个问题？

淡入淡出的动作设置如下：

@keyframes fadeIn {
  from {
    opacity: 0;
    left: 3em;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

下面的完整代码。当我在stackoverflow上运行此代码片段时，它正在工作。但是当我将它保存到HTML文件并在浏览器中打开它时，没有动作。有什么想法吗？

＆＃13;

＆＃13;

div[class^=item] {
  border: none;
  background-color: black;
  float: left;
  height: 80px;
  margin: 1px;
  padding: 0;
  position: relative;
  width: 52px;
}
.item {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    left: 3em;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    left: 3em;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
.item2 {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-delay: 2.5s;
  -webkit-animation-fill-mode: forwards;
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    left: 3em;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    left: 3em;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

＆＃13;

<div class="item">
  <img src="https://dl.dropboxusercontent.com/u/231879/G.svg" alt="" />
</div>
<div class="item2">
  <img src="https://dl.dropboxusercontent.com/u/231879/A.svg" alt="" />
</div>

＆＃13;

＆＃13;

＆＃13;