20210708

choigyeongshin·2021년 7월 8일

학습한 내용

복잡하거나 빈번하게 사용되는 효과 :https://animate.style/
codepan.io 에서 animation (hover) 검색

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

Delay classes

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

Slow, slower, fast, and Faster classes

<div class="animate__animated animate__bounce animate__faster">Example</div>

Repeating classes

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

학습내용 중 어려웠던 점

오늘은 이미 만들어놓은 애니메이션 효과들을 사용할 수 있는 사이트들을 참조하는 방법을 배워서 특별히 어려웠던 점은 없었지만 전에 배웠던 것에 적용하는 것이 익숙지않다.

해결방법

사이트에서 내가 필요한 기능들을 찾아보고 사이트에서 가져와서 적용해봄

학습소감

어려운 모션들을 내가 직접 만드는것이 아니라 이미 만들어 놓은 수많은 animation 동작들이 있다는것이 신기했고 그 중에서 내가 필요한 것을 잘 선택할 수 있는 능력도 필요하다고 느꼈다.

0개의 댓글