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•4d ago

try adding both in the animation definition

althepal78•4d ago

? where would you put the word both at?

Jochem•4d ago

animation: upanddown 1s infinite both;

althepal78•4d ago

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

Jochem•4d 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•4d 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•4d 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

althepal78•4d 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•4d 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

althepal78•4d 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 🙂

althepal78•4d ago

🙂

Jochem•4d ago

very cool!

althepal78•4d ago

Thanks a lot 😉

Mannix•4d ago

:thumbup:

Gaming

Programming

Trying to make this animation look smoother