Question

我一直试图制作一个简单的下拉动画。我想让它按下其他按钮并显示简单的文字。我得到了它的工作，但我想要一个webkit补间，只是为了爵士乐，我似乎无法让它工作。我不想使用绝对定位，因为我将它像一个轮廓一样铺设。

以下是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;}
}

我知道我错过了一些愚蠢的事。非常感谢任何帮助。

Answer 1

好像你正在寻找过渡，而不是动画：

.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

你现在可能已经弄明白了，但无论如何......你有没有试过添加一个伪：悬停？如果没有，请执行此操作并设置高度值。现在，当你将鼠标悬停在上面时，容器会向下拉伸并显示任何其他内容。也可能需要玩溢出。

需要第二副眼睛才能获得CSS3动画

2 个答案: