Need a second pair of eyes for a CSS3 animation -

i have been trying make simple drop down animation. want push other buttons down , display simple text. got work, wanted webkit tween jazz bit , can't seem work. don't want use absolute positioning because laying out outline.

here's sample of html

<div id="ngss-main" class="post">             <div class="infoblock">                 <a class="topic">forces , interactions                     <div class="inform">                         <h5>what happens if push or pull object harder?</h5>                         <ul>                             <li>pushes , pulls have different strengths , directions</li>                             <li>pushes , pulls start, stop, change speed or direction of object*</li>                         <ul>                     </div>                 </a>             </div>             <br>             <div class="infoblock">                 <a class="topic">interdependent relationships in ecosystems                     <div class="inform">                         <h5>where animals live , why live there?</h5>                         <ul>                             <li>animals need food, plants need water , light live , grow</li>                             <li>living things need water, air, , resources environment</li>                             <li>plants , animals can change environment</li>                         <ul>                     </div>                 </a>             </div>         </div> 

here's important part. css

.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;} } 

i know it's stupid i'm missing. appreciated.

seems you're looking more transitions, not animations:

.inform {     margin: 5px;     color: black;     font-family:'helvetica', sans-serif;     border:10px solid rgb(114, 145, 63);     background-color: rgb(247, 145, 60);     position: absolute;     width: 500px;     top: -200px;     transition: 1s ease-in-out;     -o-transition: 1s ease-in-out;     -ms-transition: 1s ease-in-out;     -moz-transition: 1s ease-in-out;     -ktml-transition: 1s ease-in-out;     -webkit-transition: 1s ease-in-out; } .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 {     top: 200px;     -webkit-transition:all 1.0s ease-in-out;     -khtml-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; }