大弘コラム

いまさら人には聞けないけどリンクとかにサラっとアニメーションを入れたい時のCSS2018-09-14

みなさんこんにちは。大弘アドのぜぇれさんです。

メニューとかにマウスホバーでちょっとしたアニメーションがあるとリッチになりますよね。
本日はCSS&テキストのみで簡単なアニメーションを挿入したコードを備忘録がてら記事にします。

バリバリデザインコーディングができる方は回れ右をお願いします。

サラっとアニメーションを入れたい時のCSS集

複数のパターンでサラっとアニメーションを入れてゆきます。
デザインの実現手法の引き出しの一つとして活用してくれると幸いです。
リセットCSSやらノーマライズCSSやらによる個別の調整はご自身でお願いします。

基本の形

アニメーションを施す前の基本の形を定義しておきましょう。
シンプルな長方形のボタンを用意しました。

HTML

<a href="http://www.daiko-ad.co.jp/">リンク</a>

CSS

a {
  display:block; /*このaタグはブロック要素だよ宣言*/
  transition:all .2s ease; /*アニメーションしてよのお願い*/
  -webkit-transition:all .2s ease; /*アニメーションしてよのお願い*/
  max-width:300px; /*最大幅は300pxでお願いね*/
  width:100%; /*横幅は100%でお願い!でも最大幅は300pxだよ*/
  margin:10px auto; /*マージンは上下に10px、左右自動で設定してね、つまるところ中央にいてね*/
  line-height:40px; /*テキスト1行の高さは40pxでお願いね*/
  background-color:#efefef; /*背景色はうす~いグレーでお願いね*/
  border:1px solid #ccc; /*枠線を薄めのグレーで1pxで入れてね*/
  text-align:center; /*文字は中央寄せでお願いね*/
  color:#333; /*文字色はグレーでお願いね*/
}

確認用デモページ

マウスオンで薄くする

ほわんって薄くなるやつです。

CSS

a:hover { /*:hoverはその要素にマウスオンしたらという疑似クラス*/
	opacity:0.4; /*40%ぐらいの透明度になってね*/
}

確認用デモページ

マウスオンでボーダーを太くする

枠線を太くしてみます!!

CSS

a:hover {
	border:4px solid #ccc; /*ボーダーを4px、色はグレーでお願い*/
}

確認用デモページ

マウスオンでサイズを大きくする

縦横をちょい大きくしてみます!

CSS

a:hover {
	line-height:60px; /*行の高さ(この場合aタグの高さ)を60pxに増設だ!*/
	max-width:400px; /*最大幅も300pxから400pxに増やしてね*/
}

確認用デモページ

マウスオンで丸みをつける

角を丸くしてみますね。

CSS

a:hover {
	border-radius:8px; /*角に8pxの丸みをつけてね*/
}

確認用デモページ

もっと丸くしてみますね

CSS

a:hover {
	border-radius:20px; /*角に20pxの丸みをつけてね*/
}

確認用デモページ

影をつけてみる

ボワッ!って影もつけてみますね

CSS

a:hover {
	box-shadow:0px 0px 6px 3px #ccc; /*シャドウをぼかし6px、サイズ3px、色はグレーで頼む!*/
}

確認用デモページ

いろいろ合わせてみる

もちろんいろいろな変化を一緒に取り入れることもできます。

このほかにもCSSで設定できる内容なら、基本の形と変形後の形を指定するだけで簡単にアニメーションを挿入することができます。

CSS

a:hover {
	opacity:0.6; /*60%ぐらいの透明度になってね*/
	box-shadow:0px 0px 6px 3px #ccc; /*シャドウをぼかし6px、サイズ3px、色はグレーで頼む!*/
	border-radius:20px; /*角に20pxの丸みをつけてね*/
	border:4px solid #ccc; /*ボーダーを4px、色はグレーでお願い*/
	line-height:60px; /*行の高さを60pxに増設だ!*/
	max-width:400px; /*最大幅も300pxから400pxに増やしてね*/
}

確認用デモページ

おまけ(なんか線が出てくる)

最後はおまけでちょいオシャンティーなボタンを作ってみましょう。

CSS

/*ここから最初の形*/
a {
  display:block; /*リンクエリアを全面に広げるお願い*/
  color:#333; /*リンクのテキストカラー*/
  text-decoration:none; /*デフォルト糞ださ下線の削除*/
  font-size:14px; /*フォントの大きさ*/
  font-weight:bold; /*フォントの太さ*/
  line-height:70px; /*行の高さ(≒liの高さになる)*/
  position:relative; /*ポジション指定(ここ大事)*/
  text-align:center; /*テキスト中央寄せ*/
  border-radius:8px; /*角を丸くします*/
  width:300px; /*aの幅(この幅に対してアニメーションで出る線の長さが決まる)*/
  margin:auto; /*マージン指定(中央寄せにしています)*/
  box-sizing:border-box;
  transition:all .2s ease; /*アニメーションしてよのお願い*/
  -webkit-transition:all .2s ease;
}
a:before {
  content:'';
  position:absolute; /*ビフォー要素の場所指定*/
  bottom:20px; /*下からの置指定*/
  left:50%; /*左からの置指定*/
  width:0; /*初期線の長さ指定*/
  height:2px; /*線の太さ指定*/
  background:#ccc; /*線の色指定*/
  transform:translateX(-50%); /*中央に位置調整*/
  -moz-transform:translateX(-50%); /*中央に位置調整*/
  -webkit-transform:translateX(-50%); /*中央に位置調整*/
  -ms-transform:translateX(-50%);
  border-radius:2px; /*線の丸み指定*/
  transition:all .2s ease; /*アニメーションしてよのお願い*/
  -webkit-transition:all .2s ease; /*アニメーションしてよのお願い*/
}

/*ここからアニメーション後の形*/
a:hover {
  box-shadow:0px 0px 6px 3px #ccc; /*いでよドロップシャドウ!*/
  border-radius:35px; /*角を丸くします*/
}
a:hover:before {
  width:80%; /*アニメーション後の線の長さ指定*/
}

確認用デモページ

いかがでしたか?今回の「いまさら人には聞けないけどリンクとかにサラっとアニメーションを入れたい時のCSS」では

といった内容をお話させていただきました。
さらっとメニューやナビゲーションにアニメーションを実装したい時などに手間なく導入できる備忘録でした。

「伝わるデザイン」と「広告」でお悩みなら大弘アドへぜひぜひ!!
ぜぇれさんでした。

兵庫在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。モンスターハンターしませんか?