Как заставить элемент Div плавно двигаться вверх с помощью переходов CSS?

Название как бы описывает это. Вот код:

#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 при наведении курсора мыши. Как видите, у меня уже есть это, но это не настоящая анимация — оно мгновенно поднимается вверх. Также должен быть переход цвета при наведении - он должен становиться менее прозрачным. Это работает на других, но не на этом.

Становится действительно интересно, когда вы избавляетесь от тире в полях сверху и снизу. Затем, вместо двух нижних медленно движущихся вниз, они все просто встают на место. Это то, что я ищу, только с анимацией. Я понятия не имею, что происходит. Есть ли что-то, что мне здесь не хватает?


html css css-transitions
person Tommay    schedule 21.07.2015    source источник
comment
Я думаю, ваши переходы должны быть в одном правиле: transition: opacity .5s, margin-top .5s, margin-bottom .5s;. Вместо этого вы перезаписываете предыдущие правила только последним. Попробуйте их объединить.   -  person Sebastian Simon    schedule 21.07.2015
comment
Ксуфокс понял. Спасибо!   -  person Tommay    schedule 21.07.2015

Ответы (2)


arrow_upward
2
arrow_downward

Если вы хотите применить несколько transition, вы не можете просто написать несколько правил, так как в CSS последнее правило переопределяет все предыдущие.

Объедините их в одно правило:

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

Вот статья MDN об использовании нескольких transitions.

person Sebastian Simon    schedule 21.07.2015

arrow_upward
0
arrow_downward

Вы имели в виду что-то вроде этого? Скрипт: https://jsfiddle.net/99464tyx/2/

Если это так, просто замените все переходы на transition: all .5s;

person gopalraju    schedule 21.07.2015