gametag.html

<!-- you can also use html here, global filters and custom variables are also available -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='https://fontastic.s3.amazonaws.com/sEsaN6ZPMiVLUYDwwr6us4/icons.css' rel='stylesheet' type='text/css'>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<ul class='social'>
  <li>
    <a class="fa fa-instagram" href="#">    
      <span>iamAleyev</span>
    </a>
  </li>

  <li>
    <a class="fa fa-twitter" href="#">
      <span>iamAleyev</span>
    </a>
  </li>

  <li>
    <a class="fa fa-steam" href="#">
      <span>iamAleyev</span>
    </a>
  </li>

  <li>
    <a class="icon-origin" href="#">
    <span>Aleyev</span>
    </a>
  </li>

  <li>
    <a class="icon-battle-net" href="#">
    <span>alyv#1256</span>
    </a>
  </li>

</ul>

<style type="text/css">
body { background: #333; height: 2000px }

.social {
  width: 200px;
  height: 220px;
  position: fixed;
  margin-top: 30px;
  perspective: 1000px;
  animation-name: slideRight;
}

.social li a {
  display: block;
  height: 20px;
  width: 40px;
  background: #222;
  border-bottom: 1px solid #333;
  font: normal normal normal
  16px/20px 
  'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  transition: background .5s ease .300ms
}

.social li:first-child  a:hover { background: #3b5998 }
.social li:nth-child(2) a:hover { background: #00acee }
.social li:nth-child(3) a:hover { background: #ea4c89 }
.social li:nth-child(4) a:hover { background: #dd4b39 }

.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child  a { border-radius: 0 0 5px 0 }
    
.social li a span {
  width: 100px;
  float: left;
  text-align: center;
  background: #222;
  color: #fff;
  margin: -25px 74px;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(45deg);
  border-radius: 5px;
  transition: all .5s ease .300ms
}

.social li span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border: 10px solid transparent;
  border-right: 10px solid #222;
}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0)
}

.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRight {
	0% {
		transform: translateX(-150%);
	}
	50%{
		transform: translateX(8%);
	}
	65%{
		transform: translateX(-4%);
	}
	80%{
		transform: translateX(4%);
	}
	95%{
		transform: translateX(-2%);
	}			
	100% {
		transform: translateX(0%);
	}	
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-150%);
	}
	50%{
		-webkit-transform: translateX(8%);
	}
	65%{
		-webkit-transform: translateX(-4%);
	}
	80%{
		-webkit-transform: translateX(4%);
	}
	95%{
		-webkit-transform: translateX(-2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}
@keyframes hide {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes hide {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}
@keyframes show {
    to {
        width:0;
        height:0;
        overflow:visible;
    }
}
@-webkit-keyframes show {
    to {
        width:0;
        height:0;
        visibility:visible;
    }
}
</style>

<script type="text/javascript">
  $(function() {
    var counter = 0,
      divs = $('.social');

    function showDiv() {
      divs.hide() // hide all divs
        .show('fast', function() {
          // Animation complete.
          divs.addClass("slideRight"); // add css animation class
        }); // and show it
      counter++;
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    setInterval(function() {
      showDiv(); // show next div
    }, 10000); // do this every 1 minute   
  });
</script>