8. Creating Cool CSS Animations

 

 

한 가지 문제가 발생했는데 

로고에 hover를 하는 순간 무한 루프에 빠져 우다다다다 하는 애니메이션 오류가 발생한 것 이 경우에는 박스에 hover 효과를 줬을 때 .logo가 움직이도록 작성해야 한다.

.logo-box:hover .logo {
  animation: moveInLeft 1s ease-out;
  backface-visibility: hidden;
}

 

로딩될 때 글자가 오른쪽 / 왼쪽에서 날라오면서 글자 투명도가 달라지는 효과를 적용할 수 있게 되었다!