title: Need a second pair of eyes for a CSS3 animation
body: <p>I have been trying to make a simple drop down animation. I want it to push the other buttons down and display simple text. I got it to work, but I wanted a webkit tween just to jazz it up a bit and I can't seem to get it to work. I don't want to use absolute positioning because I am laying it out like an outline.</p>
  
  <p>Here's a sample of the HTML</p>
  
  <pre><code>&lt;div id="ngss-main" class="post"&gt;
              &lt;div class="infoblock"&gt;
                  &lt;a class="topic"&gt;Forces and Interactions
                      &lt;div class="inform"&gt;
                          &lt;h5&gt;What happens if you push or pull an object harder?&lt;/h5&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Pushes and pulls have different strengths and directions&lt;/li&gt;
                              &lt;li&gt;Pushes and pulls start, stop, change speed or direction of an object*&lt;/li&gt;
                          &lt;ul&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="infoblock"&gt;
                  &lt;a class="topic"&gt;Interdependent Relationships in Ecosystems
                      &lt;div class="inform"&gt;
                          &lt;h5&gt;Where do animals live and why do they live there?&lt;/h5&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Animals need food, plants need water and light to live and grow&lt;/li&gt;
                              &lt;li&gt;Living things need water, air, and resources from their environment&lt;/li&gt;
                              &lt;li&gt;Plants and animals can change their environment&lt;/li&gt;
                          &lt;ul&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here's the important part. The CSS</p>
  
  <pre><code>.inform {
  margin: 5px;
  display: none;
  color: black;
  font-family: 'Helvetica', sans-serif;
  border:10px solid rgb(114, 145, 63);
  background-color: rgb(247, 145, 60);
  position: relative;
  width: 500px;
  top: -200px;
  -webkit-animation: slide 0.5s linear;
  -moz-animation: slide 0.5s linear;
  -0-animation: slide 0.5s linear;
  animation: slide 0.5s linear;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  }
  
  .inform h5 {
  font-style: italic;
  font-style: bold;
  font-size: 18px;
  }
  
  .topic {
  font-family: 'Helvetica', sans-serif;
  font-style: bold;
  font-size: 24px;
  color: rgb(53, 78, 155);
  }
  
  .topic li{
  color: black;
  font-style: normal;
  font-size: 16px;
  }
  
  a:hover .inform  {
  display: block;
  -webkit-transition:all 1.0s ease-in-out;
  -moz-transition:all 1.0s ease-in-out;
  -o-transition:all 1.0s ease-in-out;
  transition:all 1.0s ease-in-out;
  }
  
  @-webkit-keyframes slide {
  0% {top, 0px;}
  100% {top, 200px;}
  }
  @-moz-keyframes slide {
  0% {top, 0px;}
  100% {top, 200px;}
  }
  @-o-keyframes slide {
  0% {top, 0px;}
  100% {top, 200px;}
  }
  @keyframes slide {
  0% {top, 0px;}
  100% {top, 200px;}
  }
  </code></pre>
  
  <p>I know it's something stupid that I'm missing. Any help is greatly appreciated.</p>