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