How to Get A Div to Smoothly Move Up Using CSS Transitions?

Question

The title kind of describes it. Here's the code:

#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>

Basically, what I'm trying to do is get the top div (#about) to rise up above the lower two by about 2 vh when moused over. As you can see, I've already kind of got it, but it's not doing an actual animation - it rises up instantly. Also, there should be a color transition on the mouseover - it should become less transparent. This works on the others, but not on this one.

It gets really interesting when you get rid of the dashes in margin-top and margin-bottom. Then, instead of the bottom two slowly moving down, they all just kind of snap into place. This is what I'm looking for, only with an animation. I have no idea what's going on. Is there something I'm missing here?

I think, your transitions have to be in _a single_ rule: `transition: opacity .5s, margin-top .5s, margin-bottom .5s;`. Instead you’re overwriting the previous rules with only the last one. Try merging them. — Sebastian Simon, Jul 21 '15 at 02:11

score 2 · Answer 1 · answered Jul 21 '15 at 02:15

If you want to apply multiple transitions, you can’t just write multiple rules, as in CSS the last rule will override all the previous ones.

Merge them into one rule each:

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

Here’s an MDN article about using multiple transitions.

score 0 · Answer 2 · answered Jul 21 '15 at 02:14

0

Did you mean something like this? Fiddle: https://jsfiddle.net/99464tyx/2/

If so just replace all transitions with transition: all .5s;

answered Jul 21 '15 at 02:14

gopalraju

2,299
1
12
15

How to Get A Div to Smoothly Move Up Using CSS Transitions?

2 Answers2