Edit in JSFiddle

<div></div>

div { 
    width: 120px;
    height: 120px;
    background: red;
    position: relative;
    animation: all 2s infinite; 
    -moz-animation: all 2s infinite; /* Firefox */
    -webkit-animation: all 2s infinite; /* Webkit */ 
}

@keyframes swing {
    0%, 100% {left: 0px; top: 0px; opacity: 1; transform: rotate(0deg) scaleX(1) scaleY(1);}
    20% {transform: rotate(15deg);}
    40% {transform: rotate(-10deg);}
    60% {transform: rotate(5deg);}
    80% {transform: rotate(-5deg);}
}

@-moz-keyframes swing {
    0%, 100% {left: 0px; top: 0px; opacity: 1; transform: rotate(0deg) scaleX(1) scaleY(1);}
    20% {transform: rotate(15deg);}
    40% {transform: rotate(-10deg);}
    60% {transform: rotate(5deg);}
    80% {transform: rotate(-5deg);}
}

@-webkit-keyframes swing {
    0%, 100% {left: 0px; top: 0px; opacity: 1; transform: rotate(0deg) scaleX(1) scaleY(1);}
    20% {transform: rotate(15deg);}
    40% {transform: rotate(-10deg);}
    60% {transform: rotate(5deg);}
    80% {transform: rotate(-5deg);}
}

div:hover { 
    animation: swing 1s ease; 
    animation-iteration-count: infinite; 
    -moz-animation: swing 1s ease; 
    -moz-animation-iteration-count: infinite;
    -webkit-animation: swing 1s ease;
    -webkit-animation-iteration-count: infinite;
}