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://1.bp.blogspot.com/-WW-2jVqOHho/YIR1v0BMnLI/AAAAAAAAJRQ/rcr2OMLAssAcpedcdQPujqZNtpuuG74TwCLcBGAsYHQ/s232/free-resume-template-follow-button.png" width="50" />
</figure>

Live Preview