✍🏻 이번 페이지에는 내가 사용했던 애니메이션을 작성해보려한다!!

우선 css 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션보다 이점들이 있다.

1. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.

2. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. 
   CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.

3. 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 
   예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다

► 애니메이션 사용 방법은 mdn을 참고하시길..
css 애니메이션 사용하기

🌻 Animation, @keyframes

메인페이지 사진 아래에 보면 화살표가 아래로 움직이는 애니메이션 효과를 볼수 있다.

@keyframes 규칙을 이용해 from~to키워드를 사용하여 효과를 주었다.
뭐랄까 이방법이 제일 쉽기도하고 그래서그럴까... 이페이지에 키프레임 애니메이션이 많다....나만그런가🤨 암튼 코드를 보자면!!

► html

우선 html에 아이콘을 넣고 화살표아이콘을 누르면 바로 2페이지로 넘어갈수 있게 href=#menu2도 넣어주었다.

► css

💡 여기서 ! @keyframes은 애니메이션을 재생할 각 프레임의 스타일을 정의하는 것으로 from 속성이나 0% 속성에 설정한 스타일에서 출발해 to 속성이나 100% 속성에 스타일로 점차 바뀌면서 부드럽게 애니메이션이 재생된다.

나는 0%~50%~100% 속성을 사용하여 좀더 부드럽게 설정했다. (0%와 100% 사이에는 여러 개의 중간 값(%)을 설정해 프레임 작성 가능하다) 각각 속성에 transform 효과를 주었는데 잠깐 설명하자면

✍🏻 transform : 변형효과

해당 요소 모양, 크기, 위치, 회전, 변형, 그리고 모두를 동시에 변형할 수 있다. 기준은 browser의 좌측 상단

1. translate( x축, y축 ) : x축, y축 거리만큼 이동,

2. rotate( turn | deg ) : 주어진 각도만큼 시계 or반시계 방향으로 회전,

          양수> 시계방향/음수> 반시계 방향  ex) 1 turn, 30 deg로 작성 가능

3. scale() : 주어진 배율만큼 늘리거나 줄어듦, 1 < x이면 확대, 0 <x <1이면 축소

   scaleX(), scaleY() : 해당 요소의 x축 크기를 주어진 배율만큼 확대, 축소 y도 마찬가지.

4. skew( x축, y축 ) : x축, y축으로 기울임.

   skewX() : +이면 x의 양의 축으로 기울어지고, -면 x의 음의 축으로 기울어짐.

   skewY() : +이면 y의 양의 축으로 기울어지고, -면 y의 음의 축으로 기울어짐.

5. matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

   : 6개의 매개변수로, 모든 2D 변형 method를 한 번에 설정.

6. transform-origin : 요소에 transform을 적용하는 변환을 중심으로 적용.

출처: https://saeatechnote.tistory.com/entry/css-css-animation-총정리-transition-transform-translate-animation-keyframes [새아의 테크노트]

💡💡 여기서 나는 @keyframes, transfrom : translateY 사용해줬다.

🌻 Animation, @keyframes, hover

메뉴 고정 상단바를 보면 마우스를 가져갈 때 애니메이션이 작동되는 효과를 볼수 있다. 그것이 바로 hover효과 이다. 위에 보여드렸던 애니메이션효과에서 hover효과를 추가만 했다.

hover는 여러 작성하는 방법이 있지만 이건 내가 따로 포스팅할거라 여기서는 간단하게만 적어보자면
키프레임에 애니메이션 효과를 넣고 이 효과를 사용자가 마우스를 가져갈 때만 적용하고 싶어서 사용자가 마우스를 갔다대면 2초동안 키프레임으로 적용한 색상들이 변경되면서 이것이 한번만 되는게 아니고 계속 설정되고 싶어 infinite 를 설정하여 마우스 댈 동안은 쭉~ 지속될수있게 설정해두었다.

마치며...

사실 더 많은 애니메이션이 있고 고퀄리티 애니메이션이 많지만.. 나에겐 아직 무리수였던것인가 🥲
더 많은 애니메이션을 넣고 싶었지만 여기서 그만하며.. 어서 이 페이지를 나가고 싶은 마음이 컸기에.. 헿
다음엔 더많은 믓~찐 애니메이션을 넣고 이보다 더 업데이트된 나를 볼 수있기를...!!!! ✍🏻