CODEWITHSUNDEEP
htmlcsshtml-tablecss-animations
B0B0
B0B0

Reputation: 13

Moving A Table CSS: Animated

I have a table that I want to move down to the top of the screen from offscreen, but the keyframes don't seem to be working and I can't figure out what is wrong. Here is the code:

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>

Upvotes: 0

Views: 2292

Answers (1)

coma
coma

Reputation: 16649

Change the position from static to absolute/relative/fixed:

.Table1
{
  position: absolute;
  ...
}

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

Upvotes: 1

Related Questions