09장 마을 애니메이션 제작하기

Iris·2021년 12월 12일
0
post-thumbnail

📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021

각 요소에 적용할 키프레임 설정하기

/* 태양이 회전하는 키프레임 */
@keyframes sun {
  0% {
    opacity: 0;
    transform: rotate(-90deg);
  }
  25% {
    opacity: 1;
    transform: rotate(-30deg);
  }
  50% {
    opacity: 1;
    transform: rotate(30deg);
  }
  75% {
    opacity: 0;
    transform: rotate(90deg);
  }
  100% {
    opacity: 0;
    transform: rotate(-90deg);
  }
}

/* 사람과 구름을 오른쪽으로 이동시키는 키프레임 */
@keyframes flow {
  0% {
    left: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 90%;
    opacity: 0;
  }
}

각 요소에 애니메이션으로 키프레임 불러오기

section .sky .sun {
  ...
  animation: sun linear 20s infinite;
}

section .sky .cloud1 {
  ...
  animation: flow linear 10s infinite;
}

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

JavaScript 이벤트 핸들러를 사용하지 않고, 기본 HTML과 CSS의 animation 속성을 사용하여 UI 모션을 만드는 방법을 학습했다. 키프레임을 설정하고 하나씩 호출하며 애니메이션이 적용되는 것을 확인했다.

profile
👩🏻‍💻 Web Front-end Developer

0개의 댓글