Как запустить эту анимацию при зависании элемента?

Question

В настоящее время я пытаюсь это сделать, когда вы наводите курсор на этот div, он медленно расширяется наружу со стороны страницы. Я понимаю, что могу просто установить новую позицию при паре, но она медленно не вытягивается сбоку. Мой код, вероятно, сильно испорчен, но я не совсем уверен, как его исправить. Любая помощь будет большой. Спасибо!

#bod { 
 
    background-color: red; 
 
    height: 100px; 
 
    width: 200px; 
 
    border: 2px solid black; 
 
    border-top-right-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    margin-left: -90px; 
 
    float: left; 
 
    animation-name: moves; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
} 
 
#bod:hover { 
 
    cursor: pointer; 
 
    @keyframes moves { 
 
    from { 
 
     margin-left: -90px; 
 
    } 
 
    to { 
 
     margin-right: -10px; 
 
    } 
 
    } 
 
}

<h1>Test</h1> 
 
<div id="bod"></div>

Answer 1

Попробуйте добавить значения margin-left и margin-right для обоих. И возьмите @keyframes. Он работает как магия. Смотри ниже.

#bod { 
 
    background-color: red; 
 
    height: 100px; 
 
    width: 200px; 
 
    border: 2px solid black; 
 
    border-top-right-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    margin-left: -90px; 
 
    float: left; 
 
    animation-name: moves; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
} 
 
#bod:hover { 
 
    cursor: pointer; 
 
    animation: moves; 
 
} 
 

 
@keyframes moves { 
 
    from { 
 
    margin-left: -90px; 
 
    margin-right: 0; 
 
    } 
 
    to { 
 
    margin-left: 0; 
 
    margin-right: -10px; 
 
    } 
 
}

<h1>Test</h1> 
 
<div id="bod"></div>

Answer 2

Вашего синтаксис неверен. Чтобы применить анимацию к элементу при наведении, измените свойство animation, а не добавьте объявление @keyframes, как вы делали.

Кроме того, вы оживляющий отmargin-leftкmargin-right, который, вероятно, не то, что вы хотите. Вот обновленный пример, оживляющий свойство margin-left. Я также использовал animation shorthand для уплотнения кода.

Вы, вероятно, также необходимо изменить значение форвардов animation-fill-mode property, а так, что последний ключевой кадр сохраняется, когда анимация заканчивается:

#bod { 
 
    background-color: red; 
 
    height: 100px; 
 
    width: 200px; 
 
    border: 2px solid black; 
 
    border-top-right-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    margin-left: -90px; 
 
    float: left; 
 
} 
 

 
#bod:hover { 
 
    cursor: pointer; 
 
    animation: moves 4s forwards; 
 
} 
 

 
@keyframes moves { 
 
    from { 
 
    margin-left: -90px; 
 
    } 
 
    to { 
 
    margin-left: -10px; 
 
    } 
 
}

<h1>Test</h1> 
 
<div id="bod"></div>

Как примечание стороны, переход также может работать лучше, так как ваша анимация не будет отменяться при ее зависании. Вот подобный пример, используя CSS3 переходы:

#bod { 
 
    background-color: red; 
 
    height: 100px; 
 
    width: 200px; 
 
    border: 2px solid black; 
 
    border-top-right-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    margin-left: -90px; 
 
    float: left; 
 
    transition: margin-left 4s; 
 
} 
 

 
#bod:hover { 
 
    cursor: pointer; 
 
    margin-left: -10px; 
 
}

<h1>Test</h1> 
 
<div id="bod"></div>