[베이직 포트폴리오] 순서대로 통통튀어오르는 이미지

이미지가 통통 튀어 오른다

 js 없이 css keyframes으로 구현

  <section id="projectsSection" class="section-content">
      <div class="project-container">
          <p class="project-title">V-UP</p>

          <div class="project-detail">
            <p class="project-content">음악과 커뮤니티를 결합한 서비스입니다</p>
            <ul class="project-tech"></ul>

            <a
              class="visit-btn"
              href="https://re-v-up-ver-3.vercel.app/"
              target="_blank"
              >Visit Project</a
            >
          </div> 
        </div> 
      </section>

.project-container {
  width: 70%;
  height: 40vh;
  padding: 1%;
  display: flex;
  flex-direction: row;
  animation: flightProject 2s ease-in-out;
  box-shadow: 1px 1px 20px #fff500;
  border: 1px solid #fff500;
  justify-content: center;
  align-items: center;

  .project-title {
    width: 25%;
    font-size: 4vw;
  }
  .project-content {
    font-size: 2vw;
  }
  .project-detail {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0vh;
    justify-content: space-around;
  }

  .project-tech {
    width: 70%;
    height: 40%;
    display: flex;
    align-items: center;
    gap: 1vw;

    li {
      -webkit-font-smoothing: antialiased;
      position: relative;
      top: 1vh;
      display: inline-block;
      border-radius: 10px;
      list-style: none;
      animation: bounce 0.4s 0.5s ease infinite alternate;

      img {
        width: 70px;
        height: 70px;
        border-radius: 5px;
      }
    }
  }
  .visit-btn {
    width: 70%;
    padding: 1vw;
    text-align: center;
    text-decoration: none;
    // background-color: #3d3a00;
    // box-shadow: 1px 1px 20px #fff500;
    // border: 1px solid #fff500;
    color: #15d200;
    border-radius: 5px;
    font-size: 1.5vw;
  }

  .visit-btn:hover {
    color: #15d200;
    background-color: #ede700;
    box-shadow: 1px 1px 20px #fff500;
  }

  .project-tech li:nth-child(2) {
    animation-delay: 0.1s;
  }
  .project-tech li:nth-child(3) {
    animation-delay: 0.2s;
  }
  .project-tech li:nth-child(4) {
    animation-delay: 0.3s;
  }
  .project-tech li:nth-child(5) {
    animation-delay: 0.4s;
  }
  .project-tech li:nth-child(6) {
    animation-delay: 0.5s;
  }
  .project-tech li:nth-child(7) {
    animation-delay: 0.6s;
  }

  @keyframes bounce {
    0% {
      top: 0;
    }
    100% {
      top: -20px;
    }
  }
}
@keyframes flightProject {
  0% {
    transform: translateY(0vw);
  }
  100% {
    transform: translateY(0);
  }
}

const container = document.querySelector(".project-tech");

const vUPImages = [
  { src: "/img/icons/next.png", alt: "Next.js" },
  { src: "/img/icons/js.png", alt: "JavaScript" },
  { src: "/img/icons/ts.png", alt: "Typescript" },
  { src: "/img/icons/redux.png", alt: "Redux" },
  { src: "/img/icons/zustand.png", alt: "Zustand" },
  { src: "/img/icons/query.png", alt: "TanStack-Query" },
  { src: "/img/icons/tailwind.png", alt: "Tailwind css" },
  { src: "/img/icons/supa.png", alt: "supabase" },
];

vUPImages.forEach((image) => {
  const li = document.createElement("li");
  const img = document.createElement("img");
  img.src = image.src;
  img.alt = image.alt;
  li.appendChild(img);
  container.appendChild(li);
});

---

참고 블로그

https://wsss.tistory.com/1851

바로 수정해서 쓸 수 있는 텍스트 애니메이션 모음