My goal is to create a subtle bobbing effect for an image, but I'm facing issues with the animation not easing as expected. The intention is for the animation to ease at both the top and bottom of the movement, but currently, it only eases at the bottom. What could be causing this discrepancy?
img {
display: inline-block;
margin-right: 16px;
margin-top: 10vh;
height: 90vh;
width: auto;
animation: floaty;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-duration: 1s;
}
@keyframes floaty {
0% {margin-top: 10vh;}
to {margin-top: 14vh;}
}