我一直在尝试制作一个简单的下拉动画。我希望它按下其他按钮并显示简单的文本。我让它工作了,但我想要一个 webkit tween 只是为了让它变得活泼一点,但我似乎无法让它工作。我不想使用绝对定位,因为我将其布置为轮廓。
这是 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>
这是重要的部分。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;}
}
我知道我错过了一些愚蠢的事情。任何帮助是极大的赞赏。