<div class="content">
    <h1>Floating Social Icons</h1>
    <div class="icons">
      <a href="#"><i class="fa fa-github"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
      <a href="#"><i class="fa fa-codepen"></i></a>
      <a href="#"><i class="fa fa-instagram"></i></a>
      <a href="#"><i class="fa fa-dribbble"></i></a>
      <a href="#"><i class="fa fa-behance"></i></a>
      <a href="#"><i class="fa fa-linkedin"></i></a>
    </div
</div>
$i: 0;
$icons: 7;

@keyframes float {
  0% {
       transform: translate(0px, 0px);
   }

   50% {
       transform: translate(0px,16px);
   }

   100% {
       transform: translate(0px, 0px);
   }
}

@while $i <= $icons {
    a:nth-child(#{$i}) { 
      display: inline-block;
      animation: float 4s infinite ease-in-out;
      animation-delay: #{$i/2}s;
    }
    $i: $i + 1;
  }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  color: #666;
  background: #f5f8fa;
}

.content {
  position: relative;
  top: 35%;
}

h1 {
  text-align: center;
  font-size: 24px;
}
.icons {
  margin-top: 40px;
  text-align: center;
}
a {
  font-size: 26px;
  color: #4BF7D3;
  padding: 3px 2px;
  margin: 2px 3px;
  transition: all 0.3s ease;
 
  &:hover {
    color: #80FFDB;
  }
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.