[오늘의 학습] 211115

[오늘의 학습] 211115

CSS

:hover 연습

:hover시 animation, transform 적용

버튼 요소를 ':hover' 했을 때, 버튼 요소 전체가 변화하는 것이 아니라 자식 요소인 로고 이미지만 움직일 수 있게 만들어 보았다.

코드 확인

구글 계정으로 로그인

/* CSS */ @keyframes moving { from { transform: translate(-3px, -50%); } to { transform: translate(3px, -50%); } } button:hover > img { animation-name: moving; animation-duration: 0.3s; animation-iteration-count: infinite; animation-direction: alternate; }

설명

CSS 선택자 작성 방식 : '>'를 사용하여 button 태그가 ':hover' 됐을 경우 자식요소인 img 태그가 이하의 속성들이 작동하는 상황을 만들었다.

animation-name : animation의 중간 상태를 나타내기 위해 @keyframes 규칙과 함께 활용하여 animation의 이름을 지정

'moving' 규칙 처음 시점 : y축은 유지한 채 x축으로 -3px 이동한 상태에서 시작 끝나는 시점 : y축은 유지한 채 x축으로 3px 이동하여 상태 종료

animation-duration : animation의 지속시간 설정 0.3초로 설정

animation-iteration-count : animation 반복 횟수 설정 infinite(무한) 반복 설정

animaiton-direction : animation의 지속시간이 끝난 후 돌아갈 방향을 설정 지속시간 0.3초 이후 반대로 돌아가게 설정(alternate)

정리

':hover'된 요소 외에 다른 요소에 변화를 줄 수 있다.

animation을 잘 활용한다면 자바스크립트를 이용하지 않고, 다양한 변화를 나타낼 수 있다.

from http://kgc9175.tistory.com/43 by ccl(A) rewrite - 2021-11-16 00:01:42