Effect up and down in a few seconds

Question

Someone has some idea how I can make an effect up and down. For example: Descend the icon for 5 seconds and in the sequence it ascends and a few seconds after it descends and stay 5 seconds and rise again.

Imagery:

#social {
 width:700px; /* edite se for incluir mais links */
 position: fixed;
 top: 0px;
 left: 700px;
}
#icones {
 position: absolute;
 z-index: -1;
 margin-top: -57px;
 transition: margin-top 0.5s;
 -moz-transition: margin-top 0.5s;
 -webkit-transition: margin-top 0.5s;
 -o-transition: margin-top 0.5s;
}
#icones:hover {
 margin-top: 0px;
}
#icones li {
 margin: 0px;
 margin-top: -60px;
 padding: 0px;
 display: inline;
 z-index: 3000;
}
#icones img {
 opacity: 0.4;
 -moz-opacity: 0.4;
 -webkit-opacity: 0.4;
 -o-opacity: 0.4;
 transition: opacity .5s;
 -moz-transition: opacity .5s;
 -webkit-transition: opacity .5s;
 -o-transition: opacity .5s;
}
#icones img:hover {
 opacity: 1.0;
 -moz-opacity: 1.0;
 -webkit-opacity: 1.0;
 -o-opacity: 1.0;
}

<div id='social'>
<div id='icones'><ul>
<li><a target="_blank" href='https://www.facebook.com/liguetaxioficial/'><img src='http://3.bp.blogspot.com/-QB4FB1v8Cj0/UTSmz9SfS5I/AAAAAAAADAQ/jjT_x1C_tPI/s1600/facebook.png' /></a></li>
<li><a target="_blank" href='https://twitter.com/ligue_taxi'><img src='http://4.bp.blogspot.com/--pmEEnGL4p4/UTSm05Kp7UI/AAAAAAAADAw/Y5N73wRbT-c/s1600/twitter.png' /></a></li>
<li><a target="_blank" href='https://www.youtube.com/channel/UCa_5VkCzb7RnzfR-DwdnFJA'><img src='http://4.bp.blogspot.com/-8RHhZ1c7fyg/UTSm1Nlmz_I/AAAAAAAADA4/XU1Kl8h0gpE/s1600/youtube.png' /></a></li>
<li><a target="_blank" href='https://plus.google.com/102651165974266913449'><img src='img/GMais.png' width="62" height="78" /></a></li>
<li><a target="_blank"href='https://liguetaxi.wordpress.com/'><img src='img/WPress.png'  width="62" height="78" /></a></li>
     </ul></div>
    </div>

Answer 1

You can use jQuery animate within a setInterval that will fire the animation every 5 seconds (5000), alternating the margin-top of div. The offset().top provides me the current position of the element relative to the top of the page.

Run the code below and see working:

$(document).ready(function(){
   setInterval(function(){
      $("#icones").animate({marginTop: $("#icones").offset().top < 0 ? "0" : "-57" });
   },5000);
});

#social {
 width:700px; /* edite se for incluir mais links */
 position: fixed;
 top: 0px;
 /*left: 700px; comentado para o exemplo*/
}
#icones {
 position: absolute;
 z-index: -1;
 margin-top: -57px;
 transition: margin-top 0.5s;
 -moz-transition: margin-top 0.5s;
 -webkit-transition: margin-top 0.5s;
 -o-transition: margin-top 0.5s;
}
#icones:hover {
 margin-top: 0px;
}
#icones li {
 margin: 0px;
 margin-top: -60px;
 padding: 0px;
 display: inline;
 z-index: 3000;
}
#icones img {
 opacity: 0.4;
 -moz-opacity: 0.4;
 -webkit-opacity: 0.4;
 -o-opacity: 0.4;
 transition: opacity .5s;
 -moz-transition: opacity .5s;
 -webkit-transition: opacity .5s;
 -o-transition: opacity .5s;
}
#icones img:hover {
 opacity: 1.0;
 -moz-opacity: 1.0;
 -webkit-opacity: 1.0;
 -o-opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='social'>
   <div id='icones'>
      <ul>
         <li><a target="_blank" href='https://www.facebook.com/liguetaxioficial/'><img src='http://3.bp.blogspot.com/-QB4FB1v8Cj0/UTSmz9SfS5I/AAAAAAAADAQ/jjT_x1C_tPI/s1600/facebook.png' /></a></li>
         <li><a target="_blank" href='https://twitter.com/ligue_taxi'><img src='http://4.bp.blogspot.com/--pmEEnGL4p4/UTSm05Kp7UI/AAAAAAAADAw/Y5N73wRbT-c/s1600/twitter.png' /></a></li>
         <li><a target="_blank" href='https://www.youtube.com/channel/UCa_5VkCzb7RnzfR-DwdnFJA'><img src='http://4.bp.blogspot.com/-8RHhZ1c7fyg/UTSm1Nlmz_I/AAAAAAAADA4/XU1Kl8h0gpE/s1600/youtube.png' /></a></li>
         <li><a target="_blank" href='https://plus.google.com/102651165974266913449'><img src='img/GMais.png' width="62" height="78" /></a></li>
         <li><a target="_blank"href='https://liguetaxi.wordpress.com/'><img src='img/WPress.png'  width="62" height="78" /></a></li>
     </ul>
   </div>
</div>