[CSS]残像アニメーションが気持ちいいシェア用のボタンを実装するスタイルシート

ボタンをホバーすると、サークル状のフラットなアイコンを使ったソーシャルメディアへのシェア用のボタンがアニメーションで表示されるスタイルシートを紹介します。

Animacion CSS
※デモは最新のモダンブラウザでご覧ください。

デモ自体は上記のアニメーションに比べてちょっと遅い動きですが、スタイルシートで調整すれば好みのスピードに変更できます。
実装は、下記のようになっています。

HTML

各シェアボタンはa要素で配置し、div要素で内包します。

 <div id="redessociales">
          <a class="smedia facebook" href="https://www.facebook.com/josernitos">Uno</a>
          <a class="smedia twitter" href="http://www.twitter.com/josernitos">Dos</a>
          <a class="smedia instagram" href="#">Tres</a>
          <a class="smedia youtube" href="#">Cuatro</a>
          <a class="smedia vimeo" href="#">Cinco</a>
          <a class="smedia email" href="#">Seis</a>
</div>

CSS

スピードを変更する時は、「.smedia」の「2s」を変更します。

body {background-color:#333;} 
#redessociales {
  width: 64px;
  height: 64px;
  border-radius: 75px;
  border: 5px solid #fff;
  background: url(http://4.bp.blogspot.com/-gKMIOgeaEBY/UWHsOA382oI/AAAAAAAABpI/5GdyRTAeKII/s1600/share_core_square.jpg)
}

.smedia {
  position: absolute;
-webkit-transition: left 2s cubic-bezier(0.1,0.8,0.9,1), opacity 1s linear;
-moz-transition: left 2s cubic-bezier(0.1,0.8,0.9,1),opacity 1s linear;
-o-transition: left 2s cubic-bezier(0.1,0.8,0.9,1), opacity 1s linear;
  display: inline;
  opacity: 0;
  width: 46px;
  height: 46px;
  z-index: 100;
  margin:10px 0px 0px 20px;
  text-indent: -9999px;
  background: no-repeat;
}

#redessociales:hover .smedia {
  opacity: 1;
  transform: translate(0px,0);
  -webkit-transform: translate(0px,0);
  -o-transform: translate(0px,0); 
  -moz-transform: translate(0px,0);
    margin:10px 0px 0px 20px;
}
#redessociales:hover .smedia:nth-child(1) {
  position: absolute;
  left:65px;
}

#redessociales:hover .smedia:nth-child(2) {
  position: absolute;
  left:110px;
}
#redessociales:hover .smedia:nth-child(3) {
  position: absolute;
  left:155px;
}
#redessociales:hover .smedia:nth-child(4) {
  position: absolute;
  left:200px;
}
#redessociales:hover .smedia:nth-child(5) {
  position: absolute;
  left:245px;
}

#redessociales:hover .smedia:nth-child(6) {
  position: absolute;
  left:290px;
}

.smedia.facebook {
    background: url(http://4.bp.blogspot.com/-49s_0_9mdVo/UWHsMIvJBNI/AAAAAAAABn8/6bVMlN4Qz7Y/s1600/bubble_facebook_share_button.png);
}
.smedia.twitter {
    background: url(http://2.bp.blogspot.com/-3r8sHe1Qy5M/UWHsNMDDzHI/AAAAAAAABog/q3V7mYirmOY/s1600/bubble_twitter_share_button.png);
}
.smedia.email {
    background: url(http://3.bp.blogspot.com/-ZhFqBhp79cA/UWHsMBmPxsI/AAAAAAAABn4/O8k_pGf1oCU/s1600/bubble_email_share_button.png);
}
.smedia.instagram {
    background: url(http://1.bp.blogspot.com/-FSkby0cXU_8/UWHsMis8c2I/AAAAAAAABoQ/y8coyc5ystc/s1600/bubble_instagram_share_button.png);
}
.smedia.youtube {
    background: url(http://4.bp.blogspot.com/-x2oyT1dBzwA/UWHsNtcWXVI/AAAAAAAABo8/8kCXTVMbM6Y/s1600/bubble_youtube_share_button.png);
}
.smedia.vimeo {
    background: url(http://2.bp.blogspot.com/-01SWPeX-584/UWHsNim9CAI/AAAAAAAABo4/Z9jMox_9UrE/s1600/bubble_vimeo_share_button.png);
}
.smedia:hover {
    background-position: 0 -46px;
}

コードはオンラインでいろいろ変更することができます。

Animacion CSS