4

ページの上部から下部に div を展開しようとしています。アニメーションが開始されると、ページが 100% 埋まるまで、div は非表示 (高さ 0%) になります。私はそのようにしようとしましたが、どれも機能していないようです:

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>About Me</title>

    <link rel="stylesheet" href="stylesheets/main.css">
</head>

<body>
    <div id="bar"></div>
</body>
</html>

CSS:

    *
{
    box-sizing: border-box;
}

body
{
    height: auto;
    width: auto;
    direction: ltr;
    z-index: 1;
    background-color: #fff;
}

#bar
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 5%;
    background-color: #3b5598;
    display: block;
    -webkit-animation: bar 7s ease;
}

@keyframes bar
{
  0% {
    top: 0%;
  }
  100% {
    top: 100%;;
  }
}

以前は左から右にアニメーションが機能していましたが、上から下には何もありませんでした。私はこれを広範囲にグーグルで検索しましたが、役に立ちませんでした。ありがとう

4

3 に答える 3

4

この質問のタイトル (「Move Div」) と OP の実際の要求 (「expand a div」) は少し同期していません。この SO の質問は、div をアニメーション化する方法を検索するときに Google から返されるので、css の「top」プロパティで div を遷移する方法を説明するブログ投稿にリンクすると思いました。

これがブログ投稿のフィドルです。次の css のようなものを div に適用します

#bar{
  position: absolute;
  top:0px;
  transition: 2s;
}

onload、hover、またはその他の方法を使用して、遷移先の「top」の値を適用します。

#bar:hover{
  top:100px;
}
于 2016-05-08T21:32:08.090 に答える