0

我一直在尝试制作一个简单的下拉动画。我希望它按下其他按钮并显示简单的文本。我让它工作了，但我想要一个 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;}
}

我知道我错过了一些愚蠢的事情。任何帮助是极大的赞赏。

4

2 回答 2

0

您现在可能已经想通了，但是无论如何...您是否尝试过添加伪 :hover？如果没有，请执行此操作并设置高度值。现在，当您将鼠标悬停在上方时，容器会向下拉伸并显示任何其他内容。可能还需要玩溢出。

于 2013-08-18T23:42:24.440 回答
0

似乎您正在寻找更多的过渡，而不是动画：

.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;
}
于 2013-08-09T19:07:24.390 回答