Animated Swinging Tag

image

by pphheerroonn

HTML

<img class="swing" style="transform-origin: 55px 16px;" src="https://www.compub.com/media/wysiwyg/Basics/tagonly.png" width="180" >
  
  <!--http://fiddle.jshell.net/pphheerroonn/9a0fzwe5/11/show/light/-->

CSS

img.swing {
  margin-top:-40px;
  margin-left: 50px;
}
.swing {
    animation: swing ease-in-out 3s infinite alternate;
}
img.swing:hover{
   animation: swing ease-in-out 1s infinite alternate; 
}

@keyframes swing {
    0% { transform: rotate(13deg); }
    100% { transform: rotate(1deg); }
}