animation to make List Items, "LI", float to the top like a bubble

Where could I look up lessons to do this or does anyone know how could this be done easy or easier

5 Replies

I almost got what I wanted with chatgpt and keyframes I did most of the coding except for keyframes

Shiukd you still need help, if you post the relevant code in a codepen, the helpers would be more inclined and more able to help out. Otherwise they are just guessing at what you have a d what you're going for. Thanks !

althepal78OP•8mo ago

Yeah I don't know why I didn't think of that I was more thinking if there was something simple like a framework I could use that could make this happen the code would be simple like a div with nav and ul with like 3 lis an the li would go to the top so far this is what I got and this is my site

althepal78OP•8mo ago

https://fishingwithdummies.site/

Fishing With Dummies

I, ALTHEPAL78, am relearning how to fish after many years. I used to fish with my father but haven't done so since childhood. Starting from scratch, I've been learning from various online channels, though none are local to Spring Hill, Florida. I'll be fishing around Clearwater, possibly Saint Petersburg, and Tampa. My boat is an old cruiser, no...

althepal78OP•7mo ago

@media (width > 650px) {
  header {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    nav {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      gap: 0 10rem;
      .logo {
        padding-left: 3rem;
        #logo {
          width: 10rem;
          filter: grayscale(1) invert(1);
          transition: all 0.5s ease-in-out;

          &:hover {
            filter: grayscale(0) invert(0) drop-shadow(8px 8px 12px #9d2d35);
          }
        }
      }
      .toggle-links {
        display: none;
      }
      .nav-links {
        display: flex;
        gap: 1rem;
        padding: 0 1rem;
        margin-right: 2rem;
        .link-item {
          background-color: rgba(173, 216, 230, 0.4);
          border-radius: 30px;

          &:hover {
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 30px;
          }

          a {
            width: clamp(0.9rem, 2vw, 2rem);
            color: white;
            font-size: clamp(.5rem, 4vw, 2.5rem);
            padding: 0 1rem;
            height: 1rem;
            position: relative;
            width: 100%;

            animation: floatUp;
            transition: all 0.5s ease-in-out;

            &:hover {
              color: rgb(179, 35, 52);
            }

            &::before,
            &::after {
              content: "";
              position: absolute;
              height: 10px;
              width: 10px;
              background-color: hsla(0, 0%, 2%, 0.2);
              border-radius: 100%;
            }

            &::before {
              top: 0px;
              left: 18px;
            }
            &::after {
              bottom: 0px;
              right: 20px;
            }

            @keyframes floatUp {
              0% {
                transform: translateY(0);
              }
              100% {
                transform: translateY(100%);
              } }}
        }
      }
    }
  }
}

@media (width > 650px) {
  header {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    nav {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      gap: 0 10rem;
      .logo {
        padding-left: 3rem;
        #logo {
          width: 10rem;
          filter: grayscale(1) invert(1);
          transition: all 0.5s ease-in-out;

          &:hover {
            filter: grayscale(0) invert(0) drop-shadow(8px 8px 12px #9d2d35);
          }
        }
      }
      .toggle-links {
        display: none;
      }
      .nav-links {
        display: flex;
        gap: 1rem;
        padding: 0 1rem;
        margin-right: 2rem;
        .link-item {
          background-color: rgba(173, 216, 230, 0.4);
          border-radius: 30px;

          &:hover {
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 30px;
          }

          a {
            width: clamp(0.9rem, 2vw, 2rem);
            color: white;
            font-size: clamp(.5rem, 4vw, 2.5rem);
            padding: 0 1rem;
            height: 1rem;
            position: relative;
            width: 100%;

            animation: floatUp;
            transition: all 0.5s ease-in-out;

            &:hover {
              color: rgb(179, 35, 52);
            }

            &::before,
            &::after {
              content: "";
              position: absolute;
              height: 10px;
              width: 10px;
              background-color: hsla(0, 0%, 2%, 0.2);
              border-radius: 100%;
            }

            &::before {
              top: 0px;
              left: 18px;
            }
            &::after {
              bottom: 0px;
              right: 20px;
            }

            @keyframes floatUp {
              0% {
                transform: translateY(0);
              }
              100% {
                transform: translateY(100%);
              } }}
        }
      }
    }
  }
}

I had to delete some spaces to make this fit Additionally I would like to make the site look like when it opens the about home and video section looks like it rolls up and then unrolls when at that spot

Gaming

Programming

animation to make List Items, "LI", float to the top like a bubble