あなたのキモチ つなげるカタチ

TOP > CSS > 【CSS】CSSでライン(直線)を走らせるテクニック/CSS Line Animation

【CSS】CSSでライン(直線)を走らせるテクニック/CSS Line Animation

スポンサーリンク

実装内容

今回はCSSのみでライン(直線)を走らせるテクニックを紹介します。ページ内の要素間などを繋ぐ演出で活用できるのではないでしょうか。

実装所要時間:10分程度

実装方法

.line {
  position: absolute;
  top: -300px;
  left: 50%;
  margin: 0 auto;
  width: 1px;
  height: 600px;
  background-color: #444;
}

.line:after {
  content: '';
  position: absolute;
  right: -100%;
  bottom: 0;
  width: 300%;
  height: 100%;
  background-color: #fff;
  -webkit-transition: height 1s ease 1s;
  transition: height 1s ease 1s;
}

.add.line:after {
  height: 0;
}

【簡単な解説】
ラインの要素はwidth:1px;とheightに数値を指定。また背景色(ラインの色)も指定します。
そして、ラインの要素の上に擬似要素:afterを横幅、高さ一杯に重ねます。
:afterにはラインが走るセクションの背景色を指定しておき、透明な見た目にします。
addClass()で:afterにクラスを付与してheight:0;にする。
アニメーションはtransitionで動かします。
:afterの高さが低くくになるにつれて、ラインの要素の背景色が見えてくるので、ラインが動いているように見える仕組みです。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です