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/

移动表CSS：动画

1 个答案: