<div id="paul"> <img class="arm" src="http://css-plus.com/examples/2012/06/animation/img/paul-arm.png" /> </div>
#paul { background: url(http://css-plus.com/examples/2012/06/animation/img/paul-bg.jpg) no-repeat left top; height: 450px; margin: 0 auto; overflow: hidden; width: 600px; position: relative; } .arm { position: absolute; right: 40px; bottom: -90px; -webkit-animation: pumping-iron 2s ease-out alternate infinite; -moz-animation: pumping-iron 2s ease-out alternate infinite; -ms-animation: pumping-iron 2s ease-out alternate infinite; -o-animation: pumping-iron 2s ease-out alternate infinite; animation: pumping-iron 2s ease-out alternate infinite; } @-webkit-keyframes pumping-iron { from { bottom: -90px; right: -40px; -webkit-transform: rotate(20deg); } to { bottom: -20px; right: 70px; -webkit-transform: rotate(-20deg); } } @-moz-keyframes pumping-iron { from { bottom: -90px; right: -40px; -moz-transform: rotate(20deg); } to { bottom: -90px; right: 70px; -moz-transform: rotate(-20deg); } } @-ms-keyframes pumping-iron { from { bottom: -90px; right: -40px; -ms-transform: rotate(20deg); } to { bottom: -90px; right: 70px; -ms-transform: rotate(-20deg); } } @-o-keyframes pumping-iron { from { bottom: -90px; right: -40px; -o-transform: rotate(20deg); } to { bottom: -90px; right: 70px; -o-transform: rotate(-20deg); } } @keyframes pumping-iron { from { bottom: -90px; right: -40px; transform: rotate(20deg); } to { bottom: -90px; right: 70px; transform: rotate(-20deg); } }