HTML/CSS 메뉴 애니메이션 transform: translateX 활용했음

• 웹사이트의 메뉴를 만들 때, HTML과 CSS를 이용하여 애니메이션 효과를 줄 수 있다.

• HTML에서는 메뉴 박스 안에 ul 리스트를 만들고, 그 안에 li 항목을 넣어준다. CSS에서는 keyframes를 이용해 애니메이션 동작을 설정한다.

• translateX는 X좌표를 지정해주는 것으로 좌우 이동을 의미하며, skew는 글씨를 기울여주는 것이다. 이 두 가지를 이용해 메뉴의 움직임을 구현한다.

• keyframes로 만든 애니메이션 함수는 animation-name으로 호출하며, duration은 애니메이션 동작 시간을, fill-mode: forwards는 마우스를 올리는 동안 애니메이션이 종료되지 않도록 설정한다.