<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="social-media pendulumMovement"> <img alt="" src="http://arnavsingh.co.in/work/seoheights/new/html/images/fb-hanging-icon.png"> </div>

.pendulumMovement { position:relative; width:100%; max-width:1300px; top:0; left:50%; height:100%; margin-left:-650px; } .pendulumMovement > img { position:absolute; top:-160px; /*left:50px;*/ -webkit-animation:animatedFactors 5s ease-in-out infinite; animation:animatedFactors 5s ease-in-out infinite; } .pendulumMovement > img { top:46px; } @-moz-keyframes animatedFactors { 0% { transform-origin:50% 0; transform:rotateZ(20deg); } 50% { transform-origin:50% 0; transform:rotateZ(-20deg); } 100%{ transform-origin:50% 0; transform:rotateZ(20deg); } } /* @-webkit-keyframes animatedFactors { 0% { transform-origin:50% 0; transform:rotateZ(20deg); } 50% { transform-origin:50% 0; transform:rotateZ(-20deg); } 100%{ transform-origin:50% 0; transform:rotateZ(20deg); } } @-o-keyframes animatedFactors { 0% { transform-origin:50% 0; transform:rotateZ(20deg); } 50% { transform-origin:50% 0; transform:rotateZ(-20deg); } 100%{ transform-origin:50% 0; transform:rotateZ(20deg); } } @keyframes animatedFactors { 0% { transform-origin:50% 0; transform:rotateZ(20deg); } 50% { transform-origin:50% 0; transform:rotateZ(-20deg); } 100%{ transform-origin:50% 0; transform:rotateZ(20deg); } } */