クリックなんかのイベントに応じて線を引きたい、みたいなことがあったのでお試しのコードを書いてみました。

あらかじめwidth: 0で線を見えない状態で仕込んでおいて、そのwidthをアニメーションで伸ばすというやり方でやっています。

サンプルコードはこちら。

See the Pen クリックで上に線を引くサンプル by Makoto Ohnami (@zohnami) on CodePen.

HTMLはこんな感じ。線のdivクラスstrucl_lineが配置されています。

<div class="button">
  <div class="struck_line"></div>
  press me
</div>

線は最初から存在するけれど、最初はまだ見えないようにcssでwidth: 0にしておきます。

topで指定しているcalc(50% - 4px)は縦位置を中央にするためのコードです。

いつも思いますが、50% - 4pxみたいな計算が普通に通るのはすごい。

.struck_line {
  position: absolute;
  height: 8px;
  width: 0;
  top: calc(50% - 4px);
  left: 10px;
  background-color: #000;
}

以下は線を引くアニメーション設定。easingやスピードはお好みで調整するといいですね。

@keyframes draw {
  0% {
    width: 0;
  }

  100% {
    width: 180px;
  }
}

.animation_draw_line {
  animation-name: draw;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

あとはJavaScriptでcssのアニメーションクラスをクリックイベントに応じて付与してあげればOK

const button = document.querySelector('.button');
button.addEventListener('click', () => {
  const line = document.querySelector('.struck_line');
  line.classList.add('animation_draw_line');
});

この記事の環境情報

  • Google Chrome 108.0.5359.124
  • 少しだけ二日酔い