How do I run this animation when hovering over an element? - css

Question

I'm currently trying to make it so when you hover over this div, it slowly expands outward from the side of the page. I realize I can just set a new position when hovering, but it doesn't slowly pull out from the side. My code is probably flawed majorly but I'm not entirely sure how to fix it. Any help would be great. Thank you!
#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

Your syntax is incorrect. In order to apply the animation to the element on hover, change the animation property rather than adding the #keyframes declaration like you were doing.
In addition, you were animating from margin-left to margin-right, which probably isn't what you want. Here is an updated example animating the margin-left property. I also used the animation shorthand to condense the code as well.
You will probably also want to change the animation-fill-mode property value to forwards as well so that the final keyframe is maintained when the animation ends:
#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>
As a side note, a transition may also work better since your animation won't reverse when hovering off of it. Here is a similar example using CSS3 transitions:
#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>

Answer 2

Try adding values to margin-left and margin-right for both. And take the #keyframes out. It works like magic. See below.
#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>