html - 如何使用 CSS 过渡让 Div 平滑向上移动？

<分区>

标题有点描述它。这是代码:

#main {
    float: left;
    width: 20%;
    height: 10vh;
    margin-top: 10vh;
    margin-left: 40%;
    text-align: center;
}

#k {
    font-family: Questrial;
    font-size: 70px;
    margin-top: -7px;
    margin-left: -2px;
    color: #404040;
    border-bottom: 2px solid #404040;
    line-height: 0.85;
}

#about {
    float: left;
    clear: both;
    width: 38%;
    height: 30vh;
    margin-top: 7vh;
    margin-left: 31%;
    text-align: center;
    background-color: #33CC33;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    transition: margin-top .5s;
    -webkit-transition: margin-top .5s;
    transition: margin-bottom .5s;
    -webkit-transition: margin-bottom .5s;
}

#about:hover {
    opacity: 0.8;
    margin-top: 5vh;
    margin-bottom: 2vh;
}

#work {
    float: left;
    width: 38%;
    height: 30vh;
    margin-top: 0vh;
    margin-left: 10%;
    text-align: center;
    background-color: #323280;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
}

#work:hover {
    opacity: 0.8;
}

#contact {
    float: right;
    width: 38%;
    height: 30vh;
    margin-top: 0vh;
    margin-right: 10%;
    text-align: center;
    background-color: #FF6600;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
}

#contact:hover {
    opacity: 0.8;
}

.label {
	font-family: Questrial;
    color: white;
    font-size: 35px;
    margin-top: 80px;
}

<!DOCTYPE html>
<html>
    <head>
        <title>KURB - Home</title>
        <link rel="stylesheet" type="text/css" href="kurb.css"/>
        <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="main">
            <p id="k">KURB</p>
        </div>
        <div id="about">
            <p class="label">Blah blah blah</p>
        </div>
        <div id="work">
            <p class="label">Blah blah blah blah blah</p>
        </div>
        <div id="contact">
            <p class="label">Blah blah blah blah</p>
        </div>

        <script type="text/javascript">
        </script>
    </body>
</html>

基本上，我要做的是在鼠标悬停时让顶部的 div (#about) 比下面的两个高出大约 2 vh。如您所见，我已经有点明白了，但它并没有做真正的动画——它会立即升起。此外，鼠标悬停时应该有颜色过渡 - 它应该变得不那么透明。这对其他人有效，但对这个无效。

当您去掉 margin-top 和 margin-bottom 中的破折号时，它会变得非常有趣。然后，底部的两个不再慢慢向下移动，而是全部卡入到位。这就是我要找的，只有动画。我不知道发生了什么事。我在这里缺少什么吗？

最佳答案

如果你想应用多个 transition，你不能只写多个规则，因为在 CSS 中，最后一个规则将覆盖所有之前的规则。

将它们分别合并为一个规则:

transition: opacity .5s, margin-top .5s, margin-bottom .5s;
-webkit-transition: opacity .5s, margin-top .5s, margin-bottom .5s;

这是一个 MDN article about using multiple transitions .

关于html - 如何使用 CSS 过渡让 Div 平滑向上移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31529183/

上一篇：jQuery.html() : will it grab associated CSS information?

下一篇：javascript - Jquery 脚本在桌面上表现得很奇怪

相关文章：

html - 使用 HTML/CSS 在水平尺上放置复选框

css - 在 CSS 中对 RGB 颜色值使用十六进制而不是十进制有什么好的理由吗？

html - CSS 折叠纸类菜单问题

html - 工具提示 Bootstrap 不起作用

css - 合并 DIV 以便内容正确填充另一个 DIV

php - 确定更新时间

javascript - 我怎样才能控制鼠标滚动事件，然后在 html、body 上做一个动画？

html - div标签内无序列表的滚动条

html - 仅使用 CSS 在按钮列表中单击按钮显示

javascript - 绑定(bind)到特定的 CSS 转换