【Labs】CSSだけでアニメーションするリンクボタン

こんにちは（・∀・）

以前投稿しました「CSS3のtransitionプロパティで簡単エフェクト」と前回投稿しました「CSSだけでアニメーションするリンクボタン」はCSSで制御するという内容が一緒なのでページを「CSSだけでアニメーションするリンクボタン」に統合します。

今回新たにサンプルも一つ追加しましたので、さらにご活用いただければと思います。

ところで、transitionプロパティはCSS3なのでベンダープレフィックスは必要？！

と考えそうなところですが、現在主要なブラウザではtransitionプロパティでベンダープレフィックスを使う必要はないようです。次のリンク先をご確認ください。

http://caniuse.com/

サンプルの動作確認はページの読み込みが終わってからお試しください。

1. テキストリンクの文字色を変更

マウスオーバー・マウスアウトでテキストリンクの文字色をゆっくりスムースに変更させます。

HTML

<p class="demo1">こんにちは！<a href="/">Webデザインラボ</a>です。</p>

CSS

.sample-demo .demo1 a {
  font-weight: bold;
  color: #4776AF;
  transition: 0.5s;
}
.sample-demo .demo1 a:hover {
  color: #d577ab;
}

Result

テキストリンクの文字色をマウスオーバー・マウスアウトでゆっくり変更させてますが、テキストだとわかりづらいかもしれません。しかしボタンにすると...

2. リンクボタンの色を変更

マウスオーバー・マウスアウトでリンクボタンの色をスムースに変更させます。

HTML

<div class="demo2">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>

CSS

.sample-demo .demo2 {
  width: 400px;
  margin: 0 auto;
}
.sample-demo .sample-demo .demo2 li {
  display: block;
  float: left;
  margin-right: 1px;
}
.sample-demo .demo2 li a {
  display: block;
  width: 99px;
  height: 35px;
  text-align: center;
  color: #fff;
  background: #9fb7d4;
  transition: 0.5s;
}
.sample-demo .demo2 li a:hover {
  background: #afc6e2;
}

Result

ボタンにするとわかりやすいですね。マウスオーバー・マウスアウトでボタンの色がスムースに変更しました。

3. ボタンのサイズを変更

マウスオーバー・マウスアウトでボタンのサイズをスムースに変更させます。

HTML

<div class="demo3">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>

CSS

.sample-demo .demo3 {
  width: 420px;
  height: 50px;
  margin: 0 auto;
}
.sample-demo .demo3 li {
  display: block;
  float: left !important;
  margin-right: 1px;
}
.sample-demo .demo3 li a {
  display: block;
  width: 99px;
  height: 35px;
  text-align: center;
  color: #fff;
  background: #9fb7d4;
  transition: 0.5s;
}
.sample-demo .demo3 a:hover {
  padding: 5px;
  background: #afc6e2;
  height: 50px;
  width: 110px;
}

Result

マウスオーバー・マウスアウトでボタンのサイズがスムースに変更します。親要素でサイズが変更する分のマージンを取らないと、サイズを変更するボタン要素以外も影響を受けますので注意が必要です。

4. ボタンのサイズを変更

マウスオーバー・マウスアウトでボタンのサイズをスムースに、他の要素に影響を与えることなく変更させます。

HTML

<div class="demo4">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>

CSS

.sample-demo .demo4 {
  position: relative;
  overflow: hidden;
  width: 420px;
  height: 60px;
  margin: 0 auto;
}
.sample-demo .demo4 ul {
  width: 420px;
  padding: 10px !important;
}
.sample-demo .demo4 li {
  display: block;
  float: left !important;
  text-align: center;
  margin-right: 1px;
}
.sample-demo .demo4 li:last-child {
  margin-right: 0;
}
.sample-demo .demo4 li a {
  display: block;
  width: 99px;
  height: 35px;
  color: #fff;
  background: #9fb7d4;
  transition: 0.5s;
}
.sample-demo .demo4 li a:hover {
  transform: scale(1.2,1.2);
}

Result

hoverした時にpaddingでサイズを変更していたのをscaleにしたことで、他の要素に影響を及ぼさなくなりました。

5. ボタンの下に横からバーが現れるナビゲーション

マウスオーバーするとボタンの下に横からバーが現れるナビゲーションです。画面左側からマウスオーバーしたメニューボタンの下にバーが現れます。

HTML

<nav class="demo5">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<span class="demo5-bar"></span>
</ul>
<!--demo5--></nav>

CSS

.sample-demo .demo5 {
  position: relative;
  width: 400px;
  height: 45px;
  margin: 0 auto;
}
.sample-demo .demo5 li {
  display: block;
  float: left;
  width: 99px;
  height: 35px;
  background: #9fb7d4;
  text-align: center;
  margin-right: 1px;
}
.sample-demo .demo5 li:last-child {
  margin-right: 0;
}
.sample-demo .demo5 li a {
  display: block;
  color: #fff;
}
.sample-demo .demo5 .demo5-bar {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 99px;
  height: 5px;
  background: #888;
  transition: 0.5s;
  opacity: 0;
  left: -50px;
}
.sample-demo .demo5 li:nth-child(1):hover ~ .demo5-bar {
  opacity: 1;
  left: 0;
}
.sample-demo .demo5 li:nth-child(2):hover ~ .demo5-bar {
  opacity: 1;
  left: 100px;
}
.sample-demo .demo5 li:nth-child(3):hover ~ .demo5-bar {
  opacity: 1;
  left: 200px;
}
.sample-demo .demo5 li:nth-child(4):hover ~ .demo5-bar {
  opacity: 1;
  left: 300px;
}

Result

マウスオーバーで兄弟要素をコントロールします。応用すれば色々なパターンのサンプルが作れそうですね。

参考

マウスホバーでアニメーションしながら追従するバーをCSSだけで実装する

6. ボタンのサイズをバウンドさせて変更

4番のサンプルのマウスオーバーするとボタンのサイズが変わるのを、animationプロパティを使ってバウンドさせてみました。

HTML

<nav class="demo6">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<span class="demo6-bar"></span>
</ul>
<!--demo6--></nav>

CSS

.sample-demo {
  margin: 0 0 40px 0;
  padding: 0;
}
.sample-demo .demo6 {
  position: relative;
  overflow: hidden;
  width: 420px;
  height: 60px;
  margin: 0 auto;
}
.sample-demo .demo6 ul {
  width: 420px;
  padding: 10px !important;
}
.sample-demo .demo6 li {
  display: block;
  float: left !important;
  text-align: center;
  margin-right: 1px;
}
.sample-demo .demo6 li:last-child {
  margin-right: 0;
}
.sample-demo .demo6 li a {
  display: block;
  width: 99px;
  height: 35px;
  color: #fff;
  background: #9fb7d4;
  transition: 0.5s;
}
.sample-demo .demo6 li a:hover {
  animation: anime 3s ease-in-out;
}
@keyframes anime {
  0% { transform: scale(0.8, 0.8); }
  5% { transform: scale(1.2, 1.2); }
  10% { transform: scale(1, 1); }
  15% { transform: scale(1.2, 1.2); }
  20% { transform: scale(1, 1); }
  100% { transform: scale(1, 1); }
}

Result

今回はtransformプロパティの値はscaleでしたが、違う値で試してみてもいいかもしれませんね。

今まではフラッシュやJavaScript等を使わないと実現できなかったことも、CSS3を使えばフラッシュやJavaScriptなしで簡単に動きのあるアニメーション効果を作ることができるようになりました、素敵です。

関連リンク

【CSS3リファレンス】transition
【CSS3リファレンス】animation
【CSS3リファレンス】transform
【リンク】jQueryでフラッシュみたいなリンクボタン

参考

もう必要なくなっていたCSSのベンダープレフィックス