Hovering animation?
Replies
I'm trying to have an image hover up and down a little and have no idea how to go about it.
<3 <3
you can create the animation with this code; you can change the 5px and -5px to whatever value you want, depending on how far you want the image to move from its base position. please note that i had to add a space between the @ and the word "keyframes" because otherwise the forum will try to ping someone with that username; when pasting this into your code, remove that space.
@ keyframes hover {
0% {transform: translate3d(0px, -5px, 0px);
animation-timing-function: ease-in-out}
50% {transform: translate3d(0px, 5px, 0px);
animation-timing-function: ease-in-out}
100% {transform: translate3d(0px, -5px, 0px);
animation-timing-function: ease-in-out}
}
then you will apply this animation to the image div by adding this line to that div's css styling. you can change 3s (3 seconds) to whatever speed you want.
animation: hover 3s infinite;
let me know if anything needs more clarification. good luck!
perfect thank you!
<3 <3