アニメーションの実行中にDivが正しく配置されていない

Question

私はベルの鳴動のアニメーションを達成しようとしています。私は純粋なCSSを使って完全に似たようなサンプルを作りました。アニメーション遅延プロパティを.bellクラスに設定すると、内側のdivが隠れているか間違っているようです。アニメーションが終了した後にのみ表示されます。より良い理解私は以下のコードを参照してください添付している。

.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>

またfiddleを参照してください。バグを再現するためにフィドルを実行してください。

Answer 1

私はちょうどz-index: 999を.bell divに渡して、問題を解決しました。

クロムのバグのようです。 FirefoxとIEは正常に動作しています。

divは最初は正しい位置にあります。私がしたのは、Zインデックスを使ってdivを前面に持ってくることでした。

.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>