Does anyone have any idea how I can go up and down? For example: Scroll down the icon for 5 seconds and in the sequence it goes up and a few seconds later it goes down and stay 5 seconds and climb again.
#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>