3. infinite 옵션과, from, to 를 이용해 빙빙 돌아가는 할일 만들기

컴포넌트

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

const Todos = () => {
  return (
    <div className={styles.maindiv}>
      <h1 className={styles.rotation}> 할일</h1>
    </div>
  );
};
export default Todos;

 

css

.maindiv {
  height: 3rem;
  width: 5rem;
}
.rotation {
  font-size: 2rem;
  text-align: center;
  animation: rotation infinite 500ms linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

하핫