Need a second pair of eyes for a CSS3 animation - css

Question

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.
Here's a sample of the HTML
<div id="ngss-main" class="post">
<div class="infoblock">
<a class="topic">Forces and Interactions
<div class="inform">
<h5>What happens if you push or pull an object harder?</h5>
<ul>
<li>Pushes and pulls have different strengths and directions</li>
<li>Pushes and pulls start, stop, change speed or direction of an object*</li>
<ul>
</div>
</a>
</div>
<br>
<div class="infoblock">
<a class="topic">Interdependent Relationships in Ecosystems
<div class="inform">
<h5>Where do animals live and why do they live there?</h5>
<ul>
<li>Animals need food, plants need water and light to live and grow</li>
<li>Living things need water, air, and resources from their environment</li>
<li>Plants and animals can change their environment</li>
<ul>
</div>
</a>
</div>
</div>
Here's the important part. The 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 something stupid that I'm missing. Any help is greatly appreciated.

Answer 1

Seems like you're looking more for 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: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ktml-transition: all 1s ease-in-out;
-webkit-transition: all 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;
}

Answer 2

You may have figured it out by now, but anyway... Have you tried adding a pseudo :hover? If not, do so and set a value for height. Now, when you hover over, the container gets stretched down and reveals any additional stuff. May also require playing around with overflow.