<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<div class="colls">
  <div class="coll">
    <p><i class="fab fa-vk"></i></p>
  </div>
  <div class="coll">
    <p><i class="fab fa-twitter"></i></p>
  </div>
  <div class="coll">
    <p><i class="fab fa-facebook"></i><p>
  </div>
  <div class="coll">
    <p><i class="fab fa-google-plus-g"></i></p>
  </div>
</div>

.colls {
  overflow:hidden;
  background: #f0f0f0;
}
.coll {
  width:25%;
  float:left;
}
.coll p {
  text-align:center;
  font-size: 48px;
  color:#0e2dcb;
  text-shadow: 1px 1px 3px #000;
  transition:0.2s ease;
}
.coll p:hover {
  cursor:pointer;
  text-shadow: 0px 0px 1px #000;
}
.fa-vk::after {
  content: "VKontakte";
}
.fa-twitter::after {
  content: "Twitter";
}
.fa-facebook::after {
  content: "Facebook";
}
.fa-google-plus-g::after {
  content: "Google +";
}
::after {
  font-size:24px;
  color:#001335;
  text-shadow: none;
  position:fixed;
  top:120px;
  left:-100%;
  opacity:0;
  visibility:hidden;
 
  
}
@keyframes moveAfterVK {
    0% {
      left:-100%;
    }
    80% {
      opacity:1;
      visibility:visible;
      left: 10%;
      -webkit-transform: skewX(20deg);
		-ms-transform: skewX(20deg);
		-o-transform: skewX(20deg);
		transform: skewX(20deg);
    }
  90% {
     -webkit-transform: skewX(-20deg);
		-ms-transform: skewX(-20deg);
		-o-transform: skewX(-20deg);
		transform: skewX(-20deg);
  }
    100% {
      left: 8%;
      opacity:1;
      visibility:visible;
    }
  }
.fa-vk:hover::after {
  animation: moveAfterVK 0.8s ease 1 alternate both;
}

@keyframes moveAfterTW {
    0% {
      left:-100%;
    }
    80% {
      opacity:1;
      visibility:visible;
      left: 38%;
      -webkit-transform: skewX(20deg);
		-ms-transform: skewX(20deg);
		-o-transform: skewX(20deg);
		transform: skewX(20deg);
    }
  90% {
     -webkit-transform: skewX(-20deg);
		-ms-transform: skewX(-20deg);
		-o-transform: skewX(-20deg);
		transform: skewX(-20deg);
  }
    100% {
      left: 34%;
      opacity:1;
      visibility:visible;
    }
  }
.fa-twitter:hover::after {
  animation: moveAfterTW 0.8s ease 1 alternate both;
}


@keyframes moveAfterFB {
    0% {
      left:-100%;
    }
    80% {
      opacity:1;
      visibility:visible;
      left: 61%;
      -webkit-transform: skewX(20deg);
		-ms-transform: skewX(20deg);
		-o-transform: skewX(20deg);
		transform: skewX(20deg);
    }
  90% {
     -webkit-transform: skewX(-20deg);
		-ms-transform: skewX(-20deg);
		-o-transform: skewX(-20deg);
		transform: skewX(-20deg);
  }
    100% {
      left: 58%;
      opacity:1;
      visibility:visible;
    }
  }
.fa-facebook:hover::after {
  animation: moveAfterFB 0.8s ease 1 alternate both;
}

@keyframes moveAfterGL {
    0% {
      left:-100%;
    }
    80% {
      opacity:1;
      visibility:visible;
      left: 86%;
      -webkit-transform: skewX(20deg);
		-ms-transform: skewX(20deg);
		-o-transform: skewX(20deg);
		transform: skewX(20deg);
    }
  90% {
     -webkit-transform: skewX(-20deg);
		-ms-transform: skewX(-20deg);
		-o-transform: skewX(-20deg);
		transform: skewX(-20deg);
  }
    100% {
      left: 82.5%;
      opacity:1;
      visibility:visible;
    }
  }
.fa-google-plus-g:hover::after {
  animation: moveAfterGL 0.8s ease 1 alternate both;
}