Trying to make this animation look smoother
I am trying to make the boat look smoother with keyframes animations
img {
width: 10rem;
filter: grayscale(1) invert(1);
overflow: clip;
animation: upanddown 1s infinite;
@keyframes upanddown {
0% {
transform: rotateZ(-6deg);
}
25% {
transform: rotateZ(-3deg);
}
50% {
transform: rotateZ(0deg);
}
75% {
transform: rotateZ(3deg);
}
100% {
transform: rotateZ(6deg);
}
}
} img {
width: 10rem;
filter: grayscale(1) invert(1);
overflow: clip;
animation: upanddown 1s infinite;
@keyframes upanddown {
0% {
transform: rotateZ(-6deg);
}
25% {
transform: rotateZ(-3deg);
}
50% {
transform: rotateZ(0deg);
}
75% {
transform: rotateZ(3deg);
}
100% {
transform: rotateZ(6deg);
}
}
}
