CODEWITHSUNDEEP
csscss-animations
Santhosh Kumar
Santhosh Kumar

Reputation: 1732

Div is not aligned properly when animation is running

enter image description hereI'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.

Upvotes: 3

Views: 60

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9416

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>

Upvotes: 2

Related Questions