CSS Swing Effect Code

 <style>
.swing {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
.swing img {
    border: 5px solid #f8f8f8;
    display: block;
}
.swing:after{
    content: '';
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
.swing:before{
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
</style>

<figure class="swing">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa,_by_Leonardo_da_Vinci,_from_C2RMF_retouched.jpg/687px-Mona_Lisa,_by_Leonardo_da_Vinci,_from_C2RMF_retouched.jpg" width="200" />
</figure>
preview of CSS swing effect - click here

Simple Swing Notification Bell
CSS Code

    <style>
    .swing {
        animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center -20px;
        float:left;
    }
    .swing:after{
        position: absolute;  
        top: -10px; left: 50%;
        transform: rotate(45deg);
    }
    /* nail */
    .swing:before{
        position: absolute;
        top: -14px;left: 54%;
    }
     
    @keyframes swing {
        0% { transform: rotate(3deg); }
        100% { transform: rotate(-3deg); }
    }
    </style>

HTML Code:

    <figure class="swing">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2tDhZoiT-JheIOOXZ1ODOn75fBlgP7JtefOSBreUHiALTOQNWJwL_Wr1juq5Qq0sQfuHZVxeWWMfgVONEjyzhJ-DgzNi6tzfmiIf4IJgirGgCIhg-yh92TlEgSyFvjZmVjpVaA1Vv0Yk/s232/free-resume-template-follow-button.png" width="50" />
    </figure>

Live Preview