Animation.css
npm으로 간단히 설치가 가능하며
설치된 이후 해당 css를 CDN혹은 파일로 import 해놓으면 class 를 통해서 Animation을 이용할 수 있다.
위 사이트에서 실제로 제공되는 애니메이션 효과도 모두 확인해볼 수 있다.
간단하지만 매우 강력한 라이브러리
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
animate.style
CSS WAND
간단한 버튼 CSS와 로딩바,input 효과 예시를 볼 수 있다.
해당 사이트에서 예시를 클릭하면 바로 CSS 코드까지 볼 수 있어서
간단하게 적용이 가능하다.
CSSWAND
www.csswand.dev
AnimXYX
npm insatll 로 설치가 가능하며 데모 사이트에서 Vue.js, React 코드를 확인할 수 있다.
사용자가 css 변수의 미세 조정도 가능하고 적은코드로 애니메이션을 표현할 수 있다.
AnimXYZ
The first composable CSS animation toolkit
animxyz.com
Whirl
로딩애니메이션 뿐아니라, 커피, 충전기 등 조금 특별한 아이콘 애니메이션까지 제공을 한다.
페이지 로딩 페이지에서 조금 특별한 애니메이션을 찾는다면 확인해보도록 하자
Whirl: CSS loading animations with minimal effort!
You need to enable JavaScript to run this app. WhirlCSS loading animations with minimal effort!
whirl.netlify.app
Woah.css
단순한 애니메이션이 아니라 좀 더 역동적인 애니메이션을 찾는다면 Woah.css를 참고해보자
역동적이고 다른 곳에서 보지 못한 애니메이션 예시들을 볼 수 있다.
http://www.joerezendes.com/projects/Woah.css/
Woah.css | Joe Rezendes
www.joerezendes.com
'FrontEnd > css' 카테고리의 다른 글
| [css] 체크박스, 라디오버튼 색상 변경하기 (accent-color, 기본요소 컬러 변경) (0) | 2022.06.15 |
|---|---|
| 2022 UI 트렌드 글래스모피즘과 클레이모피즘 CSS 생성하기(glassmorphism & claymorphism) (0) | 2022.06.07 |
| [css] 가상요소 ::after, ::before 사용방법 및 동작 안할 때 (content) (0) | 2022.03.03 |
| [css] CSS 그라데이션 색 추천과 코드 생성 해주는 uigradients (0) | 2022.02.17 |
| css @supports 를 이용해서 브라우저에 지원 여부에 따라서 코드 적용시키기 (Can I use) (0) | 2021.08.17 |