Div is not aligned properly when animation is running - css

Question

I'm trying to achieve an bell ringing animation. I have completely made a bell alike sample using pure css. When i set animation-delay property to .bell class my inner div seems to be hidden or misplaced. It's visible only after the animation is over. More better understanding i have attached the code below please refer.
.bell{
position: relative;
height: 20px;
width: 18px;
border-radius: 50% 50% 0 0;
background: #6d6d6d;
float: left;
margin-right: 10px;
margin-top: 5px;
animation: swinging .3s linear alternate;
animation-delay:2s
}
.bell div{
position: absolute;
bottom: 0;
height: 3px;
width: 120%;
background: #6d6d6d;
left: -2px;
content:'';
}
.bell:before {
content: '';
position: absolute;
top: -4px;
border: 2px solid #6d6d6d;
height: 3px;
width: 3px;
border-radius: 50% 50% 0 0;
left: 5px;
transform-origin: 50% 0;
}
.bell:after {
content: '';
position: absolute;
background: #6d6d6d;
bottom: -6px;
height: 4px;
width: 8px;
border-radius: 0 0 7px 7px;
left: 5px;
animation: swinging .6s linear infinite alternate;
transform-origin: 50% 0;
}
#keyframes swinging{
0%{transform: rotate(10deg) translateX(-2px)}
100%{transform: rotate(-10deg) translateX(2px)}
}
<div class="bell">
<div>
</div>
</div>
Also refer the fiddle. Run the fiddle to reproduce the bug.

Answer 1

I just gave z-index: 999 to the .bell div and it solved the issue.
It's looks like a bug with the chrome. firefox and IE, it's working fine.
The div is initially at the right position. all I did is to bring the div in front using z-index.
.bell{
position: relative;
height: 20px;
width: 18px;
border-radius: 50% 50% 0 0;
background: #6d6d6d;
float: left;
margin-right: 10px;
margin-top: 5px;
animation: swinging .3s linear alternate;
animation-delay:2s
}
.bell div{
position: absolute;
bottom: 0;
height: 3px;
width: 120%;
background: #6d6d6d;
left: -2px;
content:'';
z-index: 999; // increase the z-index
}
.bell:before {
content: '';
position: absolute;
top: -4px;
border: 2px solid #6d6d6d;
height: 3px;
width: 3px;
border-radius: 50% 50% 0 0;
left: 5px;
transform-origin: 50% 0;
}
.bell:after {
content: '';
position: absolute;
background: #6d6d6d;
bottom: -6px;
height: 4px;
width: 8px;
border-radius: 0 0 7px 7px;
left: 5px;
animation: swinging .6s linear infinite alternate;
transform-origin: 50% 0;
}
#keyframes swinging{
0%{transform: rotate(10deg) translateX(-2px)}
100%{transform: rotate(-10deg) translateX(2px)}
}
<div class="bell">
<div>
</div>
</div>