7/8 animation 관련 사이트

💡 학습한 내용

오늘은 css 애니메이션과 관련된 사이트 정보에 대해 알아갈 수 있었다.

🔴 웹상에 있는 css 파일을 가져와서 사용할 수 있는 사이트 : https://animate.style/ 🔴

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

head에 웹상에 있는 css 파일을 옮기는 작업을 한다.

<div class="animate__animated animate__shakeY (이부분에 copyboard한 것을 삽입) animate__slow(이부분도 설정 가능)">Example</div>

delay classes와 같은 부분을 html에 복붙한 다음, 자신이 쓰고 싶은 항목의 copyboard를 삽입한다.

💨 이 사이트는 css에 class을 지정한 다음 지정한 클래스를 html 태그에다가 삽입하는 방식으로 css에 적용하는 것이다.
💨 반복적으로 자주 사용하는 애니메이션 효과는 연동해서 사용하면 편하다.

🟠 https://codepen.io/ -animation 검색 -다른 사람들이 만든 애니메이션효과를 볼 수 있다. 🟠

🙅🏼 학습한 내용 중 어려웠던 점 / 해결방법

오늘은 20분가량의 수업에서 참고사이트에 대한 정보가 끝이였기 때문에 어려웠던 점은 없었다.

🙋‍♀️ 해결방법

css 애니메이션을 보다 쉽게 이용할 수 있는 사이트를 알 수 있어서 좋았다. 자주 사용하는 애니메이션효과는 위 사이트를 자주 이용할 것이며 다른 사람이 만들어 놓은 css를 참고하면서 공부하면 좋을 것 같다.

좋은 웹페이지 즐겨찾기