Div не выравнивается должным образом, когда анимация запущена

Я пытаюсь добиться звона звонка. Я полностью сделал образец колокола, используя чистый css. Когда я устанавливаю свойство анимации-задержки классу .bell, мой внутренний div кажется скрытым или неуместным. Это видно только после завершения анимации. Более лучшее понимание я приложил код ниже, пожалуйста, обратитесь.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. Запустите скрипт, чтобы воспроизвести ошибку.

источник

2016-09-28 Santhosh Kumar

Его видно в вашем fiddle.I've проверяется как хром и FF. – vivek

@vivek Я редактировал свой блог с прикрепленным изображением, как он появится, когда начинается анимация –

, но он отлично работает в скрипте и фрагменте кода. – vivek

Я только что дал z-index: 999.bell div, и он решил проблему.

Это похоже на ошибку с хромом. firefox и IE, он работает нормально.

Вначале div находится в правильном положении. все, что я сделал, это принести div спереди, используя 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>

источник

2016-09-28 04:50:03

замечательно, но у вас есть идея, почему это работает –

Я не знаю точно, что div находится в правильной позиции изначально, мне просто нужно перенести его, используя Z-индекс. Может быть хром ошибка –

Div не выравнивается должным образом, когда анимация запущена

ответ

Смежные вопросы