html - 文字动画已停止工作-html不再找到我的CSS3

因此，我在尝试作为学生项目构建的WP主题上使用CSS3动画，半小时前它运行良好。我在底部的3个文本/图像框中添加了内容，并再次检查，现在它已停止工作！

我已经尝试修改了很长时间了，如果我弄坏了更多的东西，我实在太害怕了！

该网页为http://jacobstone.co.uk/leggera2/
JS小提琴在这里-http://jsfiddle.net/2hjz8/

所以我的HTML是

<div class="hero-unit">
<div id="logo-title">Leggera</div>
<div id="tagline">Responsive</div>
<div class="Iam">
<p>This is</p>
<b>
  <div class="innerIam">
    leggera
    a theme in progress<br />
    built on bootstrap<br />
    how I learn stuff<br />
    how we do it
  </div>
</b>
</div>

＆CSS是：

/* fancy scroll title */
div .Iam {
    position: relative;
    width: 625px;
    padding-left: 1%;
    padding-top: 1%;
    right: 45px;
    top: -80px;

}

.Iam {
  padding: 2em 5em;
  font: normal 40px/50px Montserrat, sans-serif;
  color: #999;
  text-shadow: 2px 2px 1px rgba(38, 38, 38, 1);
}
.Iam p {
  height: 50px;
  float: left;
  margin-right: 0.3em;
}
.Iam b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 50px;
}
.Iam .innerIam {
  display: inline-block;
  color: #e74c3c;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 0;
}

/*animation*/
-webkit-animation:move 5s;
   -moz-animation:move 5s;
    -ms-animation:move 5s;
     -o-animation:move 5s;
        animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
}
@keyframes move{
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}

@-webkit-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-moz-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-o-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}

在此先感谢您的时间！

最佳答案

问题似乎出在}中的left: 0;之后的右括号（.Iam .innerIam）。
如果删除它，动画将再次起作用。

Updated JSFiddle