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);
            }
          }
        }

14 Replies

Jochem•5mo ago

try adding both in the animation definition

althepal78OP•5mo ago

? where would you put the word both at?

Jochem•5mo ago

animation: upanddown 1s infinite both;

althepal78OP•5mo ago

oh okay let me check that out, this is new to me animations and this word lol

Jochem•5mo ago

also, it looks like you're just linearly animating from -6 to +6 degrees, you don't need a keyframed animation for that

Mannix•5mo ago

  @keyframes upanddown {
    0% {
      transform: rotateZ(-6deg);
    }
    50%{
      transform: rotateZ(6deg);
    }

    100% {
      transform: rotateZ(-6deg);
    }
  }

  @keyframes upanddown {
    0% {
      transform: rotateZ(-6deg);
    }
    50%{
      transform: rotateZ(6deg);
    }

    100% {
      transform: rotateZ(-6deg);
    }
  }

is that the animation you are after?

Jochem•5mo ago

(or you could just do this)

          @keyframes upanddown {
            0% {
              transform: rotateZ(-6deg);
            }
            100% {
              transform: rotateZ(6deg);
            }
          }

          @keyframes upanddown {
            0% {
              transform: rotateZ(-6deg);
            }
            100% {
              transform: rotateZ(6deg);
            }
          }

this works too! though you'll have to double the duration

althepal78OP•5mo ago

all right let me see I don't know this animation business I will try the last one would I put both on it still?

Jochem•5mo ago

this one won't change the original animation at all, you just don't need to manually insert the intermediate steps. And yeah, both should still work on that one

althepal78OP•5mo ago

I originally had it from to The one with -6 6 -6 works well I had to change it to 6 -6 6 to make it look better but thank you 🙂

althepal78OP•5mo ago

🙂

Jochem•5mo ago

very cool!

althepal78OP•5mo ago

Thanks a lot 😉

Mannix•5mo ago

:thumbup:

Gaming

Programming

Trying to make this animation look smoother