본문으로 건너뛰기
실습하기

애니메이션 활용

animation-direction과 animation-iteration-count​

animation-direction은 애니메이션의 재생 방향을 정합니다.

HTML 요소를 바람개비처럼 한 방향으로만 돌아가도록 하거나, 왔다 갔다 반복하도록 표현할 수 있습니다.

CSS 코드 예시
div {
  animation-direction: alternate; /* 애니메이션을 왔다 갔다 반복 */
  animation-iteration-count: infinite; /* 애니메이션을 무한 반복 */
}

alternate는 애니메이션을 한 번 재생한 뒤, 역방향으로도 재생합니다.

infinite는 애니메이션을 무한 반복합니다.


:hover와 애니메이션 조합하기​

:hover는 마우스가 요소 위에 올라갔을 때 스타일을 정의합니다.

이를 애니메이션과 조합하면 사용자의 동작에 반응하는 동적인 웹페이지를 만들 수 있습니다.

CSS 코드 예시
.animated-div:hover {
  /* 마우스를 올렸을 때 배경색이 빨간색으로 바뀜 */
  background-color: red;
  /* 마우스를 올렸을 때 바운스 효과 */
  animation-name: bounce;
  /* 1초 동안 */
  animation-duration: 1s;
  /* 마우스를 올렸을 때 약간 확대되는 효과 */
  transform: scale(1.05);
  /* 마우스를 올렸을 때 커서가 손가락 모양으로 바뀜 */
  cursor: pointer;
}

이렇게 하면 사용자가 div 위로 마우스를 올려야 애니메이션이 시작됩니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!