ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】JavaScript不要！ホバーで線が動くアニメーションの作り方

【CSS】JavaScript不要！ホバーで線が動くアニメーションの作り方

HTML/CSS

2022/05/09

2023/05/08

線が動くアニメーション記事サムネイル

Webサイトで使われるアニメーションの中には、JavaScriptを使わずにCSSのみで実装できる簡単なものが含まれていることがあります。

CSSのみで実行できると、動作が軽くなるのでおすすめです。

この記事ではHTML・CSSを用いた「ホバーで線が動くアニメーション」の作り方を解説します。

この記事で身につく内容
  • CSSのホバーアニメーションの作り方

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか？

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

ホバーアニメーションのサンプルコードダウンロード

下記のリンクからサンプルをダウンロードしてください。

サンプルコード

ファイルを開くと、下記2つのファイルが入っています。

  • 「code」→HTML・CSSが入っているファイル

下記からサンプルコードを確認することもできます。

See the Pen line-animation by ZeroPlus (@zeroplus-programming) on CodePen.

要素をホバーすると、要素の外枠の線が動きます。

ホバーアニメーション作成のポイント

この記事で紹介するホバーアニメーション実装のポイントは4点あります。

アニメーション実装ポイント

  1. 疑似クラスの:nth-child()を使う。
  2. transform: scale();を使う。
  3. ホバー前とホバー後のスタイルを作成する。
  4. transform-originを使う。

それぞれのポイントについては、下記のセクションで解説していきます！

なお、疑似クラスについては、下記の記事で詳しく解説しています。

アイキャッチ画像
CSSのnth-childとnth-of-typeの使い方と違いを解説

 

@keyframesを使う場合のアニメーションについては、下記の記事で詳しく解説しています。

アイキャッチ画像
【CSS】animationと@keyframesの指定方法を完全解説

ホバーアニメーションを実装してみよう！

ここからは、ホバーアニメーションの実装をしていきます。

ベースとなる要素のHTMLとCSSは次のようになります。

HTMLとCSSを見る

  <div class="box">
    <span class="box__line"></span>
    <span class="box__line"></span>
    <span class="box__line"></span>
    <span class="box__line"></span>
  </div>
.box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  display: block;
  cursor: pointer;
  background: orange;

}


.box__line {
  position: absolute;
}

.box__line:nth-child(1),
.box__line:nth-child(3) {
  width: 100%;
  height: 2px;
  background: #000;

}

.box__line:nth-child(2),
.box__line:nth-child(4) {
  width: 2px;
  height: 100%;
  background: #000;
}

.box__line:nth-child(1) {
  top: 0;
  left: 0;
}

.box__line:nth-child(2) {
  top: 0;
  left: 0;
}

.box__line:nth-child(3) {
  bottom: 0;
  left: 0;
}


.box__line:nth-child(4) {
  top: 0;
  right: 0;
}

 

出力結果

See the Pen line-animation-sample by ZeroPlus (@zeroplus-programming) on CodePen.

線の配置は、position: absolute;です。線はspanタグのwidthとheight、background-colorで表現します。

疑似クラスnth-childで上下左右の線をそれぞれ指定しています。

  • 上の線：box__line:nth-child(1)
  • 下の線：box__line:nth-child(3)
  • 右の線：box__line:nth-child(2)
  • 左の線：box__line:nth-child(4)

transform: scale();で線の動きを制御する

初期状態では左右の線を消したいので、左右のbox__lineクラスに対してtransform: scaleY(0);を指定しましょう。左右の線はY軸方向に伸びているので、Y軸方向のscaleYを指定します。

.box__line:nth-child(2) {
  top: 0;
  left: 0;
  transform: scaleY(0);
}
.box__line:nth-child(4) {
  top: 0;
  right: 0;
  transform: scaleY(0);
}

transform: scale;で、指定した要素に対して拡大・縮小するスタイルが適用されます。scaleY(0)で線が完全に縮小されて見えなくなります。

scaleYのイメージができない場合は、例えばscaleYの値を0.1、0.5と指定してみましょう。

transform: scaleY(0.1)の場合

See the Pen line-animation-sample-scaleY by ZeroPlus (@zeroplus-programming) on CodePen.

 

transform: scaleY(0.5)の場合

See the Pen line-animation-sample-scaleY0.5 by ZeroPlus (@zeroplus-programming) on CodePen.

数字が少ないほど線が短く（縮小）、数字が大きいほど線が長く（拡大）されます。ここでは初期状態で左右の線を消したいので、scaleY(0)を適用します。

次に、ホバーしたときの線の動きを指定します。

.box:hover .box__line:nth-child(1) {
  transform: scaleX(0);
}

.box:hover .box__line:nth-child(2) {
  transform: scaleY(1);
}

.box:hover .box__line:nth-child(3) {
  transform: scaleX(0);
}

.box:hover .box__line:nth-child(4) {
  transform: scaleY(1);
}

出力結果

See the Pen line-animation-sample-scale by ZeroPlus (@zeroplus-programming) on CodePen.

左右の線にはtransform: scaleX(1);を適用して線を表示、上下の線はtransform: scaleY(0);で消します。この時点で要素をホバーしても上下左右の線が表示・非表示交互に切り替わるだけです。

ZeroPlusgate50教材の動画

ホバー前後の動きをtransitionプロパティで制御する

そこでtransitionを適用して表示・非表示の時間を制御します。その際に、ホバー前とホバー後の両方にtransitionを適用しましょう。

.box__line {
  position: absolute;
  transition: transfrom .5s;　/*追記*/
}
.box__line:nth-child(1) {
  top: 0;
  left: 0;
  transition: transform .5s;　/*追記*/
}

.box__line:nth-child(2) {
  top: 0;
  left: 0;
  transform: scaleY(0);
  transition: transform .5s;　/*追記*/
}

.box__line:nth-child(3) {
  bottom: 0;
  left: 0;
  transition: transform .5s;　/*追記*/
}

.box__line:nth-child(4) {
  top: 0;
  right: 0;
  transform: scaleY(0);
  transition: transform .5s;　/*追記*/
}


.box:hover .box__line:nth-child(1) {
  transform: scaleX(0);
  transition: transform .5s;　/*追記*/
}


.box:hover .box__line:nth-child(2) {
  transform: scaleY(1);
  transition: transform .5s;　/*追記*/
}


.box:hover .box__line:nth-child(3) {
  transform: scaleX(0);
  transition: transform .5s;　/*追記*/
}


.box:hover .box__line:nth-child(4) {
  transform: scaleY(1);
  transition: transform .5s;　/*追記*/

}

出力結果

See the Pen line-animation-sample-transition by ZeroPlus (@zeroplus-programming) on CodePen.

現状ではホバーしても「中央から両端に向かって線が伸縮する」だけです。

transform-originプロパティで変形させる要素の中心点を制御する

線の伸縮の方向をtransform-originプロパティを使って下記のようにします。

ホバーしたら伸縮したい線の方向

  • 上の線：box__line:nth-child(1)は右から左へ
  • 下の線：box__line:nth-child(3)は左から右へ
  • 右の線：box__line:nth-child(2)は下から上へ
  • 左の線：box__line:nth-child(4)は上から下へ

それぞれのbox__lineクラスに対して、transform-originプロパティを設定していきます。transform-originは、変形する要素の中心点を指定します。

例えばホバーしたときの上の線（box__line:nth-child(1)）にtransform-origin: left;と適用すれば、中心点のx座標が0%（左端）になります。

transform-originプロパティ適用前では上の線の動きは、中心に向かって線が縮んでいます。

transform-originプロパティ適用後では中心点が左端（x軸）になるので、線の動きが左端に向かって線が移動するイメージになります。

.box:hover .box__line:nth-child(1) {
  transform: scaleX(0);
  transform-origin: left; /*追記*/
  transition: transform .5s;
}

.box:hover .box__line:nth-child(2) {
  transform: scaleY(1);
  transform-origin: top; /*追記*/
  transition: transform .5s;
}

.box:hover .box__line:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;　/*追記*/
  transition: transform .5s;
}

.box:hover .box__line:nth-child(4) {
  transform: scaleY(1);
  transform-origin: bottom;　/*追記*/
  transition: transform .5s;
}

出力結果

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

これで要素をホバーすると次のような線の動きになります。

ホバーしたら伸縮したい線の方向

  • 上の線：box__line:nth-child(1)は右から左へ
  • 下の線：box__line:nth-child(3)は左から右へ
  • 右の線：box__line:nth-child(2)は下から上へ
  • 左の線：box__line:nth-child(4)は上から下へ

そして最後に、ホバー前の要素にもtransform-originを指定してください。

.box__line:nth-child(1) {
  top: 0;
  left: 0;
  transform-origin: right;　/*追記*/
  transition: transform .5s;
}

.box__line:nth-child(2) {
  top: 0;
  left: 0;
  transform: scaleY(0);
  transform-origin: bottom;　/*追記*/
  transition: transform .5s;
}

.box__line:nth-child(3) {
  bottom: 0;
  left: 0;
  transform-origin: left;　/*追記*/
  transition: transform .5s;
}

.box__line:nth-child(4) {
  top: 0;
  right: 0;
  transform: scaleY(0);
  transform-origin: top;　/*追記*/
  transition: transform .5s;
}

出力結果

See the Pen line-animation by ZeroPlus (@zeroplus-programming) on CodePen.

これで完成となります！

まとめ

簡単なアニメーションであれば、JavaScriptやjQueryを使わずにHTMLとCSSのみで実装することができます。transformプロパティやtransform-originプロパティの組み合わせで実装しましょう。

このように複数のプロパティを使い、ホバー前とホバー後で見た目に差をつけることで、アニメーションのような動きにすることができます。

この記事では線を動かしましたが、要素にも動きを加えることができるので、自分でカスタマイズしてみましょう！

アニメーション実装ポイントまとめ

  1. 疑似クラスの:nth-child()を使う。
  2. transform: scale();を使う。
  3. ホバー前とホバー後のスタイルを作成する。
  4. transform-originを使う。
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか？

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

FacBook
Twitter
LINE
はてブ
PPocket

おすすめのタグ

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて
ZeroPlus Gateについて

あなたの目的に合わせた２つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

記事のアイキャッチ画像

完全無料！30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

記事のアイキャッチ画像

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから