[CSS] animation : running로 컨텐츠 반복 애니메이션 구현하기

현생에 치여 살다가 흥미로운 css 개념을 알게 되어서 기능 테스트 해보고 복습할 겸 블로그를 작성해 본다.

예제를 찾다가 다락 공홈 하단에 다락 이용 후기가 생각하던 기능이어서 바로 구현해 보았는 데 animation / animation-play-state / @keyframe을 다뤄볼 수 있어서 좋았다.

---

예제 사이트 화면

서두에서도 언급했듯이 다락 메인 화면에 다락 이용 후기 UI 코드를 참고하여 애니메이션 기능을 테스트해 보았다.

나에게 딱 맞는 보관공간 찾아보기 '미니창고 다락'

 

---

구현 코드 및 실행 화면

구현하기 전에는 콘텐츠가 무한 반복 되는 기능인 줄 알았는 데 다락같은 경우에는 콘텐츠가 많다보니 무한 반복처럼 보이는 것이었다. 직접 구현해보니 한 애니메이션이 끝날 때 잠깐 끊기는 듯한 느낌이 들어서 컨텐츠가 적은 경우 수를 늘리거나 animation-direction or animation-fill-mode를 사용하면 좋을 것 같다.

 

또는

 

animation-duration과 @keyframes에 translateY()를 적절히 조절하여 컨텐츠가 끝날 때 애니메이션이 재반복되도록 하면 해결할 수 있을 것 같다.

- Animation.jsx

import styles from "./Animation.module.css";

const Animation = (props) => {
  const list = ["강아지", "고양이", "병아리", "오리", "돼지", "토끼", "사슴"];

  return (
    <div className={styles.wrap}>
      <h2>애니메이션 기능 테스트</h2>
      <br />
      <ul className={styles.listWrap}>
        {list.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
};

export default Animation;

 

- Animtaion.module.css

.wrap {
  margin: 0 20px;
}

.listWrap {
  list-style: none;
  margin: 0;
  padding: 0;

  width: fit-content;
  height: 1000px;
  background: #e9474d;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.listWrap li {
  width: 300px;
  margin: 10px;
  padding: 100px 20px;
  color: #e9474d;
  font-weight: 600;
  text-align: center;
  background: white;
  border-radius: 12px;

  animation: 100s linear 0s infinite normal forwards running rotate;
}

.listWrap:hover li {
  animation-play-state: paused;
}

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

  100% {
    transform: translateY(-2000%);
  }
}

---

애니메이션 속성 참고 블로그

CSS 애니메이션(animation) 속성 이해하기