使用CSS3关键帧动画div滑动,但div推动其他div

时间:2013-11-08 15:27:00

标签: html css keyframe

我正在制作一个不使用JavaScript的滑动导航栏。

除了一件事之外,一切都很好:当div到达最终位置时(在关键帧的100%处),左边的div将顶部div推到文档的底部。

我尝试过的位置:绝对,但那无济于事。我尝试将div的宽度设置为6%并将顶部divs宽度设置为94%,但是当用户缩小他或她的浏览器时,它会立即中断。

HTML:

<div id="left_bar"><p>This is sparta!</p></div>
<div class="top_bar">This is not Sparta!</div>

CSS:

/* LEFT SIDEBAR*/
#left_bar {
-webkit-animation:myFirst 3s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
font-size: .2px;
padding-left: 5px;
float: left
}


/* LEFT SIDEBAR ANIMATION*/
@-webkit-keyframes myFirst /* Safari and Chrome */{
    0% {
        background: orange;
        width: 6%;
        height: 0px;
        margin-top: 100%;
    }
    100% {
        background:orange;
        width: 6%;
        height: 100%;
        opacity: 0.7;
        font-size: 16px;
    }
}
/* TOP SIDEBAR*/
.top_bar {
background-color: black;
-webkit-animation:mySecond 3s;
-webkit-animation-fill-mode: forwards;
float: right;
}

/* TOP SIDEBAR ANIMATION*/
@-webkit-keyframes mySecond /* Safari and Chrome */{
    0% {
        background: orange;
        width: 0%;
        height: 8%;

    }
    100% {
        background:orange;
        width: 94%;
        height: 8%;
        opacity: 0.7;
    }
}

jsFiddle注意:jsFiddle使它看起来完全不同。左侧边栏不占据高度的100%,但当顶部侧边栏占据页面的94%时,它会显示左侧边栏下方的顶部栏跳跃。

1 个答案:

答案 0 :(得分:1)

问题是由于padding-left:5px;上有#left_bar这个问题。将其删除并your problem is fixed

一个替代的充分解决方案是使用calc缩短其中一个的宽度相同的数量

@-webkit-keyframes mySecond {
    ...
    100% {
        width: calc(94% - 5px);
        ...
    }
}    

Demo here