CSS Animation

CSS Animation example.

by cssplus

HTML

<div id="paul">
    <img class="arm" src="http://css-plus.com/examples/2012/06/animation/img/paul-arm.png" />
</div>

CSS

#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); }
}