[오늘의 학습] 211115

CSS

:hover 연습

:hover시 animation, transform 적용

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

 

코드 확인

<!-- HTML -->
<button type="button">
  <img src="#" alt="google logo">
  구글 계정으로 로그인
</button>

/* 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을 잘 활용한다면 자바스크립트를 이용하지 않고, 다양한 변화를 나타낼 수 있다.