애니메이션 활용
animation-direction
과 animation-iteration-count
animation-direction
은 애니메이션의 재생 방향을 정합니다. HTML 요소를 바람개비처럼 한 방향으로만 돌아가도록 하거나, 왔다 갔다 반복하도록 표현할 수 있습니다.
CSS 코드 예시:
CSS
div {
animation-direction: alternate; /* 애니메이션을 왔다 갔다 반복 */
animation-iteration-count: infinite; /* 애니메이션을 무한 반복 */
}
alternate
는 애니메이션을 한 번 재생한 뒤, 역방향으로도 재생합니다. infinite
는 애니메이션을 무한 반복합니다.
사용자와 소통하는 애니메이션
:hover
와 애니메이션 조합하기
:hover
는 마우스가 요소 위에 올라갔을 때 스타일을 정의합니다. 이를 애니메이션과 조합하면 사용자의 동작에 반응하는 동적인 웹페이지를 만들 수 있습니다.
예시:
CSS
.animated-div:hover {
background-color: red; /* 마우스를 올렸을 때 배경색이 빨간색으 로 바뀜 */
animation-name: bounce; /* 마우스를 올렸을 때 바운스 효과 */
animation-duration: 1s; /* 1초 동안 */
transform: scale(1.05); /* 마우스를 올렸을 때 약간 확대되는 효과 */
cursor: pointer; /* 마우스를 올렸을 때 커서가 손가락 모양으로 바뀜 */
}
이렇게 하면 사용자가 div
위로 마우스를 올려야 애니메이션이 시작됩니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!