すっきり収納！邪魔になりがちな追従SNSボタンをCSS3アニメーションで隠す方法

2014 1/31

2014.01.31 2014.09.30

Hide and Seek / mediadeo

本日もroom9にお越しいただきありがとうございます。

Qtaro（＠Daisuke_9taro）です。

さて、ブログのSNSボタン追従させてますか？？

このブログではPC表示に画面左下に、追従するSNSボタンを表示させていたのですが

「結構主張してくるなー」
「んー。。ちょっと邪魔かな〜。。」

なんて最近思っていました。

せっかくブログにきてくれた方が同じような気持ちになっていたとしたら。。
うーん、それはヤダ。

ということで

試験的に、追従のSNSボタンを縦置き（&収納）してみました！！
なお今回はCSS3のアニメーション（Transitions）を使用しています。

以下実装メモになりますので、気になる方は続きをどうぞ^^

＜追記：2014年5月＞
現在は追従のSNSボックス自体を外しております。以下実装の参考にどうぞ♪

実装メモ

CSSの使い方としては特に難しいことはしていないのですが、
ポイントの「収納」させるアニメーション部分を含むCSSの記述を下記に載せます。

なお縦置きにするには、以下の記事がとても参考になります。
STINGERのスクロールしてもついてくるSNSボタンを縦にしてみた
（@pochimin02さん記事のシェアありがとうございました！！！）

.sns {
  background: none repeat scroll 0 0 rgba(250, 250, 250, 0.3);
  border: 0 solid rgba(250, 250, 250, 0.1);
  border-radius: 0 12px 12px 0;
  bottom: 15px;
  box-shadow: 0 0 8px -4px #FFFFFF;
  margin: 0 0 0 -85px;
  padding: 0 0 0 5px;
  position: fixed;
  text-align: center;
  transition: margin 0.15s ease-out 0s;
  -moz-transition: margin 0.15s ease-out 0s;
  -webkit-transition: margin 0.15s ease-out 0s;
}

.sns:hover{
  margin:0 0 0 0;
}

追記：2014/01/31

先ほど確認したらFireFoxではうまくアニメーションしていませんね。。申し訳ないです。
（ChromeとSafariは問題ありません。）

原因分かり次第、記事も修正させていただきます。
参考にしていただく方はその点ご了承くださいm(__)mｽﾏﾝﾃﾞｽ

（追記：2014/2/1）
Firefoxもアニメーションするよう改善しました！（上記CSSも修正してます）transition-delayのプロパティの単位の記述をハショってしまっていたのが問題でした。
（朱いさん、ご指摘ありがとうございます！！）

（追記ここまで）