html - 移动表格 CSS : Animated

Question

我有一个表格，我想从屏幕外向下移动到屏幕顶部，但关键帧似乎不起作用，我无法弄清楚哪里出了问题。这是代码:

CSS:

<style>
.Table1
{
  top: 5px;
  -webkit-animation:SlideDown 3s;
  animation:SlideDown 3s;
}
@-webkit-keyframes SlideDown {
  from {top:-200px;}
  to {top:5px;}
}
@-moz-keyframes SlideDown {
  from {top:-200px;}
  to {top:5px;}
}
@-o-keyframes SlideDown {
  from {top:-200px;}
  to {top:5px;}
}
@keyframes SlideDown {
  from {top:-200px;}
  to {top:5px;}
}
</style>

HTML:

<table border="0" cellpadding="0" cellspacing="0" class="Table1" bgcolor="#000000" height="50px" width="100%">
  <tr>
  <td align="center" valign="center">
  <a href="blah.blah" style="font-size:3em" class="Transition1">&nbsp;text&nbsp;</a>
  <a href="http://blah.blah" class="Transition1" style="font-size:3em">&nbsp;text&nbsp;</a>
  <a href="http://blah.blah" style="font-size:3em" class="InThatCategory">&nbsp;text&nbsp;</a>
  <a href="http://blah.blah" style="font-size:3em" class="Transition1">&nbsp;text&nbsp;</a>
  </td>
  </tr>
</table>

Answer 1

将位置从静态更改为绝对/相对/固定:

.Table1
{
  position: absolute;
  ...
}

http://jsfiddle.net/coma/2rPFs/