アニメーションと一緒に動いてしまうのを止めたい

コード
<body>
    <div class="line"></div>
    <div class="title"><img src="img/hand-text-black.svg"></div>
</body>

css}

@keyframes line {
  0% {
    width: 1px;
    height: 0px;
    background: 000;
    position: relative;
    top: 0
  }

  50% {
    width: 1px;
    height: 50px;
    position: relative;
    top: 0
  }

  75% {
    width: 1px;
    height: 0px;
    position: relative;
    top: 50px
  }

  100% {
    width: 1px;
    height: 0px;
    position: relative;
    top: 50px
  }
}
```html


下に続く要素（img要素）にまでアニメーションと一緒になって上下してしまいます。
imgタグにはアニメーションをつけていないのになぜ動いてしうのでしょうか。

kei344

2019/12/01 12:50

コードがコードブロックから出ていますので、修正してください。

退会済みユーザー

2019/12/01 22:55

修正しました。

kei344

2019/12/02 04:39

こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。

行動規範の内容に同意します

回答2件

ベストアンサー

高さを補うように margin-bottom でも設定してみては？

CSS
1  0% {
2    height: 0px;
3    margin-bottom: 50px;
4    top: 0px;
5  }
6
7  50% {
8    height: 50px;
9    margin-bottom: 0px;
10    top: 0px;
11  }
12  /*以降同様*/