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•7mo ago

try adding both in the animation definition

althepal78OP•7mo ago

? where would you put the word both at?

Jochem•7mo ago

animation: upanddown 1s infinite both;

althepal78OP•7mo ago

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

Jochem•7mo 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•7mo 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•7mo 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•7mo 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•7mo 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•7mo 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•7mo ago

🙂

Jochem•7mo ago

very cool!

althepal78OP•7mo ago

Thanks a lot 😉

Mannix•7mo ago

:thumbup:

Gaming

Programming

Trying to make this animation look smoother

Did you find this page helpful?